Autolayout의 Aspect Ratio 고정 크기 UIView의 하위 View를 비례 크기로 조정

3875 단어 Xcode
스토리보드를 사용해 비율을 유지하면서 subview를 조정하는 것도 힘들어서 정리해봤어요.

필요조건


4인치 화면에 표시된 UIView는 3.5인치 터미널을 시작할 때 가로 세로 비율을 유지하면서 여백을 가로로 켭니다.
하위 뷰는 부모 뷰의 축소율에 따라 크기와 위치를 조정하고자 합니다.

부모 View가 3.5인치로 종횡으로 감지


먼저 스토리보드에는 UIView Controller에 부모 뷰인 UIView(연두색), 아이 뷰가 된 UIlabel(황록색)을 100x100 사이즈로 실었다.
일반적으로 3.5인치 터미널로 작동하면 아래쪽이 끊어진다.

여백을 좌우로 열기 위해 고정된 상태에서 종횡 비율(320x568)을 줄이고, 오토레이아웃의 핀으로 위아래를 한쪽으로 고정하고 체크Aspect RatioAdd 3 Constraints를 한다.

이렇게 하면 왼쪽 위 모서리가 중심이 되므로 Autolayout의 Align으로 중심을 지정합니다.Horizontal Center in Container 중 선택Add 1 Constraint.

이 상태에서 시작하면 원하는 크기로 3.5인치 화면 내에서 모판 View(연한 파란색)가 배율을 유지합니다.

서브뷰에 대한 Autolayout 지정


자 뷰(황록)는 왼쪽 상단의 좌표를 유지하므로 오프셋됩니다.이것은 직접 뷰의 축소 비율을 유지하여 감지합니다.
먼저 Autolayout의 Pin을 사용하여 부모 View에 상하좌우로 고정합니다.

이 상태에서 작동하면 부모뷰 네 변에서 절대치로 지정되기 때문에 부모뷰가 작아지고 아이뷰도 작아지고...

이거 조정할게요.

위쪽


먼저 위의 Constraint 선을 선택하고 Attributes Inspector에서 시작합니다.
모 뷰의 Bottom(=Height)과 Top 위치를 지정하는 비율은 110:568(4인치 디스플레이와 동일)입니다.
Before:

After:

같은 요령에 따라 좌우와 아래 모두 보텀(=Height)과 트레이링(=Width)을 고려해 부모 뷰의 높이와 너비 x4인치 표시 위치의 비율에 따라 Constraint를 설정한다.

아래


Before:

비결은 Reverse First and Second Item 아이뷰를 기준으로 한다.

After:

좌우


같은 요령이라 애프터밖에 없어요.
왼쪽:

오른쪽:

결실


하위 뷰는 배율을 유지하면서 매우 작게 나타납니다!
4인치 시뮬레이터 같아.
(글꼴 크기는 별도로 조정해 주세요.)

좋은 웹페이지 즐겨찾기