컴포넌트 추가하기
UI Library 에서 컴포넌트를 골라 화면에 배치하기
2 min read
화면은 컴포넌트(Component) 로 채워집니다. Layerz 의 컴포넌트는 그림이 아니라 OS 가 제공하는 실제 네이티브 UI 입니다. 그래서 캔버스에서 보는 그대로가 진짜 앱이 됩니다.
배치하기
UI Library 를 열고 원하는 컴포넌트를 Page 위로 Drag and Drop 합니다. 떨어뜨린 위치에 맞춰 Auto Layout 이 자동으로 적용되어 항상 정돈된 상태로 배치됩니다.
드래그하지 않고 Library 에서 컴포넌트를 선택만 하면, 현재 편집기에서 선택되어 있던 View 의 정가운데에 추가됩니다.
View 같은 기본 컴포넌트는 다른 컴포넌트를 자식으로 가질 수 있어, 중첩해서 화면 구조를 만들 수 있습니다.
컴포넌트 분류
UI Library 의 컴포넌트는 다음과 같이 나뉩니다.
- Standard — View, Effect, Image, Label
- Container — List(목록), Stack(정렬 묶음)
- Control — Button, Text Field, Text View, Activity Indicator, Segmented Control, Slider, Toggle, Stepper, Page Control, Progress, Map, Color Well, Date Picker, Calendar, Web
각 컴포넌트의 용도와 속성, 데이터 바인딩은 UI 컴포넌트 전체 에서 자세히 다룹니다.
이 밖에 직접 만든 커스텀 컴포넌트 와 내장 Template 도 Library 에서 함께 배치할 수 있습니다.
다음 단계
배치한 컴포넌트는 Inspector 에서 속성을 편집하고, 데이터에 바인딩하거나 이벤트에 Action Flow를 연결해 살아 움직이게 만듭니다.