[Cocos Creator] Layout 개념 및 사용 예시
이 글은 PC 버전 TISTORY에 최적화 되어있습니다.
서론
UI를 구성하다보면 Container 기능을 하는 UI를 쓸 때가 있습니다. 예를 들어서 리스트뷰나 그리드뷰가 있겠죠. Container에 Content를 넣을 때 자동 정렬이 된다면 얼마나 편할까요? Content 별로 margin을 줄 수 있다면? 이에 대한 니즈를 Creator에서는 Layout 컴포넌트를 통해 해결해줍니다.
1. Layout Component2. Property3. 사용 예시
Layout Component
Layout 컴포넌트는 Node Library 에서 Layout을 선택하거나 addComponent을 통해서 추가할 수 있습니다. Property로는 Layout Type과 Resize Mode가 있습니다.
Property
layout의 default type은 NONE입니다. NONE 타입은 container와 sub-object 간에 관계가 아예 없다는 것이죠. 쉽게 말해 컨테이너 크기가 변해도 자식의 크기는 변하지 않으며, 자식이 변해도 컨테이너는 변하지 않는다는 것 입니다.
resize mode는 총 3가지를 지원하며 기능은 다음과 같습니다.
- NONE: 컨테이너와 자식은 각각 독립적이다
- CHILDREN: 자식들은 컨테이너 크기에 맞춰 사이징 된다.
- CONTAINER: 컨테이너는 자식들의 크기에 맞춰 사이징 된다.
| Property | Function Explanation |
|---|---|
| Type | Layout 타입. (NONE, HORIZONTAL, VERTICAL, Grid) |
| Resize Mode | Resize 전략. (NONE, CHILDREN, CONTAINER) |
| PaddingLeft | 컨테이너와 서브 오브젝트(컨테이너의 자식 오브젝트들) 사이의 left padding 값 |
| PaddingRight | 컨테이너와 서브 오브젝트(컨테이너의 자식 오브젝트들) 사이의 right padding 값 |
| PaddingTop | 컨테이너와 서브 오브젝트(컨테이너의 자식 오브젝트들) 사이의 top padding 값 |
| PaddingBottom | 컨테이너와 서브 오브젝트(컨테이너의 자식 오브젝트들) 사이의 bottom padding 값 |
| SpacingX | horizontal layout에서 서브 오브젝트들 간의 거리. NONE 모드에서는 이 속성이 없습니다. |
| SpacingY | vertical layout에서 서브 오브젝트들 간의 거리. NONE 모드에서는 이 속성이 없습니다. |
| Horizontal Direction | horizontal layout으로 타입이 결정되었을 때 첫번째 자식노드가 왼쪽에서 시작하는가 오른쪽에서 시작하는가를 결정 |
| Vertical Direction | vertical layout으로 타입이 결정되었을 때 첫번째 자식노드가 위쪽에서 시작하는가 아래쪽에서 시작하는가를 결정 |
| Cell Size | 이 옵션은 Grid Layout에서만 가능합니다. layout의 element들의 사이즈를 정합니다. |
| Start Axis | 이 옵션은 Grid Layout에서만 가능합니다. 초기의 element의 시작 위치를 결정합니다. |
사용 예시
위에서 다룬 프로퍼티들을 다양하게 사용하여 Layout의 활용법을 다뤄보도록 하겠습니다.
ㄱ. 타입: GRID / Resize Mode: NONE
그리드 타입에 NONE으로 리사이즈 모드를 설정했습니다. 패딩과 스페이스도 적절히 값을 넣었습니다.
위에서 아래로 좌에서 우로 붙는 것을 보실 수 있고 resize mode가 NONE이어서 자식이 붙더라도 컨테이너의 크기는 영향이 없는 것을 확인할 수 있습니다.
ㄴ. 타입: HORIZONTAL / Resize Mode: CHILDREN
가로로 추가되는 타입에 컨테이너의 크기에 자식이 영향받도록 설정했습니다.
ㄷ. 타입: GRID / Resize Mode: CONTAINER
그리드 타입에 자식의 크기에 따라 컨테이너가 영향받도록 설정했습니다.
ㄹ. 타입: GRID / Resize Mode: CONTAINER / ScrollView 사용
이 예에 대한 설명은 따로 달지 않아도 포스팅을 잘 따라 오셨다면 설정하실 수 있을 거라 생각합니다.