개인적으로 유니티 UI로 작업하면서, UI내부의 사이즈 자동조절에는 한계가 있다.
다음과 같은 예를 보자.
- 위에 이미지, 아래 글 두개가 들어가는 버튼이 있다.
- 위의 이미지는 버튼의 반절정도의 크기를 차지한다.
- 아래 글 은 이미지와 곂치지 않도록 설정 해 주어야 한다.
단, 버튼을 여러가지 크기로 만들어야 한다.
이 경우 RectTransform에 프리셋을 사용하면 무슨 일이 일어나는지 보자.
-
빨간색 선들을 사용할 경우, 버튼의 크기가 커지면, 이미지가 가운데에 작게 들어올 것이다.
-
파란색 확장을 사용할 경우, 오프셋을 준다. 그러면 이미지가 겹치는 경우가 생길것이다.
자...이 문제를 해결하려면 어떻게 해야 할까? 우리는 위도 싫고, 아래도 싫다. 즉 우리는 프리셋으로 작업을 해도 원하는 결과가 나오지 않을 것이다.
Anchors
RectTransform에 있는 Anchors를 보자. 이 내용이 우리의 핵심 해결 방안이다.
우리가 파란선으로 설정하면 min max가 0,1 이 되고, 빨간선으로 설정하면 min max 가 0.5,0.5 이다.
잘 보면 RectTrasnform 겉면에 삼각형들이 있을것이다. 이것이 Anchors이다. 이 값들을 수정 해 준다면, 해당 값을 바꿀 수 있다.
Anchor을 설정 하여, 해당 구역을 조정 할 수 있다.
- y축 기준으로 Min과 Max가 같다면, 해당은 Top Bottom대신 Height라는 것이 뜰거다. 즉 우리의 범위가 0.5에 피봇을 두었고, 그 위치에서 얼마큼의 고정된 높이를 가질까 를 정해준다.
- 반면 Min과 Max가 다르다면, 윗선과 아랫선이 사각형을 이룰것이다. 우리는 이제 이 위치에서 Top과 Bottom이 얼마나 떨어지는가 를 정해준다.
즉 우리의 캔버스 내부에 특정한 범위내에서 유동적으로 크기 조절을 하기 위해서는, Anchors값을 같지않게 조정해주고, 이에 대해 Top과 Bottom으로 부터 얼마나 떨어질지 offset을 정해주면 된다.
RectTransform을 조절 하기 힘들었는데, 이걸 직접 알아내면서 RectTransform에 더욱 친화적으로 된거 같고, 앞으로 활용도 잘 할수 있을 것 같다.
