Unity Chapter 10-4. UGUI : 레이아웃 컴포넌트

인프런에 있는 이제민님의 레트로의 유니티 C# 게임 프로그래밍 에센스 강의를 듣고 정리한 필기입니다. 😀
🌜 [레트로의 유니티 C# 게임 프로그래밍 에센스] 강의 들으러 가기!

Chapter 10. UGUI

🔔 UI 레이아웃 컴포넌트

수직 정렬

Vertical Layout Group 컴포넌트.

• 정렬하고자 하는 UI들을 부모 오브젝트에 넣어 한 곳으로 묶은 후
• 그 부모 오브젝트에 Vertical Layout Group 컴포넌트를 붙인다.
• 필드
  • Child Force Expand
    • : 자식 UI들을 부모 오브젝트의 모든 영역을 꽉꽉 다 채워서 정렬시킨다. 여백을 최대한 활용.
    • : 자식 UI들을 그냥 딱딱 붙여 차곡 차곡 쌓아 정렬시킨다.
  • Child Control Size
    • width : 가로 방향으로 자식 UI 하나 하나를 늘려 부모 오브젝트를 꽉채운다.
    • height : 세로 방향으로 자식 UI 하나 하나를 늘려 부모 오브젝트를 꽉채운다.
  • spacing : 간격
  • padding : 패딩
  • Child Alignment : 정렬

수평 정렬

Horizontal Layout Group 컴포넌트

• 정렬하고자 하는 UI들을 부모 오브젝트에 넣어 한 곳으로 묶은 후
• 그 부모 오브젝트에 Horizontal Layout Group 컴포넌트를 붙인다.
• 사용 법은 Vertical Layout Group와 똑같

그리드 정렬

Grid Layout Group 컴포넌트

• 정렬하고자 하는 UI들을 부모 오브젝트에 넣어 한 곳으로 묶은 후
• 그 부모 오브젝트에 Grid Layout Group컴포넌트를 붙인다.
• 자식 UI들을 바둑판처럼 배열한다.
  • 인벤토리 같은거 구현시 유용!
• 자식 UI 하나 하나가 Cell이 됨.
• start corner : 시작 하는 지점
• start axis : 탐색 방향
• constraint : 행과 열이 자동으로 설정되게끔 할 수도 있고 행과 열을 고정으로 지정할 수도 있다.

레이아웃 엘리먼트

Layout Element 컴포넌트

• Vertical Layout Group, Horizontal Layout Group, Grid Layout Group 은 모든 자식 UI의 크기를 일괄적으로 통일하여 정렬했었다.
• 이와 달리 몇몇 자식 UI는 크기가 달라야 할때, 정렬이 달라야 할때 적용할 수 있음.
• 정렬을 해주면서도 우선적으로 적용되야 할 사항들을 명시한다.
• 필드
  • Min width,height
    • 자식 UI가 최소 이 가로 길이, 이 세로 길이 이상을 지켜주면서 정렬되게끔 한다.
    • Layout Element 컴포넌트에서 가장 첫번째로 실행된다.
  • Preferred width, height
    • 자식 UI가 이 가로 길이, 이 세로 길이를 선호하면서 정렬되게 한다는거지 꼭 이 길이로 설정된다는 것은 아님.
      • Min을 우선적으로 하면서 될 수 있으면 Preferred길이에 최대한 가깝게 되게끔 한다.
  • Flexible width, height
    • 자식 UI를 최대 얼만큼까지 늘릴 수 있는지.
    • 자식 UI가 부모 UI의 여백을 얼만큼 차지할 수 있는지.
    • Layout Element 컴포넌트에서 가장 마지막으로 실행된다. 남은 여백을 채울 수 있도록!
    • 단, Flexible의 수치는 절대적인 수치가 아닌 상대적인 수치다.
      • 자식 UI들이 부모 오브젝트의 남은 여백을 상대적으로 얼마나 나눠먹을까의 얘기라서.
        • 만약 남은 여백이 600이라면
        • A 의 Flexible 값이 2 라면 400 가져가고 (2/3)
        • B 의 Flexible 값이 1 이라면 200 가져간다. (1/3)
    • 여백이 없으면 효과는 없다.
  • Layout Priority
    • Preferred 수치를 가장 가깝게 가져가게끔 자식 UI들의 우선순위 지정.
  • Ignore Layout
    • 레이아웃을 무시하고 개발자가 직접 자식들의 수치 지정.

---

🌜 개인 공부 기록용 블로그입니다. 오류나 틀린 부분이 있을 경우 
언제든지 댓글 혹은 메일로 지적해주시면 감사하겠습니다! 😄

맨 위로 이동하기