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

2017.09.12 16:08

험프리 조회 수:530

약국용 라디오 어플을 개발하는 개발사에서는, 오래전부터 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 15411
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13959
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16495
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22047
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23266
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18920
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39243
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174694
34 안드로이드 개발환경 추가 조치방법 - RAD Studio에서 SDK 설정 Humphery 2015.10.01 5557
33 안드로이드 웹브라우저에서 "tel:, sms:" 링크가 동작하지 않는 이슈 해결하기 Humphery 2015.06.26 4827
32 모바일 앱 실행 시 (비정상종료)검은화면이 표시되는 경우 조치방법 험프리 2015.07.03 4401
31 [하이브리드 앱 개발] 웹페이지에서 델파이 함수 호출하기 Humphery 2015.06.26 4073
30 [추가자료] 안드로이드 개발환경 추가 조치방법 - 수동 SDK Tools 업데이트 file Humphery 2015.10.01 3051
29 안드로이드 SDK 설정 방법 file 험프리 2016.09.20 2866
28 파이어몽키(FireMonkey) vs. VCL 관리자 2017.07.18 2843
27 안면인식(Face Detection) 라이브러리(안드로이드, iOS) 험프리 2017.10.30 2418
26 앱의 상태바(StatusBar) 제어하기(색상변경, 감추기, 투명하게) Humphery 2015.06.04 2338
25 [개발환경 설정] 안드로이드 기기 연결 시 'USB 디버깅 허용' 창이 표시되지 않는 경우 조치 방법 file 험프리 2018.08.21 1864
24 [XE8] 모바일 튜토리얼 무료 다운로드(영문), 총 364페이지 관리자 2015.07.09 1545
23 [안드로이드/iOS] 이미 배포(Deployment)된 파일 업데이트 하기 험프리 2016.03.31 1537
22 RAD 스튜디오 10.3.1에서 FCM 수신 설정하기 [5] 험프리 2019.06.10 1365
21 TTS(Text-to-Speech) 라이브러리(윈도우, 맥OS, iOS, 안드로이드) [2] 험프리 2017.10.30 1338
20 iOS SDK 추가 화면에서 SDK 목록이 표시되지 않을 경우 해결방안 file 험프리 2019.01.16 978
19 [FMX] 안드로이드 패키지 버전 구하기 튜토리얼 file 험프리 2017.09.01 945
18 [FMX] TListView 더보기 버튼 구현하기 험프리 2017.09.20 935
17 [발표자료] 20160929 나만의 앱 완성하기 with 델파이 험프리 2016.09.21 881
16 [개발자 Tip] 모바일 앱 개발 시 시간 낭비를 줄이는 Tip #1: 테스트하기 위해 기다리는 시간을 줄인다. 관리자 2016.12.26 879
15 iOS9의 새로운 기능인 "App transport Security" 예외 허용을 위한 Info.plist xml 수정방법 [1] Humphery 2015.10.01 847
쓰기
태그