공통 [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 15433
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13961
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 16499
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 22054
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 23268
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18923
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 39253
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 174698
23 윈도우 & 리눅스에 RAD서버 손쉽게 배포하기 관리자 2021.04.12 505
22 RAD 서버 : 웹 속성을 폴더에 매핑하기 file 김원경 2020.03.17 1538
21 Swagger / YAML 및 RESTful API의 자체 문서화 김원경 2020.03.11 1604
20 RAD 서버에 Swagger UI 임베이딩 김원경 2020.03.09 532
19 TEMSDataSetResource 컴포넌트를 사용하여 RAD 서버의 마스터-디테일 데이터 구현하기 file 김원경 2020.03.06 407
18 RAD서버 도커(Docker) 기술 가이드 관리자 2020.02.26 423
17 RAD 서버 완벽 가이드 - 200페이지 분량의 전자책 file 험프리 2020.02.07 750
16 RAD서버에서 데이터를 JSON으로 어떻게 오픈할 수 있을까요? (JSONValue와 JSONWriter 활용하기) 관리자 2020.01.21 318
15 RAD서버 활용하기 (엠바카데로 아카데미 코스) 관리자 2020.01.06 283
14 [RAD서버] JSON 처리 단순화 컴포넌트 활용 - TEMSDataSetResource 험프리 2019.09.27 752
13 [10.3 리오][업데이트 2] 새로운 RAD서버 관리 콘솔 관리자 2019.08.28 558
12 리눅스에 RAD서버 배포하기 관리자 2019.07.11 459
11 기존 시스템을 웹(Web)으로 확장하기 위해 고려해야 할 두 가지 포인트 관리자 2018.06.11 1383
10 델파이/C++빌더 개발자를 위한 웹 개발 with ExtJS! 관리자 2018.06.04 954
9 RAD서버 솔루션 시리즈: 필드 서비스 애플리케이션 관리자 2018.06.01 623
8 Ext JS 활용과 앞으로의 방향 관리자 2018.05.24 1277
7 센차 ExtJS 웹 클라이언트 + RAD서버 10.2.3 관리자 2018.04.24 1437
6 [10.2 도쿄][릴리즈3] RAD서버에서 센차 Ext JS 지원 확장 관리자 2018.03.30 508
5 [발표자료] 2018022 마이크로서비스 아키텍처 구현과 활용 with RAD서버 file 관리자 2018.02.23 428
4 RAD서버로 개발은 확장하면서도 비용을 절감하는 방법 (RAD서버 라이선스 유형별 정리) file 관리자 2017.06.20 1633
쓰기
태그