개발/정보

유니티 버튼/이미지/글자 정렬 1분만에 끝내기

해피류 2017. 10. 13. 15:03


유니티 UI 구성요소 정렬방법을 모른다묜?



유니티로 UI 컴포넌트를 화면에 정렬할려고 할때 이 방법을 모른다면 그야말로 삽질해야됩니다. 좌표를 일일이 지정해 줘야하고 이게 정렬이 잘되었나 아닌가 눈빠지게 찾아봐야되고요. 제가 그랬습니다. ㅠㅠ


올 초부터 유니티로 개발 시작하면서 차츰 차츰 배워가고 있는 중인데요, 유니티는 생각보다 개발자에게 편리한 요소를을 많이 개발해 놓었더라구요. 그래서 요즘은 일단 구현하기전에 먼저 그 기능이 있는지 없는지 찾아보고 개발에 들어간답니다. 오늘 포스팅할 내용은 화면상에서 UI 구성요소를 배치하는 방법입니다.



예제화면은 현재 개발중인게임입니다. ㅎㅎㅎ

화면의 좌층상단, 우측 중앙을 보시면 버튼과 Slider가 있는걸 확인할 수 있습니다. UI 정렬 방법을 모를때에는 저걸 일일이 화면상에서 움직여서 잘 맞나 안맞나 눈으로 확인하는 방법밖에 없었는데,


- Vertical Layout Group

- Horizontal Layout Group


위에 이 두 컴포넌트만 알고 있다면 UI 정렬 한방에 끝난답니다.

일단 정렬하는방법은 총 3단계인데 따라하는데 1분밖에 걸리지 않습니다.


Step.1 정렬할 UI 구성요소 생성


Canvas 아래에 GameObject를 하나 만듭니다. 저는 'QuickSlot'이라고 이름을 지정해 주었습니다. 그리고 그 아래에 화면상에 배치할 버튼을 3개(Slot1, Slot2, Slot3)를 만들어 주었습니다.




Step.2 Vertical Layout Group 생성


위에서 만든 QuickSlot을 선택한 다음 'Add Component'를 눌러서 'Vertical Layout Group'를 선택해줍니다.  그러면 아래 화면에 보는것 처럼 Vertical Layout Group 컴포넌트가 생성되었는데요, 이걸보면 아~ 이렇게 하면되겠구나? 감이 오시나요? 물론 다 아시겠지만, 약간의 설명을 붙이자면,


먼저 크기를 지정해 주어야하는데, 이 경우에는 세로정렬이므로, 가로는 버튼의 길이만큼하고 세로는 버튼의 길이 X 3에 여백의 크기만큼 더해준 값으로 설정해줍니다.


예제는 버튼의 크기가 가로 세로 122 이므로 저는 122 X 400 크기로 설정해 주었습니다.


Vertical Layout Group 의 속성값을 잠깐 살펴보면

  • Padding: 좌/우/상/하단의 여백을 조정해준다.

  • Spacing: 세로간격을 조정해준다.

  • Child Controls Size: 설정된 크기만큼 버튼의 크기를 맞춰준다.

  • Child Force Expand: 설정된 크기만큼 강제로 세로간격을 변환해준다.




Step.3 화면배치 끝!


QuickSlot를 잡고 원하는 위치로 움직여주면 끝! 1분도 채 안걸리죠?



요렇게 Vertical Layout Group 컴포넌트를 사용하면 컴포넌트 정렬은 한방에 해결됩니다. 물론 가로 정렬 할려면 Horizontal Layout Group를 사용하면 되겠지요?






아래는 이방법을 녹화한 동영상입니다. 이해가 잘 안되시는 분께서는 한번 참고해 보세요^^



저작자표시 비영리 변경금지