iOS 오토레이아웃(Autolayout) 사용패턴8 – 화면가운데 하나의 이미지뷰를 표시하기

2016-05-12
28 Views

로고같은 이미지를 화면 너비의 몇%비율로 지정해서 표시하고 싶을 때 이용한다.

Align버튼을 사용하여 요소 중심위치를 수평가운데와 수직 가운데에 맞춘다. Pin버튼을 사용하여 가로세로 비율을 고정한다. 마지막으로 요소를 드래그하여 너비를 Superview(화면)의 40%로 설정한다. 너비 80%로 하는 것은 2번째로 지정한다. 우선 Equal Width to를 사용하여 요소 너비를 Superview와 같은 100%너비로 지정한다. 해당 크기 관리자를 사용하여 비율을 40%로 변경한다.

 

1) ImageView를 배치하고 선택한 다음, Align 이미지 보기를 클릭한다.

auto45

2) [Horizontal Center in Container]와 [Vertical Center in Container]를 체크하고 [Add 2 Constraints]을 클릭한다.

3) 다시 [Pin]버튼을 클릭하고 [Aspect Ratio]를 체크하고 [Add 2 Constraints]를 선택한다.

auto46

4) ImageView의 오른쪽 클릭한 상태로 드래그하여 배경 SuperView에 놓는다. 메뉴가 나오면 [Equal Widths]를 선택한다.

auto48

5) SuperView를 클릭하고 크기관리자에서 [Equal Width to:]를 더블클릭한다.

auto49

6) Second item이 Superview로 되어 있는지 확인한다. 만약 First Item이 SuperView로 되어 있는 경우 메뉴에서 [Reverse First And Second Item]을 선택하여 Second Item을 Superview로 처리한다.

auto50

7) Multiplier를 [80:100]으로 처리한다. 이는 First Item : Second Item비율을 지정하는 것으로 ImageView가 Superview의 40%가 설정이 완료된다.

auto51

Facebook Comments

You may be interested

모바일 앱 아키텍처
Swift
shares11 views
Swift
shares11 views

모바일 앱 아키텍처

MJ Kim - 4월 22, 2017

이 내용은 나름대로 개발해본 내용을 토대로 정리해본 모바일 앱 아키텍처에 대한 내용이다. 이를 정리한 이유는 오래된 아키텍처부터 최근 아키텍처까지 정리해보고…

시간차를 얻는 Date Extension
Swift 3.0
shares6 views
Swift 3.0
shares6 views

시간차를 얻는 Date Extension

MJ Kim - 4월 12, 2017

사용자가 남길 내용에 대한 시간표시를 할 때 일정한 시간차를 표현해주는 경우가 있어 이에 대한 Date Extention을 정리해 보았다. [crayon-58fba86ae8702035548844/]  

Swift 3.1에서 없어진 문법 정리
Swift 3.0
shares34 views
Swift 3.0
shares34 views

Swift 3.1에서 없어진 문법 정리

MJ Kim - 3월 31, 2017

Swift언어는 무엇인가 나올때마다 없어지는 것들이 있어, Swift 3.1에서 컴파일할 수 없게 된 문법내용을 정리했다. switch문을 사용하여 enum에서 protocol을 여러가지 패턴으로…