RectTransform
- UI 한정에서 사용해서 컴포넌트
- Transform을 상속받음
- UI는 모두 Transform 대신 RectTransform임
RectTransform 속성
Rect transfrom 속성
- UI 좌표계는 스크린과 다르게 한가운데가 (0,0,0)으로 시작
- 이는 Anchors(앵커)의 디폴트 값이 (0,0,0)이기 때문 → 앵커 값을 변경하면 포지션 값이 달라진다.
- 포지션은 Pivot(피벗)과 Anchor(앵커)의 영향을 받는다.
피벗과 앵커 기준으로 좌표가 만들어짐
- Rotation, Scale - Transfrom과 같음. 단, Scale에 Z는 존재하지 않음
Pivot(피벗)
피벗 예시
- Rect Transform의 Position은 Anchor을 원점으로 잡고
가운데 Pivot까지의 거리를 측정하여 UI를 배치
Anchors(앵커)
앵커 예시
- 앵커를 옮기면 원점을 바꾸는 것과 같다.
- 앵커는 분리가 가능하다.
- 분리시 포지션으로 표현되던 것이 아래와 같이 표시됨
- 뭉쳐있을 땐 포지션으로 계산되지만 퍼져있으면 안 되기 때문
앵커 분리시 위와 같이 표시됨
- 해당 방향에서 얼마나 떨어져있는지에 대한 거리 표시
- Left/Top/Right/Bottom을 모두 0으로 처리 시
즉, 떨어진 거리가 0 일 때는 아래와 같이 나타남
떨어진 거리가 0일때
UI 자식 부모 자식 관계
- 어떤 UI를 다른 UI의 자식 오브젝트로 넣고 Anchor Presets에서
Anchor를 가운데 정렬한다고 가정
- 자식 UI의 중심 anchor는 부모 오브젝트의 중심으로 맞춰짐
- 자식 오브젝트를 해당 위치에 박아 두었다고 생각하면 편함
- 부모 UI의 크기를 늘려도 크기가 늘어나지 않고 앵커와 자식 오브젝트 피벗 간의 간격은 변하지 않음
피벗간의 간격은 변하지 않는다.
- 앵커를 왼쪽 아래 모서리로 박았을 경우
- 아래와 같이 Top과 Right에는 반응이 없고 Left/Bottom에만 반응
Left Top에만 반응하는 모습
부모 UI에 크기에 따라 반응하는 자식 UI
우측 하단
스트레치
- stretch를 이용하면 됨
- 앵커가 각각 부모의 상하좌우에 박힘
전체가 균등하게 늘어남
응용 - 화면 전체를 채우는 해상도 반응형 배경
- UI를 화면에 적절히 배치해도, 해상도(화면 크기) 세팅이 변함에 따라 밑에 그림처럼 꽉 채우기 못하거나,
잘리는 현상이 발생할 수 있음
- 이는 UI의 크기는 Anchor에 따라 박혀있어 고정되어 있기 때문
3:2 일때의 UI
3:4 일때의 UI는 달라짐
- 이러한 문제를 stretch로 설정해 주는 것으로 해결
- 원하는 하위 UI 요소를 Stretch로 설정
- 비율이 아무리 변해도 원 모양 그대로 UI가 커지는 것을 확인할 수 있음
5:4일때
16 : 9 일때
