STEP 01 . 기본 레이아웃의 이해
- AutoLayout이란 기존의 Frame-Based Layout 또는 Coordinate-Based Layout 과 다르게 View간의 관계를 이용하여 해당되는 View의 위치와 크기를 자동으로 결정하는 Layout System 입니다. 관계는 Constraint로 설정이 가능합니다. 또한 하나의 사이즈였던 옛날의 아이폰 기종이 다양해지면서 다양한 사이즈와 화면 비율로 출시 되면서 화면의 사이즈에 구애받지 않고 시각적으로 동일한 화면을 구현하는데 이를 가장 편리하고 권장되는 방법이다.
STEP 02 . 기존 레이아웃의 단점.
- 옛 방식인 좌표 기반 레이아웃 시스템의 문제점은 UI 요소 View들을 원점과 크기로 정하지만 좌표를 기반으로 레이아웃을 잡기때문에 문제가 생긴다.
슈퍼뷰의 크기 변화에 대응이 어렵다.
- 예를들어 Portrait화면 일때 y축으로 500 좌표만큼 떨어진곳에 버튼을 하나 놓았을때는 잘보이지만 Landscape로 바꾸면 y축으로 부터
500만큼 떨어진곳을 볼수 없기때문에 버튼이 보이지 않는다.
기기별 화면 크기 변화에 대응이 어렵다.
- 아이폰6 Plus( 375 x 667 )을 기준으로 x : 110 , y : 600 에 버튼을 하나 놓았는데 당연히 아이폰 6 Plus에는 정상적으로 잘보인다.
하지만 아이폰6 ( 320 x 568 )을 실행 시켜서 본다면 y축이 568이 max인데 y:600에 좌표가 잡힌 버튼이 놓여져 있어 아이폰6 사용자들에게는 보이지 않는다.
언어별 문자열 크기 변화에 대응이 어렵다
- 구매라는 버튼이 하나가 있다고 가정하겠습니다 . 영어로 Puchase로 봤을때 x : 50일떄가 중앙이라고 한다면 한글로 구매라고 바꿨을때는 Puchase보다
구매라는 한글이 더 짧기 때문에 중앙이아닌 좌측에 치우친것처럼 보이게 된다.
STEP 03 . 오토 레이아웃의 장점 및 필요한 이유.
- 필요한 이유는 인터페이스의 절대적인 좌표가 아닌 동적으로 상대적인 좌표가 필요한 경우에 유용하다.
- 장점은 필요한 이유의 반대라고 보시면 됩니다. 기기별 이미지를 가져와보겠습니다.
좌측부터 iPadPro 12.9 , iPadPro 10.5 , iPadPro 9.7 , iPhone 8 Plus , iPhone 8 , iPhone SE , iPhone X입니다.
위에 보이는 이미지들은 모두 같고 View - ImageView가 있는 레이아웃입니다. 4개의 View 및 ImageView는 같은 Constraint와 Equals Width , Equals Height를 주어 맞춘 결과입니다.
이렇게 기기별 해상도에 구애받지 않고 각각 다른 해상도에대해 대응이 쉽다. ( 캡처를 하다보니 다 비슷해보이지만 해상도가 다 다른 기기입니다. ^^ )
위에 나오는 레이아웃은 실습으로 다같이 직접 해보도록 할거니 사용법에대해 정확하게 알고 이해한다음 같이 실습해보도록 하겠습니다 .
STEP 04 . 레이아웃을 잡아보자.
기본적인 공식은 FirstItem.Attribute = Multiplier * SecondItem.Attribute + Constant 입니다.
지금부터는 Xcode를 키고 레이아웃을 잡아보겠습니다.
Xcode 를 실행시키고 SafeArea와 같은 Level의 View를 하나 만들어주시면 됩니다. ( 기본 View에는 Background 색상이 없기때문에 Attribute Inspector에가셔서 색상을 지정해줍니다. )
그 후 View에 대해 각각 30씩 Top , Bottom , Leading , Trailing 을 줍니다 .
Constant = 30 이 되있는 상단 선을 클릭해보면 우측사진처럼 설정이 나옵니다.
일단 위의 공식에서 살펴보았던 FirstItem , SecondItem , Constant , Priority , Multiplier이 다들어있습니다. 하나하나 알아보겠습니다.
FirstItem - 현재 개발자가 확인하고 있는 View라고 생각하면됩니다.
SecondItem - 같은 공간에 SafaView or 자신의 부모View를 나타낸다고 생각하시면됩니다 .
Constant - 고정된 Margin이라고 생각하면됩니다.
Priority - 우선순위입니다 .
Multiplier - 승수라고 보면될거같은데 직접 봐야 더 알기 쉽습니다.
각각 어떻게 계산되는지 View를 보고 알아보겠습니다 .
설정들의 좌측에 보이는이미지로 어디에 해당되는 Constraints인지 알수 있고 현재 뷰 계층도도 볼수있습니다..
View는 그렇다쳐도 Safe Area는 무엇일까요
Safa Area
- 한글말로 하면 안전 영역입니다. 이 안전 영역(Safe Area)는 콘텐츠가 상태바 , 내비게이션바 , 툴바 , 탭바를 가리는 것을 방지하는 영역이다. 표준 시스템이 제공하는
뷰들은 자동으로 안전 영역 (Safe Area) 레이아웃 가이드를 준수하게 되어있습니다.
- 기존의 상/하단 레이아웃 가이드(Top/Bottom Layout Guide) 를 대체하며 , 하위 버전에도 호환하여 작동합니다.
- 안전 영역 (Safe Area)는 iOS 11 부터 사용 가능하다.
- iOS 11 미만의 버전에서는 상/하단 레이아웃 가이드를 사용한다.
- Safe Area 레이아웃 가이드는 UIView클래스의 var safeAreaLayoutGuide:UILayoutGuide로 접근할 수 있다.
( 참고 edwith ios )
Constraints는 목록의 좌측 이미지대로 Bottom , trailing , leading , Top순입니다
FirstItem.Attribute = Multiplier * SecondItem.Attribute + Constant
공식을 보면서 생각해보겠습니다 . 그런데 뭔가 이상한것같습니다.
first.top = SafeArea.top + 30
first.leading = SafeArea.leading + 30
SafeArea.bottom = first.bottom + 30
SafeArea.trailing = first.trailing + 30
Top과 Left는 first(View에 Label을 주어서 first입니다.)를 기준으로 계산을하는데 Bottom과 Right는 왜 SafeArea를 기준으로 만드는것일까요
SafeArea의 좌측상단을 기준으로 잡고 생각하시면 편합니다.
공식대로 하나하나 풀어서 한글로 설명해보겠습니다.
Label이 first인 View의 top위치는 SafeArea.top으로부터 + 30인 곳에 위치한다.
Label이 first인 View의 leading(Left)의 위치는 SafeArea.leading(Left)로부터 +30인 곳에 위치한다.
여기까지는 이해하기 쉽습니다. 그럼이제 bottom과 trailing를 보겠습니다.
SafeArea.bottom은 first.bottom + 30자리에 위치한다 맞는말이긴한데 SafeArea를 기준으로 설명하기 떄문에 헷갈릴수도있다.
간단하게 수학시간에 배운대로 +30을 좌변으로 넘겨주고 다시 한글로 풀어보겠습니다.
SafeArea.bottom = first.bottom + 30에서 +30을 좌변으로 넘기면
first.bottom = SafeArea.bottom - 30 이 됩니다. 이말을 다시 한글로 번역하면
Label이 first인 View의 bottom위치는 SafeArea.bottom - 30 인곳에 위치한다가 됩니다 . 이렇게하니 이해하기 더 쉬울거라 생각하겠습니다 .. ^^
SafeArea.trailing또한 좌변으로 넘겨서 계산하면 이해하기 편합니다.
저처럼 계산하기 싫어하시는 분들도 계실수 있기때문에 방법을 찾아봤더니 Reverse First And Second Item이 있습니다.
눌러보니 좌변으로 넘겨서 first (View)를 기준으로 볼수있도록 식을 바꿔줍니다 .
지금까지 Constrains에대해 알아보았고 다음으로 Priority와 Multiplier에대해 알아보겠습니다.
Priority 는 우선순위입니다.
실습을 위해 first.top에 Constant가 100인 Constraints를 하나 추가하겠습니다.
추가를 하면 Error가 발생할것입니다. 바로 제약조건 충돌입니다 ( Conflicting Constraints )
딱봐도 제약조건이 한개만 걸려야하는데 2개가 걸려있어서 뭘써야할지 모르겠다는 의미같습니다.
2가지의 제약조건이 먹었을때와 각각 Constraint의 설정입니다. 중앙부분에 Priority부분이 우선순위입니다.
Priority가 높을수록 우선순위가 높은것이기 때문에 우선순위가 높은 제약조건이 성립하게 되고 낮은 우선순위의 조건은 묻히게 됩니다.
원하시는 Top 제약조건의 우선순위를 더 높게놔두고 적용하기 싫은 Top 제약조건의 우선순위를 낮게 하시면 됩니다.
기본적으로 필수(1000) , 높음(750) , 중간(500) , 낮음(250)을 사용하기를 권장합니다.
다만 꼭 이렇게쓰지않고 4 , 3 , 2 , 1 이런식으로 낮은숫자를 써도 되긴합니다 .
Multiplier은 가운데 등호를 기준으로 한 양쪽 항의값이 커진다고 보면 됩니다 .
그냥 비율이라고 생각하시면 편할것같습니다. 실습으로 진행하겠습니다 .
이미지 or 내용은
http://zeddios.tistory.com/380
https://medium.com/@lingostar/%EC%98%A4%ED%86%A0-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83%EC%9D%B4%EB%9E%80-4fdfbd9397d9
분들의 내용을보고 이해하고 제가 이해한대로 테스트해본대로 입력했습니다 .
공부하게 도와주신 링고스타님과 zeddios님에게 감사드립니다.
댓글