[Cocos Creator] Layout 개념 및 사용 예시

---

이 글은 PC 버전 TISTORY에 최적화 되어있습니다.

서론

 UI를 구성하다보면 Container 기능을 하는 UI를 쓸 때가 있습니다. 예를 들어서 리스트뷰나 그리드뷰가 있겠죠. Container에 Content를 넣을 때 자동 정렬이 된다면 얼마나 편할까요? Content 별로 margin을 줄 수 있다면? 이에 대한 니즈를 Creator에서는 Layout 컴포넌트를 통해 해결해줍니다.

1. Layout Component

2. Property

3. 사용 예시

Layout Component

 Layout 컴포넌트는 Node Library 에서 Layout을 선택하거나 addComponent을 통해서 추가할 수 있습니다. Property로는 Layout Type과 Resize Mode가 있습니다.

add Component를 이용한 Layout 추가

node library에서 layout 추가

layout Component 추가된 모습

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 사용

이 예에 대한 설명은 따로 달지 않아도 포스팅을 잘 따라 오셨다면 설정하실 수 있을 거라 생각합니다.