ݺߣ

ݺߣShare a Scribd company logo
embt.co/sprint-fmx-layoutsBlog Notes:
파이어몽키 레이아웃 이해와 활용
Developer Skill Sprint
Tips, Tricks and Techniques
윈도우10, 맥, 모바일 그리고 사물인터넷 개발을 위한
최고의 애플리케이션 개발 플랫폼
김현수(험프리)
RAD Studio 에반젤리스트
데브기어
tech.devgear.co.kr
hskim@embarcadero.kr
embt.co/sprint-fmx-layoutsBlog Notes:
• Windows
• OS X
• Android
• iOS
• RAD Studio
• Appmethod
• Object Pascal
• C++
스킬 스프린트의 대상은…
• RAD Studio 10 Seattle DocWiki
– http://docwiki.embarcadero.com/RADStudio/Seattle/en/
• Appmethod Summer 2015 Release DocWiki
– http://docwiki.appmethod.com/appmethod/1.17/topics/en/
• 데브기어 기술 게시판
– http://tech.devgear.co.kr/
• 앱메소드는 4개의 플랫폼에서 파이어몽키
프레임워크를 지원하며, RAD 스튜디오,
델파이, C++빌더는 4개 플랫폼 외에 윈도우
VCL을 지원합니다.
embt.co/sprint-fmx-layoutsBlog Notes:
Agenda
• 하나의 폼으로 다양한 해상도 지원
• 앵커(Anchor)
• 정렬(Alignment)
• 공백(Spcaing)
• 레이아웃(Layout)
• 그 이상
FMX 레이아웃: http://embt.co/fmxlayouts
embt.co/sprint-fmx-layoutsBlog Notes:
앵커(Anchor)
• 부모의 가장자리에서의 상대적인 위치
– Top
– Bottom
– Left
– Right
• 기본으로 Top, Left
• 부모의 크기변경에 따라 이동
• 각 컨트롤들은 0~4개의 앵커
DocWiki: http://embt.co/fmxanchors
embt.co/sprint-fmx-layoutsBlog Notes:
정렬(Alignment)
• 앵커, Size와 Position 설정에 따라 부모안에서 컨트롤 정렬. 기본값은 None.
• 가장자리 채우기
– Top, Bottom, Left, Right
• 정사각형을 유지하며 부모 채우기
– Fit, FitLeft, FitRight
• 부모의 한쪽면을 채우기
– MostBottom, MostTop, MostLeft, MostRight
• 하나의 축으로만 크기 조정(Width 또는 Height)
– Vertical, VertCenter, Horizontal, HorzCenter
• 기타 정렬
– Client, Center, Contents, Scale
DocWiki: http://embt.co/fmxalignlayout
embt.co/sprint-fmx-layoutsBlog Notes:
공백 – 마진(Margin)과 패딩(Padding)
• 마진(Margin)
– 형재(부모)와의
공백http://embt.co/fmxmargin
s
• 패딩(Padding)
– 자식과의 공백
– http://embt.co/fmxpadding
embt.co/sprint-fmx-layoutsBlog Notes:
TFlowLayout
• 같은 자식 컨트롤의 정렬
• 추가된 순서로 레이아웃 정렬
• TFlowLayoutBreak 이용 강제 줄바꿈
DocWiki: http://embt.co/tflowlayout
embt.co/sprint-fmx-layoutsBlog Notes:
TGridLayout
• 동일한 크기의 그리드안에 자식 컨트롤 정렬
• 부모의 크기 조절로 그리드 정렬
• ItemWidth와 ItemHeight속성 이용
• 개별 컨트롤 마진으로 여백 지정
DocWiki : http://embt.co/tgridlayout
embt.co/sprint-fmx-layoutsBlog Notes:
TGridPanelLayout
• 특정 행과 열의 그리드 생성
• 자식의 앵커 또는 크기 변경하지 않음
• 각 셀마다 하나의 자식 컨트롤 보유
• 자식의 높이, 너비, 정렬과 앵커 설정 가능
• 컨트롤이 여러 행과 셀을 차지할 수 있음
DocWiki : http://embt.co/tgridpanellayout
embt.co/sprint-fmx-layoutsBlog Notes:
TScaledLayout
• 크기 변경 시 자식 컨트롤 비율 적용
• 컨트롤의 가로/세로 비율이 유지되지 않음
• 가로/세로 비율을 유지하려면 Align을 Fit으로 설정
DocWiki: http://embt.co/tscaledlayout
embt.co/sprint-fmx-layoutsBlog Notes:
TScrollBox
• 자식들은 부모보다 많은 공간 활용
• 일반적으로 Top, Left 기준으로 자식들을 배치
• 스크롤해 추가 자식들 표시
• 참조:
– TVertScrollBox, THorzScrollBox, TFramedScrollBox and
TFramedVertScrollBox
– DocWiki: http://embt.co/tscrollbox
embt.co/sprint-fmx-layoutsBlog Notes:
TTabControl
• 컨트롤을 탭의 자식 컨트롤로 그룹
• 한번에 하나의 탭만 표시
• TabPosition := PlatformDefault으로 플랫폼의 기본동작
사용
• TabPosition := None 탭 네이비게이션 숨김
• TTabChangeAction 이용해 전환 애니메이션
DocWiki: http://embt.co/usingttabcontrol
embt.co/sprint-fmx-layoutsBlog Notes:
프레임(Frames)
• 사용자 인터페이스 재사용
– 레이아웃과 모든 이벤트 핸들러
– 유닛의 모든 코드
• 하나 또는 여러개의 프레임을 만들고,
현재 레이아웃 기반으로 위치변경
– 예:
• 모바일에서는 한화면 씩 표시
• 태블릿에서는 나란히 화면 표시
DocWiki: http://embt.co/workingwithframes
https://commons.wikimedia.org/wiki/File:Oil_painting_frame_Wellcome_L0067855.jpg
embt.co/sprint-fmx-layoutsBlog Notes:
TMultiView
• 여러 모드를 제공하는 슈퍼 패널
• 지원모드
– PlatformDefault
– Drawer
– NavigationPane
– Panel
– Popover
– Custom
• MasterPane, DetailPane, MasterButton 지정
• PlatformDefault로 플랫폼 및 방향 지정
• 사용자 정의 레이아웃과 동작 지원
DocWiki: http://embt.co/usingmultiview
embt.co/sprint-fmx-layoutsBlog Notes:
데모
트라이얼 무료
다운로드!!
devgear.co.kr/products/
embt.co/sprint-fmx-layoutsBlog Notes:
학습 리소스
• CodeRage 다시보기
– http://embt.co/coderage_fireui
– http://embt.co/coderage_win10_ui
• 엠바카데로
기술문서(DocWiki)
– 총괄: http://embt.co/fmxlayouts
– 레이아웃
• http://embt.co/tflowlayout
• http://embt.co/tgridlayout
• http://embt.co/tgridpanellayout
• http://embt.co/tscaledlayout
• http://embt.co/tscrollbox
– 관련 상세내용
• http://embt.co/fmxanchors
• http://embt.co/fmxalignlayout
• http://embt.co/fmxmargins
• http://embt.co/fmxpadding
– 추가 참조
• http://embt.co/usingttabcontrol
• http://embt.co/workingwithframes
• http://embt.co/usingmultiview
트라이얼 무료
다운로드!!
devgear.co.kr/products/
embt.co/sprint-fmx-layoutsBlog Notes:
Q&A
Developer Skill Sprint
Tips, Tricks and Techniques
The Ultimate Application Development platform for
Widows 10, Mac, Mobile and IoT
감사합니다 
김현수(험프리)
RAD Studio 에반젤리스트
데브기어
hskim@embarcadero.kr
트라이얼 무료
다운로드!!
devgear.co.kr/products/

More Related Content

20151229 C++ Skill Sprints_파이어몽키 레이아웃 이해와 활용

  • 1. embt.co/sprint-fmx-layoutsBlog Notes: 파이어몽키 레이아웃 이해와 활용 Developer Skill Sprint Tips, Tricks and Techniques 윈도우10, 맥, 모바일 그리고 사물인터넷 개발을 위한 최고의 애플리케이션 개발 플랫폼 김현수(험프리) RAD Studio 에반젤리스트 데브기어 tech.devgear.co.kr hskim@embarcadero.kr
  • 2. embt.co/sprint-fmx-layoutsBlog Notes: • Windows • OS X • Android • iOS • RAD Studio • Appmethod • Object Pascal • C++ 스킬 스프린트의 대상은… • RAD Studio 10 Seattle DocWiki – http://docwiki.embarcadero.com/RADStudio/Seattle/en/ • Appmethod Summer 2015 Release DocWiki – http://docwiki.appmethod.com/appmethod/1.17/topics/en/ • 데브기어 기술 게시판 – http://tech.devgear.co.kr/ • 앱메소드는 4개의 플랫폼에서 파이어몽키 프레임워크를 지원하며, RAD 스튜디오, 델파이, C++빌더는 4개 플랫폼 외에 윈도우 VCL을 지원합니다.
  • 3. embt.co/sprint-fmx-layoutsBlog Notes: Agenda • 하나의 폼으로 다양한 해상도 지원 • 앵커(Anchor) • 정렬(Alignment) • 공백(Spcaing) • 레이아웃(Layout) • 그 이상 FMX 레이아웃: http://embt.co/fmxlayouts
  • 4. embt.co/sprint-fmx-layoutsBlog Notes: 앵커(Anchor) • 부모의 가장자리에서의 상대적인 위치 – Top – Bottom – Left – Right • 기본으로 Top, Left • 부모의 크기변경에 따라 이동 • 각 컨트롤들은 0~4개의 앵커 DocWiki: http://embt.co/fmxanchors
  • 5. embt.co/sprint-fmx-layoutsBlog Notes: 정렬(Alignment) • 앵커, Size와 Position 설정에 따라 부모안에서 컨트롤 정렬. 기본값은 None. • 가장자리 채우기 – Top, Bottom, Left, Right • 정사각형을 유지하며 부모 채우기 – Fit, FitLeft, FitRight • 부모의 한쪽면을 채우기 – MostBottom, MostTop, MostLeft, MostRight • 하나의 축으로만 크기 조정(Width 또는 Height) – Vertical, VertCenter, Horizontal, HorzCenter • 기타 정렬 – Client, Center, Contents, Scale DocWiki: http://embt.co/fmxalignlayout
  • 6. embt.co/sprint-fmx-layoutsBlog Notes: 공백 – 마진(Margin)과 패딩(Padding) • 마진(Margin) – 형재(부모)와의 공백http://embt.co/fmxmargin s • 패딩(Padding) – 자식과의 공백 – http://embt.co/fmxpadding
  • 7. embt.co/sprint-fmx-layoutsBlog Notes: TFlowLayout • 같은 자식 컨트롤의 정렬 • 추가된 순서로 레이아웃 정렬 • TFlowLayoutBreak 이용 강제 줄바꿈 DocWiki: http://embt.co/tflowlayout
  • 8. embt.co/sprint-fmx-layoutsBlog Notes: TGridLayout • 동일한 크기의 그리드안에 자식 컨트롤 정렬 • 부모의 크기 조절로 그리드 정렬 • ItemWidth와 ItemHeight속성 이용 • 개별 컨트롤 마진으로 여백 지정 DocWiki : http://embt.co/tgridlayout
  • 9. embt.co/sprint-fmx-layoutsBlog Notes: TGridPanelLayout • 특정 행과 열의 그리드 생성 • 자식의 앵커 또는 크기 변경하지 않음 • 각 셀마다 하나의 자식 컨트롤 보유 • 자식의 높이, 너비, 정렬과 앵커 설정 가능 • 컨트롤이 여러 행과 셀을 차지할 수 있음 DocWiki : http://embt.co/tgridpanellayout
  • 10. embt.co/sprint-fmx-layoutsBlog Notes: TScaledLayout • 크기 변경 시 자식 컨트롤 비율 적용 • 컨트롤의 가로/세로 비율이 유지되지 않음 • 가로/세로 비율을 유지하려면 Align을 Fit으로 설정 DocWiki: http://embt.co/tscaledlayout
  • 11. embt.co/sprint-fmx-layoutsBlog Notes: TScrollBox • 자식들은 부모보다 많은 공간 활용 • 일반적으로 Top, Left 기준으로 자식들을 배치 • 스크롤해 추가 자식들 표시 • 참조: – TVertScrollBox, THorzScrollBox, TFramedScrollBox and TFramedVertScrollBox – DocWiki: http://embt.co/tscrollbox
  • 12. embt.co/sprint-fmx-layoutsBlog Notes: TTabControl • 컨트롤을 탭의 자식 컨트롤로 그룹 • 한번에 하나의 탭만 표시 • TabPosition := PlatformDefault으로 플랫폼의 기본동작 사용 • TabPosition := None 탭 네이비게이션 숨김 • TTabChangeAction 이용해 전환 애니메이션 DocWiki: http://embt.co/usingttabcontrol
  • 13. embt.co/sprint-fmx-layoutsBlog Notes: 프레임(Frames) • 사용자 인터페이스 재사용 – 레이아웃과 모든 이벤트 핸들러 – 유닛의 모든 코드 • 하나 또는 여러개의 프레임을 만들고, 현재 레이아웃 기반으로 위치변경 – 예: • 모바일에서는 한화면 씩 표시 • 태블릿에서는 나란히 화면 표시 DocWiki: http://embt.co/workingwithframes https://commons.wikimedia.org/wiki/File:Oil_painting_frame_Wellcome_L0067855.jpg
  • 14. embt.co/sprint-fmx-layoutsBlog Notes: TMultiView • 여러 모드를 제공하는 슈퍼 패널 • 지원모드 – PlatformDefault – Drawer – NavigationPane – Panel – Popover – Custom • MasterPane, DetailPane, MasterButton 지정 • PlatformDefault로 플랫폼 및 방향 지정 • 사용자 정의 레이아웃과 동작 지원 DocWiki: http://embt.co/usingmultiview
  • 16. embt.co/sprint-fmx-layoutsBlog Notes: 학습 리소스 • CodeRage 다시보기 – http://embt.co/coderage_fireui – http://embt.co/coderage_win10_ui • 엠바카데로 기술문서(DocWiki) – 총괄: http://embt.co/fmxlayouts – 레이아웃 • http://embt.co/tflowlayout • http://embt.co/tgridlayout • http://embt.co/tgridpanellayout • http://embt.co/tscaledlayout • http://embt.co/tscrollbox – 관련 상세내용 • http://embt.co/fmxanchors • http://embt.co/fmxalignlayout • http://embt.co/fmxmargins • http://embt.co/fmxpadding – 추가 참조 • http://embt.co/usingttabcontrol • http://embt.co/workingwithframes • http://embt.co/usingmultiview 트라이얼 무료 다운로드!! devgear.co.kr/products/
  • 17. embt.co/sprint-fmx-layoutsBlog Notes: Q&A Developer Skill Sprint Tips, Tricks and Techniques The Ultimate Application Development platform for Widows 10, Mac, Mobile and IoT 감사합니다  김현수(험프리) RAD Studio 에반젤리스트 데브기어 hskim@embarcadero.kr 트라이얼 무료 다운로드!! devgear.co.kr/products/