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

[c2design]

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

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

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

1.  2개의 TRectangle 배치

FMX 커스텀 UI 도구제작 1편에서도 설명 하였듯이  FireMonkey는 각각의 객체를 부모/자식 관계로 배치 할 수 있어 매우 편리 합니다.

이번 샘플에서는 2개의 TRectangle을 사용하여 상위에 놓은 TRectangle 을 현재 상태 값으로 사용 합니다.

상태값을 나타내는 상위의 TRectangle은 TAlign 속성을 사용하여 좌측이나 하단에 정렬시키고 넓이 값만 변화를 주면 됩니다.

상태 TRectangle에 시각효과를 더 주기 위해 Fill Color 에 Gradient를 적용 할 수도 있습니다.

 

2. 상태값 계산

Progress 에 Value 값을 지정 하는 방법은 간단한 비례식을 사용 하면 됩니다.

100% 를 기준으로 하였을때 사각형의 전체 넓이 또는 높이가 100에 해당이 되므로 Value값은 상태값 사각형의 넓이나 높이가 됩니다.

따라서

[ 100 : 전체사각형 넓이 = 상태값(Value) : 상태값 사각형넓이 ]   가 되는데 알고 싶은 값은 상태값을 나타내는 사각형의 넓이 이므로

상태값 사각형 넒이 = 전체사각형 넓이 x 상태값 / 100 으로 된 수식을 사용 하면 됩니다.

소스에 적용 하면 아래와 같이 됩니다.

procedure TMPForm.TrackBar1Change(Sender: TObject);
begin
  ValueRect1.Width := TrackBar1.Value * Rect_Prog1.Width / 100;
  VText1.Text := Round( TrackBar1.Value ).ToString;

  ValueRect2.Width := TrackBar1.Value * Rect_Prog2.Width / 100;

  ValueRect3.Width := TrackBar1.Value * Rect_Prog3.Width / 100;
  VText3.Text := Round( TrackBar1.Value ).ToString;


  ValueRectVert.Height := TrackBar1.Value * Rect_ProgVert.Height / 100;
  VText2.Text := Round( TrackBar1.Value ).ToString;
end;

데모 프로젝트 편의상 4개의 상태바를 만들고 동시에 적용 하도록 하였습니다.

상태값을 나타내는 Text 는 필요에 의해서 사용하면 됩니다.

샘플 프로젝트 소스 다운로드

FMXProgressBar.zip

 

이와 같은 원리를 이용하여 다양한 FMX UI 요소를 컴포넌트로 만들어서 배포 중에 있으니 참고 하시기 바랍니다.