AutoLayout - 1

오토레이아웃 . 말그대로 자동으로 레이아웃을 계산한다.

오토레이아웃을 설정하기 위한 핵심 개념으로 두가지를 꼭 기억하자.

조건 1.해당 뷰의 x,y 위치

조건 2.해당 뷰의 가로, 세로 크기가 있다.

 

 

 

연습을 위해 컨트롤뷰에 UIView를 하나 만들어 구분하기 쉽게 오렌지배경으로 해놓았다.

그다음, 오토 레이아웃을 설정하기 위해 왼쪽으로부터 50의 constrain을 주었다.

그 결과 이렇게 빨간 줄이 생기게 되는데 이 뜻은 오토레이아웃이 자리를 잡지 못했다는 의미이다.

그 이유는 위치는 알지만 크기는 모르기 때문이다 앞서 말했던 조건의 1은 충족했지만 2는 충족하지 못한 것

따라서 조건 2를 충족시켜주기 위해 가로크기를 200으로 해보자.

대표사진 삭제

사진 설명을 입력하세요.

그랬더니 가로부분의 빨간줄이 파란색으로 변하였고 사각형 밑에 파란색 선이 추가됨을 확인할 수 있었다.

우리가 constrain을 통해 조건1의 x,y좌표중에 x위치를 주었고 조건2의 가로,세로 크기중 가로의 크기를 알려주었으므로 파란선이 나왔으며 이 것은 가로의 오토레이아웃이 성공적으로 설정이 되었다는 의미이다.

마찬가지로 top에 constrain을 걸어서 y축의 값을 구해본다.

대표사진 삭제

사진 설명을 입력하세요.

당연히 빨간불이 또 들어올것이고~

이번에는 세로의 크기를 알려주면!

 

이제 빨간줄은 모두 없어지고 파란줄만 남아있으며 성공적으로 오토레이아웃이 설정되었음을 확인.

 

 

하지만 이런식으로 오토레이아웃을 걸어두게 된다면.. 화면이 작은 디바이스에서는 우리가 설정한 뷰가

잘릴 수 있다.

이렇게 말이다.

 

그렇기 때문에 우리 이미지에대해 크기를 고정하지말고 constrain을 사방으로 걸어주게 되면.

 

 

이렇게 파란줄이 뜨면서 오토레이아웃이 성공적으로 됨과 동시에

작은 디바이스에서 실행을 해도 비율은 조금 다르지만 화면이 잘리지않고

일정 constrain을 유지하는 것을 볼 수 있다.

왜 이 경우에는 뷰의 크기를 알려주지 않아도 오토레이아웃이 설정이 될까??

그 이유는 Xcode는 스크린의 크기를 알고있고 constrain만 다 들어온다면 그 값에 맞추어서 자동으로 계산해서 크기를 만들기 때문이다.

따라서 조건2의 크기를 굳이 주지않게 되더라도 constrain을 통해서 위치를 받은 값을 토대로

알아서 크기를 설정하기 때문에 오토레이아웃이 설정이 되는 것이다.

 

constrain에 따라서 크기가 달라지는 것을 확인 할 수 있다.

 

 

그렇기 때문에 만약 4개의 constrain 중 하나만 없애도!

이렇게 빨간줄이 뜨는 것을 볼 수 있다(조건2 - 크기를 모르기 때문에)

 

 

 

응용!

Alignment Vertically 앵커(constrain)를 두었다.

-이는 중간을 기준으로 딱 반이 된다고 생각하면 편했다..

 

그리고 왼쪽에 constrain을 주고 가로세로 크기를 설정해주면 이와 같이 오토레이아웃을 볼 수 있다.

이 말인 즉슨 Alignment Vertically 앵커(constrain)는 조건 1의 y좌표와 같은 역할이다.

그렇다면 만약 여기에서 세로크기의 설정을 없애고 밑에다가 constrain을 주면 어떻게 될까?

 

오토레이아웃이 잘 작동 되는 것을 볼 수 있는데 그 이유는 밑에 걸어둔 이 constrain이

Xcode로 하여금 뷰의 세로크기를 계산하여 설정할 수 있게 하기 때문이다.

왜그럴까? 더 자세히 알아보자.

아까 예시에서는 4면에 constrain을 주어야 constrain을 통해 뷰의 크기를 계산하여 오토레이아웃을 설정 했지만 이번에 우리는 Alignment Vertically 앵커(constrain)를 걸고 왼쪽과 밑에만 걸고

가로 세로중 가로의 크기만 설정했다.

그런데 왜 정상적으로 오토레이아웃이 되었을까??

하나하나씩 생각해 보자.. 오토레이아웃의 핵심은 x,y좌표(조건1)과 가로 세로 크기(조건2)였다.

그렇지 않다면 4면에다가 constrain을 걸어서 오토레이아웃을 설정하여 가로 세로 크기를 Xcode로 하여금

계산하게 해서 뷰의 크기를 조절했다.

하지만 우리가 이번에 설정한 것은 Alignment Vertically constrain,왼쪽 constrain,아래쪽 constrain

그리고 가로의 크기이다.

나도 이해가 잘 가지 않아서 어떤 제약이 어떤 역할을 하는지 하나하나 대비해 보았다.

x좌표는 왼쪽에 건 constrain으로 y좌표는 Alignment Vertically constrain이 맡았다.

가로의 크기는 우리가 설정을 해놨고 그렇다면 부족한것은 세로의 크기이고 이 부족함을 우리가 설정한

아래에 준 constrain이 해결한다는 것을 알 수 있다.

나는 이 Alignment Vertically constrain이 위쪽과 아래쪽의 뷰의 비율이 같기 때문이라고 생각했다.

종이를 가로로 접는 것 처럼 가로 선을 기준으로 딱 반이 된다는 말이다!

 

 

따라서 Xcode는 스크린의 사이즈를 알고 우리가 아래쪽 constrain을 통해 스크린에서 얼마나 떨어져야하는지 설정 해줬기 때문에 우리의 뷰의 높이가 그에 맞춰서 알아서 설정이 되는 것이다.

 

그래서 이와 같이 밑에만 constrain을 줘도 중간선을 기준으로 딱 반이 됨을 알 수 있다.

 

iOS공부를 할때마다 오토레이아웃에 대한 전반적인 기본이 너무 안되있어서 시간을 너무 잡아먹는것을 발견했다..

따라서 유튜버 '개발하는 정대리'님의 오토레이아웃 강좌를 보고 직접 실행을 연습을 해보았다.

https://www.youtube.com/watch?v=1McZ6ukrmFo&list=PLgOlaPUIbynpvYsyKTrH2bpVlOCHkz6OY