공통 [FMX] 폼의 높이를 애니메이션으로 변경하기, 툴바를 끌어 폼 이동하기

2017.09.12 16:08

험프리 조회 수:554

약국용 라디오 어플을 개발하는 개발사에서는, 오래전부터 PC 기반으로만 라디오 서비스를 하고 있습니다.

해당 개발사에서는 노후된 앱을 최신 운영체제(윈도우 10 등) 지원과 모바일 확장을 위해 파이어몽키로 재개발 중입니다.

(파이어몽키는 윈도우, OSX, iOS, 안드로이드를 하나의 소스코드로 개발할 수 있습니다.)

 

개발 중 몇가지 질문을 주셔서 기술지원 후 해당 내용 일부를 공유합니다.

 

이 글에서는 다음 내용의 구현 방법을 소개합니다.

1, 폼의 일부영역 보이기/가리기(Collapse)

2, Border가 없는 폼에서 특정영역(Toolbar)을 마우스로 이동하기

 

결과 화면은 아래와 같습니다.

 

 

 

 

1, 폼의 일부영역 보이기/가리기(Collapse)

이 기능은 TFloatAnimation 컴포넌트를 사용해 손쉽게 구현할 수 있었습니다.

(파이어몽키에는 애니메이션과 효과를 기본 컴포넌트로 제공합니다.)

 

TFloatAnimation은 지정 된 시작과 끝 Float 값에 대해 애니메이션 되면 값이 변경할 수 있어, 크기, 위치, 각도, 투명도 등을 천천히 변경할 수 있습니다.

 

하지만, 폼의 높이(Height) 속성에는 FloatAnimaion을 지정할 수 없어, 폼에 레이아웃 컴포넌트를 놓고, 레이아웃 컴포넌트의 높이를 변경시키고, 변경 시 발생하는 OnProcess 이벤트에서 폼의 높이를 조정하도록 구현했습니다.

 

위 기능의 코드는 아래와 같습니다.

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
procedure TForm2.FormCreate(Sender: TObject);
begin
  Self.BorderStyle := TFmxFormBorderStyle.None;
 
  FOrgHeight := lytMain.Height;
end;
 
procedure TForm2.Button1Click(Sender: TObject);
begin
  lytMain.Align := TAlignLayout.None;
  FloatAnimation1.Duration := 0.5;
  if lytMain.Height = 0  then
  begin
    FloatAnimation1.StartValue := 0;
    FloatAnimation1.StopValue := FOrgHeight;
    FloatAnimation1.Start;
  end
  else
  begin
    FOrgHeight := lytMain.Height;
    FloatAnimation1.StartValue := FOrgHeight;
    FloatAnimation1.StopValue := 0;
    FloatAnimation1.Start;
  end;
end;
 
procedure TForm2.FloatAnimation1Finish(Sender: TObject);
begin
  lytMain.Align := TAlignLayout.Client;
end;
 
procedure TForm2.FloatAnimation1Process(Sender: TObject);
begin
  // 레이아웃 크기 조정 시 폼의 크기 조정
  Self.Height := Trunc(ToolBar1.Height + lytMain.Height) + 1;
end;

 

 

 

 

2, Border가 없는 폼에서 특정영역을 마우스로 이동하기

테두리가 없는 폼에서 제목등의 특정영역을 마우스로 끌어 이동하기 위해 다음 코드를 사용했습니다.

(해당 코드는 윈도우와 OSX(맥)에서 모두 동작합니다.)

 

?
1
2
3
4
5
procedure TForm2.ToolBar1MouseDown(Sender: TObject; Button: TMouseButton;
  Shift: TShiftState; X, Y: Single);
begin
  if (Button = TMouseButton.mbLeft) then StartWindowDrag;
end;

 

 

 

, 이 게시물을
Profile
목록
목록
번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 17846
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 16205
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 18857
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 24428
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 25807
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 21167
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 41756
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 177065
234 기술자료 TOP 7 - 개발자들이 가장 많이 클릭한 기술자료는? (2019년 상반기) 관리자 2019.06.25 572
233 [업데이트][패치][10.3.3] RAD 스튜디오 10.3.3 Indy 서버 SSL 인증서 패치 험프리 2020.01.14 571
232 [다음 버전 정보] C++11을 32비트 윈도우 앱 개발에서 사용할 수 있습니다. Humphery 2015.08.25 571
231 [사례 소개] 데브기어 마이그레이션 유상 컨설팅 사례 험프리 2020.04.22 570
230 RAD 스튜디오에서 iOS 12에 대응 험프리 2018.09.27 567
229 이 달의 기술자료 - 2017년 10월 file 험프리 2017.09.26 566
228 [고객사례-위치확인, 배터리 문제 해결, 모바일, 델파이] WhereontheMap [1] 관리자 2018.03.29 564
227 [시애틀] 스타일북 컴포넌트에 여러개의 플랫폼 스타일을 담을 수 있습니다. Humphery 2015.09.04 564
226 [10.4 시드니][업데이트 2] RAD스튜디오 10.4.2 자동 설치(SILENT INSTALLER) 관리자 2021.03.02 563
225 [베를린 U1] TGrid가 네이티브 렌더링을 지원해 더 부드럽고 강력한 기능을 제공합니다. file 험프리 2016.09.20 562
224 RAD스튜디오의 iOS 13 및 안드로이드 64-bit 대응 관리자 2019.10.21 561
223 [고객사례-유틸리티, 델파이] TreeSize - 하드 디스크 공간 관리 프로그램 관리자 2020.02.18 559
222 이 달의 기술자료 - 2021년 06월 file 험프리 2021.05.27 557
221 [코드레이지11] FireDAC 이해하기, RAD 스튜디오 데이터 엑세스 프레임워크 선택 - Cary Jensen 험프리 2016.11.24 557
» [FMX] 폼의 높이를 애니메이션으로 변경하기, 툴바를 끌어 폼 이동하기 험프리 2017.09.12 554
219 [고객사례-설치도구, 델파이] RAD 안드로이드 관리자 2017.12.06 551
218 이 달의 기술자료 - 2017년 09월 file 험프리 2017.09.01 551
217 이 달의 기술자료 - 2015년 10월 file 험프리 2015.09.25 550
216 20150811 사물인터넷 실제 구현하기 DeepDive 세미나 발표자료 관리자 2015.08.12 550
215 [고객사례-설치도구, 델파이] RAD&Installer 관리자 2017.10.31 550
쓰기
태그