스타일을 애플리케이션 측에서 조작

이 기사는 이전에 EDN에 게시 한 "FireMonkey: 스타일 속성을 변경하고 메서드를 동적으로 실행"을 10.2 Tokyo 용으로 재 작성했습니다.
EDN의 기사는 커스텀 스타일을 스스로 만들어 조작한다고 하는 내용이었습니다만, 스타일을 동적으로 조작하는 곳에 포커스 해 보았습니다.

어플리케이션상에서, 유저가 행한 동작에 대해서, 색을 바꾸거나, 버튼상에 표시되는 문자를 바꾸거나 하는 일이 있지요.
Delphi(C++Builder)의 FireMonkey 프레임워크에는 스타일이라는 개념이 있으며 이 스타일을 사용하여 구성 요소의 모양과 느낌을 정의합니다.
스타일의 속성을 동적으로 조작하면 사용자가 한 동작에 대해 다음 동작을 유도하는 등을 할 수 있습니다.

동적으로 조작할 때입니다만, FindStyleResource 메소드를 사용하면(자) 스타일의 서브 컴퍼넌트를 검색할 수가 있습니다.
검색한 스타일의 서브 컴퍼넌트의 프로퍼티의 값등을 변화시킨다고 하는 방법으로 조작합니다.

샘플



간단한 샘플 응용 프로그램의 실제 움직임으로 확인합니다.
폼에 두 개의 TButton과 두 개의 TRAdioButton을 배치합니다.

샘플 코드



// users に FMX.Styles.Objects, FMX.Styles, FMX.Objects を追加する

// 背景だけを回転
procedure TForm1.RadioButton1Change(Sender: TObject);
var
  mBack: TButtonStyleObject;
begin
  if RadioButton1.IsChecked then
  begin
    mBack := Button1.FindStyleResource('background') as TButtonStyleObject;
    if Assigned(mBack) then
      mBack.RotationAngle := mBack.RotationAngle + 30;
  end;
end;

// Button コンポーネントを回転
procedure TForm1.RadioButton2Change(Sender: TObject);
begin
  if RadioButton2.IsChecked then
  begin
    Button2.RotationAngle := Button2.RotationAngle + 30;
  end;
end;


실행


  • RadioButton1을 확인하면 Button1의 배경 만 30도 회전합니다.
  • RadioButton2를 확인하면 Button2가 30도 회전합니다.



    샘플 해설



    기본 TButton 스타일은
  • TText (자원 이름 text)
  • TButtonStyleObject (리소스 이름 background)
  • TGlyph (자원 이름 glyphstyle)

  • 세 가지 하위 구성 요소로 구성됩니다.

    RotationAngle이라는 속성은 회전 각도를 나타내는 속성입니다. (기본값은 0)
    TButton 속성의 RotationAngle 속성 값을 변경하면 TButton 자체가 회전합니다.
    TButton 스타일의 배경을 받아들이는 TButtonStyleObject 의 RotationAngle 의 프로퍼티의 값을 바꾸면(자), 배경이 되는 테두리만이 회전합니다.

    참고


  • FindStyleResource
  • 스타일로 FireMonkey 애플리케이션 사용자 정의
  • 좋은 웹페이지 즐겨찾기