[Unity Manual] Auto Layout 알아보기

원문 링크

https://docs.unity3d.com/Packages/com.unity.ugui@1.0/manual/UIAutoLayout.html

Auto Layout | Unity UI | 1.0.0

본문은 위의 링크 내용을 학습 및 영어 공부를 하기 위해 작성된 글입니다.

내용의 순서는 무작정 해석 -> 해석 후에도 모르겠거나 알게된 내용 설명 -> 기타의 순으로 진행됩니다.

해석 도중에 * 표시는 저의 궁금증을 표기하기 위해 남겨둔 것입니다.

이외 기타 궁금한 사항, 틀린 내용 그리고 잡다한 내용까지 언제든 댓글을 통해 남겨주세요.

 

Auto Layout

Rect Transform 레이아웃 시스템은 많은 레이아웃의 다른 타입들을 다루기에 충분히 유연하다. 그리고 또한 Element들은 완전히 자유로운 fashion에 놓여지는 것을 허락한다.

그러나 때때로 좀 더 구조적인 것이 필요할 때가 있다.

 

Auto layout 시스템은 Element들을 놓는 방법을 제공한다. 중첩된 레이아웃 그룹에, 예를 들면 수평 그룹들, 수직 그룹들 그리고 그리드 형태의

그것은 또한 원소들을 포함된 컨텐츠에 따라 자동적으로 조절될 수 있도록 허락한다.

예를 들면 버튼은 동적으로 크기가 조절될 수 있다. 그것의 텍스트 컨텐츠에 패딩을 더하여,

 

Auto layout 시스템은 기본 Rect Transform 레이아웃 시스템의 기초인 시스템이다.

그것은 추가적으로 몇몇 혹은 모든 엘리멘트에 사용된다.

 

Understanding Layout Elements

Auto Layout 시스템은 레아이웃 요소와 레이아웃 컨트롤러들의 컨셉을 기초로 두었다.

레이아웃 요소는 Rect Transform과 추가적인 다른 컴포넌트뿐만 아니라 함께 Game Object이다.

레이아웃 요소는 사이가 가져야만하는 확실한 요소이다.

레이아웃 요소는 직접적으로 그들의 크기에 정해지지 않지만, 레이아웃 컨트롤러 같은 다른 함수 컴포넌트는 그들이 제공하는 정보를 그들이 크기를 계산하는 데에 사용하기 위해서 사용할 수 있다.

 

레이아웃 요소는 그것들이 가지고 있는 정의된 프로퍼티가 있다.

• Minimum Width
• Minimum Height
• Preferred Width
• Preferred Height
• Flexible Width
• Flexible Hegiht

레이아웃 요소들에 의해 제공된 정보를 사용하는 레이아웃 컨트롤러 컴포넌트의 예로 Content Size Filtter 그리고 다양한 Layout Group 컴포넌트가 있다.

어떻게 레이아웃 엘리멘트가 레이아웃 그룹에 크기에 크기가 조절되는지 기초 원리는 다음과 같다.

• 첫번째 최소 사이즈가 할당된다.
• 만약 충분한 이용한 가능한 공간이 있다면, 준비된 크기가 할당된다.
• 만약 추가적인 이용한 가능한 공간이 있다면, flexible 크기가 할당된다.

그것 위에 Rect Transform과 함께 Game Object는 레이아웃 엘리멘트로써 기능할 수 있다.

기본에 의해 최소, 준비된 그리고 Flexible 크기가 0인 경우, 전체 컴포넌트들은 이 레이아웃 프로퍼티는 변경될 것이다. Game Object가 추가 될 때,

 

이미지와 텍스트 컴포넌트가 레이아웃 요소 특성들을 제공하는 컴포넌트의 두 가지 예이다.

그들은 준비된 너비와 높이를 sprite 혹은 텍스트 컨텐츠를 맞추기 위해 변경한다.

 

Layout Element Component

너가 최소, 선호되는 혹은 유연한 사이즈를 오버라이드하기를 원한다면, 너는 레이아웃 엘리멘트 컴포넌트를 게임 오브젝트에 추가하여 할 수 있다.

레이아웃 엘리멘트 컴포넌트는 너가 값을 오버라이드 할 수 있게 한다. 하나 혹은 그 이상의 레이아웃 프로퍼티들로,

너가 오버라이드 하기를 원하는 프로퍼티에 체크박스를 허용해라 그리고 너가 오버라이드 하기르 원하는 것과 함께 값을 명시해라.

 

더 많은 자료를 위해 Layout Element 레퍼런스 페이지를 보아라.

 

Understanding Layout Controllers

레이아웃 컨트롤러들은 사이즈를 조절하고 하나 혹은 그 이상의 레이아웃 요소의 가능한 위치를 잡는 컴포넌트이다.

Rect Transform를 가진 게임 오브젝트를 의미한다.

레이아웃 컨트롤러는 그것의 레이아웃 요소를 조종 할 수 있다. ( 그 자체와 동일한 게임 오브젝트 ) 혹은 그것이 자식 레이아웃 요소를 조정할 수 있다.

 

레이아웃 컨트롤러로써 기능하는 컴포넌트는 또한 그 자체로써 기능할 수 있다. 동시에 레이아웃 요소로써,

 

Content Size Fitter

Content Size Fitter는 그 자체 레이아웃 요소의 크기를 조종하는 레이아웃 컨트롤러로써 기능한다.

자동 레이아웃 시스템을 보여주기 위한 가장 간단한 방법은 Content Size Filtter 컴포넌트를 게임 오브젝트에 Text 컴포넌트와 함께 추가하는 것이다.

만약 너가 수평 혹은 수직 맞춤을 선호하여 설정한다면, Rect Transform은 그것의 가로 그리고/혹은 높이를 Text 컨텐츠에 맞추기 위하여 배치할 것이다.

 

Aspect Ratio Fitter

Aspect Ratio Fitter는 그것 자체의 레이아웃 요소의 크기를 조절하는 레이아웃 컨트롤러로써 기능한다.

그것은 가로 혹은 vice versa를 맞추기 위해 높이를 조절한다. 혹은 그것은 요소를 내부의 부모 혹은 그것의 부모를 맞출 수 있게 만든다. Aspect Ratio Fitter는 레이아웃 정보를 가지지 않는다. 계정안에, 최소 사이즈와 선호되는 사이즈처럼

 

Layout Groups

레이아웃 그룹은 자식 레이아웃 요소의 사지으와 크기를 조절하기 위한 레이아웃 컨트롤러로써 기능한다.

예를 들면, 수평 레이아웃 그룹은 그것의 자식을 서로 옆에 놓는다. 그리고 그리드 레이아웃 그룹은 그것의 자식을 격자 안에 놓는다.

 

레이아웃 그룹은 그것의 크기를 조절할 수 없다. 때문에 그것은 그것의 레이아웃 요소로써 기능한다. 그리고 그것은 다른 레이아웃 컨트롤러에 의해 조절될 수 있거나 수동적으로 배치된다.

레이아웃 그룹이 할당되는 크기가 무엇이든지, 그것은 대부분 케이스에서 근접한 공간의 양을 할당하려고 시도한다. 각각 그것의 자식 요소에게, 최소한, 선호되는 그리고 유연한 사이즈를 기반으로, 그들이 보고받는,

레이아웃 그룹들은 또한 이러한 방식으로 임의로 중첩될 수 있다. 

 

Driven Rect Transform properties

레이아웃 컨트롤러가 자동 레이아웃 시스템에서 자동적으로 크기와 전체 UI 요소의 위치를 조절하는 반면에,

그것들의 사이즈와 위치는 수동적으로 편집될 수 없다. 같은 시간에, 인스펙터 혹은 씬뷰를 통하여,

이렇게 변경된 값은 어차피 단지 레이아웃 컨트롤러에 의해서 리셋될 것이다. 다음 레이아웃 계산때,

 

Rect Transform은 driven 속성의 개념을 갖는다. 이것을 정해주기 위해서,

예를 들어 최소값 혹은 선호 값으로 설정된 수평 배치 속성을 갖는 Content Size Fitter가 Rect Transform의 가로를 drive할 것이라면, 같은 게임 오브젝트 위에,

그 너비는 읽기 값으로써 나타날 것이고 Rect Transform의 위에 작은 정보 상자는 하나 혹은 그 이상의 속성이 Content Size Fitter에 의해 drive된 것을 알릴 것이다.

 

driven Rect Transform 속성들은 다른 이유를 가진다. 예방하는 수동적인 편집 옆에,

레이아웃은 변경될 수 있다. 단지 해상도 혹은 게임 뷰의 사이즈가 변경됨으로써,

이것은 차례대로 크기 혹은 레이아웃 요소의 배치를 변경할 수 있다. 그리고 그것은 driven 속성의 값을 변경한다.

하지만 그것은 요구되지 않는다. 그 씬이 표시되는 것을, 저장되지 않은 변경을 가짐으로써, 단지 그 게임 뷰가 변경되었기 때문에,

이것을 예방하기 위해서, driven 속성의 값은 저장되지 않는다. 씬의 부분으로써 그리고 그것을 바꿔도 변경된것 처럼 씬을 표시하지 않는다.

 

Technical Details

자동 레이아웃 시스템은 전체 컴포넌트 빌트인과 함께 온다. 그러나 그것은 또한 사용자 방법으로 레이아웃을 조절하는 새로운 컴포넌트를 생성하는 것을 가능하게 한다.

이것은 컴포넌트가 명시된 인터페이스를 구현함으로써 된다. 그리고 그것은 자동 레이아웃 시스템에 의해 인식된다.

 

Layout Interface

컴포넌트는 레이아웃 요소로써 다뤄진다. 오토 레이아웃 시스템에 의해, 그것이 ILayoutElement 인터페이스로 구현되었다면,

 

컴포넌트는 그것의 자식의 Rect Transform을 drive 하기 위해 기대된다. 그것이 ILayoutGroup 인터페이스로 구현되었다면,

 

컴포넌트는 그것의 Rect Transform을 drive 하기 위해 기대된다. 그것이 ILayoutSelfController 인터페이스로 구현되었다면,

 

Layout Calculations

자동 레이아웃 시스템은 평가하고 레이아웃을 실행한다. 다음 순서에 따라,

1. 최소, 선호된, 유연한 레이아웃 요소의 너비는 ILayoutElement 컴포넌트 위에 CalculateLayoutInputHorizontal을 호출함으로써 계산된다.
   이것은 bottom-up 순서로 수행된다. 그리고 자식들은 그것들의 부모 이전에 계산된다. 부모들은 정보를 가질 수 있다. 그들의 계정 자식들에서, 그들의 계산을 통해
2. 레이아웃 요소의 유효 폭은 계산 된다. 그리고 ILayoutController의 SetLayoutHorizontal을 부름으로써 배치된다.
   이것은 top-down 정렬로 수행된다. 그리고 그것은 자식들을 그들의 부모 후에 계산한다. 반면에 자식의 너비 할당은 부모에서 허용하는 full width를 기초로 하는 것을 필요로 한다.
   이 단계 후에, 레이아웃 요소의 Rect Transform이 그들의 새로운 너비를 가진다.
3. 최소, 선호되는 그리고 유연한 레이아웃 요소의 높이는 계산된다. ILayoutElement 컴포넌트에 CalculateLayoutInputVertical를 호출함으로써,
   이것은 bottom-up 정렬을 수행한다. 그리고 자식들은 그들의 부모 전에 계산된다. 그래서 부모들은 그들의 자식 정보에서 그들의 계산 정보를 가진다.
4. 레이아웃 요소의 유효 높이는 계산된다 그리고 ILayoutController 컴포넌트의 SetLayoutVertical을 호출함으로써 배치된다. 그것은 top-down 정렬로 수행된다. 그리고 자식들은 그들의 부모 후에 계산된다. 자식 높이의 할당은 부모의 이용가능한 최대 높이 기반을 갖는 것을 필요로 한다. 이 단계 후에 레이아웃 요소의 Rect Transform는 그들의 새로운 높이를 갖는다.

위에서 보여지는 것처럼, 자동 레이아웃 시스템은 첫번째로 너비를 평가한다. 그리고 후에 높이를 평가한다. 게다가 계산된 높이는 너비에 의존한다. 하지만 계산된 너비는 높이에 의존하지 않는다.

 

Triggering Layout Rebuild

더 이상 유효하지 않은 현재 레이아웃을 발생시킬 수 있는 컴포넌트의 프로퍼티 변화의 경우, 레이아웃 재계산이 필요된다. 이것은 발동될 수 있다. 다음과 같은 호출을 사용하여,

 

LayoutRebuilder.MarkLayoutForRebuild (transform as RectTransform);

 

이 리빌드는 즉시 일어나지 않는다. 하지만 렌더링이 일어나기 전에 현재 프레임의 끝에서, 그것이 즉시 일어나지 않는 이유는 그것이 레이아웃이 잠재적으로 같은 프레임동안 많이 리빌드 발생시킬 수 있어서이다. 그리고 그것은 성능에 악영향을 끼친다.

 

리빌드가 작동되야만 하는 때의 가이드 라인

• 레이아웃을 변경할 수 있는 프로퍼티의 setter에서
• 이 callback들에서
  - OnEnable
  - OnDisable
  - OnRectTransformDimensionsChange
  - OnValidate ( 오로지 에디터에서, 실행 중이 아닌 )
  - OnDidApplyAnimationProperties