약국용 라디오 어플을 개발하는 개발사에서는, 오래전부터 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;

 

 

 

번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 14521
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 13152
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 15669
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 21187
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 22442
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 18072
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 38351
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 173858
1303 [UX Summit 요약] 레거시 데스크탑 앱 UI/UX 현대화 – 이론부터 실제까지 (Legacy desktop apps UI & UX modernization. From theory to practice) 관리자 2020.11.04 403
1302 델파이에서 파이썬 표현식 활용하기 (PYTHON4DELPHI 샘플 앱) 관리자 2020.11.03 870
1301 개발자가 지원해야 하는 핵심 플랫폼들 관리자 2020.11.02 294
1300 이 달의 기술자료 - 2020년 11월 file 험프리 2020.10.27 330
1299 DELPHICON 2020, 곧 시작됩니다! file 관리자 2020.10.27 284
1298 [UX Summit 요약] 윈도우10에 멋진 플루언트UI 룩앤필을 델파이로 구현하기 (Giving your Apps the Fluent UI Look and Feel with Delphi)을 요약했습니다. - (델파이 개발자 뿐만 아니라) 윈도우 애플리케이션 개발자가 알아야할 기본이되고 중요한 마이크로소프트 UI 디자인의 핵심을 정리하고 보여줍니다. 관리자 2020.10.26 387
1297 RAD스튜디오와 델파이 – 원조 로우코드! 관리자 2020.10.23 294
1296 [UX Summit 요약 / 사례연구] 모바일은 두 번째: 어떨 때 데스크톱에 우선 집중하는가? 관리자 2020.10.22 266
1295 XML MAPPER 업데이트 관리자 2020.10.21 274
1294 [UX Summit 요약] 데스크탑용 UX 구축/최적화 전략(Strategies for building and optimizing the desktop UX) 관리자 2020.10.21 253
1293 [UX Summit 요약] 훌륭한 UI에 적용되는 과학적 원리 (Science of Great UI) 관리자 2020.10.19 246
1292 [개발팁] 오래된 레거시 델파이, C++ 애플리케이션을 최신 스타일의 초고속 앱으로 마이그레이션하기 관리자 2020.10.15 334
1291 C++ 업데이트 소식: 10.4와 10.4.1에서 집중한 C++ 품질과 관련하여 관리자 2020.10.12 305
1290 [10.4 시드니][업데이트 1] 새로운 IDE 기능들 관리자 2020.10.08 329
1289 [엠바카데로 UX SUMMIT] 눈여겨 봐야할 컨텐츠들! 관리자 2020.10.06 285
1288 델파이용 볼드(BOLD FOR DELPHI) 오픈 소스 공개! 관리자 2020.09.25 480
1287 [업데이트 서브스크립션 고객 - 무상제공] C++ 컴파일 스피드를 확 높여줄 TwineCompile 관리자 2020.09.25 537
1286 이 달의 기술자료 - 2020년 10월 file 험프리 2020.09.24 356
1285 델파이 개발자를 위한 파이썬 file 관리자 2020.09.23 567
1284 [팁] VLC 플레이어(ActiveX Import 해) 사용하기 file 험프리 2020.09.22 975