[FMX] 다양한 옵션의 커스텀 UI 도구 제작 1 - ColorSwitch

[c2design]

FireMonkey의 여러가지 편리한 기능들을 이용하면 커스텀 UI 도구를 쉽게 제작 할 수 있습니다.

기본으로 제공하는 Switch의 경우 스타일을 사용 하지 않으면 색상과 크기를 원하는 형태로 바꿔서 사용하기에는 제한이 있으므로 커스텀 UI를 제작하여 다양한 옵션을 적용 할 수 있습니다.

샘플 프로젝트에서는 [가로 스위치] 와 [세로 스위치] 및 [3단 스위치]를 만들어 보았는데 원리를 알면 더욱 다양한 형태로 쉽게 제작 할 수 있고 그 방법을 소개 하겠습니다.

1. TRoundRect 와 TCircle 배치

FireMonkey 에서는 Visible한 모든 객체를 부모 자식 관계의 계층 구조로 레이어를 쌓아 만들 수 있는데 이는 가장 강력한 FireMonkey 특징 입니다. 이 특성을 활용해서 UI 객체를 그림 그리듯이 원하는 형태로 만들 수 있고 모든 객체는 클릭/터치 이벤트를 사용 할 수 있습니다.

객체에 클릭/터치 이벤트는 가장 상위에 있는 객체에 적용이 되기 떄문에 이번 예시와 같이 TRoundRect 위에 TCircle를 올려 놓았을 경우 TRoundRect 에서만 클릭/터치 이벤트를 적용 하기 위해서 TCircle 의 클릭/터치 이벤트를 Disable 시켜 놓으면 되는데 방법은 HitTest := FALSE 로 지정하면 됩니다.

Switch 객체의 크기는 TRoundRect  의 Width 와 Height 속성으로 가로 세로 크기를 지정 할 수 있습니다.

2. 클릭/터치에 따른 TRoundRect 위에서 TCircle 의 이동 방법

TRoundRect 클릭시에 TCircle 을 좌우 또는 상하로 이동시켜 스위치 작동상태롤 표현 하면 되는데 이때는 TCircle 이 TRoundRect 의 Child  이므로 단순히 Align 속성을 REFT/RIGHT TOP/BOTTOM 으로 지정만 하면 되고 3단 스위치의 경우 CENTER 속성도 사용 합니다.

그리고 TCircle 이 TRoundRect 경계면에 바로 인접 하지 않고 디자인 적으로 여백을 두기 위해서 TRoundRect의 Padding에 적당한 값을 지정 하여 줍니다.

3. 클릭/터치 이벤트 적용

TRoundRect 에 클릭/터치 이벤트는 OnClick 보다는 OnMouseUp 이벤트가 좋습니다. 이는 모바일에서도 좀 더 원활하게 작동하기 위함이고 윈도우 상에서도 OnClick 이벤트보다 OnMouseUp 이벤트가 좀 더 빠르게 작동 합니다.

TRoundRect 터치시 상태값은 별도의 전역변수룰 사용해도 되지만 매번 전역변수를 선언해서 지정 하는 것 보다 FireMonkey 객체 마다 가지고 있는 Tag 값(정수형)에 속성값을 할당 하면 되고 문자 저장시는 TagString 속성을 사용하면 편리 합니다.

현재 Tag 상태에 따라 TCircle Align 을 바꿔서 이동 시키고 컬러를 바꿔 주면 됩니다.

procedure TMForm.RoundRect1MouseUp(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Single);
begin
   if RoundRect1.Tag = 0 then
   begin
     RoundRect1.Tag := 1;
     Circle1.Fill.Color := $FFFF0000;
     Circle1.Align := TAlignLayout.Right;
   end
   else if RoundRect1.Tag = 1 then
   begin
     RoundRect1.Tag := 0;
     Circle1.Fill.Color := $FF808080;
     Circle1.Align := TAlignLayout.Left;
   end;

   Label1.Text := RoundRect1.Tag.ToString;
end;

전체 소스는 첨부 파일에서 확인 할 수 있습니다.

FireMonkey의 이러한 장점과 편리한 특성을 활용하여 UI/UX 컴포넌트를 좀더 쉽고 편리하게 사용 할 수 있도록 소개한 내용을 바탕으로 여러가지 다양한 컴포넌트 (Rapid Design UX & Chart) 도 제공 하고 있고 아래 링크에서 볼 수 있습니다.

 

FMXColorSwitch.zip