UGUI로 Max Height 같은 레이아웃을 실현하고 싶습니다 (아이폰X 지원)

2780 단어 uGUIiPhoneXUnity

이런 느낌으로 화면의 종횡에 따라 각 GUI 요소보다 좋아진 느낌의 레이아웃을 만드는 방법.
Header/Footer는 화면 위 아래에 고정되고 Content 는 확장됩니다.지정된 MaxHeight를 초과하면 Content의 신축이 멈추고 위아래 공백용 요소가 나타납니다.

배경.


아이폰X, 갤럭시S8 등 초종장 단말기에 대응하기 위한 대책이었다.9:16의 게임 UI를 가정해도 어느 정도 종횡비의 변화는 허용되지만, 1:2의 긴 길이를 넘으면 어떻게든 예상한 디자인과 조작성이 다르기 때문에 신축된 경계점을 지정하면서 미관을 유지하기 위해 공백용 디자인을 준비했다.또 경계점을 잘 조절할 수 있다면 아이폰X 화면 윗부분에 해당하는 컷을 디자인할 수 있다.이상적으로 터미널을 판단하고 개별적으로 레이아웃을 조정하는 것이 가장 좋으나 유니티가 iOS/Android를 동시에 개발하면 장점이 떨어지기 때문에 개별적으로 대응하고 싶지 않다.그러나 최근 AQUOS R compact 등 화면이 길지 않아도 흠집이 나는 터미널이 등장하면서 이 전략은 단명으로 끝났다.(각 어플리케이션은 터미널 쪽에서 전체 화면에 지원되는 기능을 준비하므로 의존해야 할 부분이 있음)

프로비저닝



Canvas의 어셈블리


Canvas Sccaller를 사용하여 배율을 조정하므로 가로 폭은 변경되지 않습니다.Vertical Layout Group의 간 설정.(Layout Group 기능을 사용할 수만 있다면)

Background(배경)


화면 크기와 상관없이 전체 화면 표시를 위한 설정ignore layout.


Content Area


설정Preferred Height하면 이보다 크지 않습니다.설정한 값보다 작을 때 부모Layout Group의 기능을 통해 높이를 조절할 수 있다.

레이아웃 샘플


참고 자료


아이폰X 지원 추가 방법
https://qiita.com/tkyaji/items/8cdc0a4324d4e89633e8
크기
https://qiita.com/usagimaru/items/761e9a5f3d78b1939df8
지도 방침
https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

좋은 웹페이지 즐겨찾기