[UIKit] - AutoLayout

 

이제 UIkit도 본격적으로 시작했겠다. 오토레이아웃에 대해서 설명해보겠다.

 

AutoLayOut

 

조건에 따라 뷰의 크기와 위치를 동적으로 지정하는 것

만약에 ViewController에 해당 View Component를 추가했다고 하자. 현재 이 디바이스는 아이폰 SE인데 이렇게 원하는 위치에 컴포넌트를 추가했다고 해도, 다른 디바이스에서 이 ViewController를 호출할 경우

이렇게 아이폰 SE버전의 크기만큼만 뷰가 할당된것을 확인 할수 있다.(이렇게 차이가 났었나..)

 

뷰를 임의로 구성한다고 해도 디바이스별로 크기가 천차만별이기 때문에 각 디바이스 크기에 맞게 뷰의 크기를 동적으로 할당할 수 있도록 설정해줘야하는 것이 바로 오토 레이아웃이다.

 

 

여기서 기본적으로 필요한 것은 다음과 같다.

• 뷰의 x/y축 위치
• 뷰의 x/y축 크기

첫번째로 뷰의 크기를 동적으로 할당해야할때다 위와 같은 상황이 벌어지게 하지 않기 위해 사용된다.

뷰를 선택하고 top,bottom,leading,trailing의 Anchor를 맞춰주고 spacing을 0으로 해준다.

 

그러면 디바이스 크기에 따라 색깔 뷰의 크기가 동적으로 할당된다.

 

참고로 나는 bottom contraints를 Safe Area가 아니라 superView로 설정했다. 뷰의 빈공간 없이 모두 채우기 위해서다.

 

두번째로 방금과 같이 상하좌우를 설정하는 방식도 있지만 특정 시작점의 좌표와 뷰의 크기를 정적으로 할당하는 방법도 있다.

 

위와 같이 Anchor를 top과 trailing만 주고

witdh,height를 고정으로 할당해주면 디바이스 크기에 상관없이 해당 뷰는 무조건적으로 디바이스 화면의 상,우측으로 맞춰지고 크기가 고정된다. 만약 이 작업없이 배치 시키고 디바이스의 위치를 확인해보면

 

이렇게 다른 위치로 출력된다.

 

마지막으로 상위컨테이터가 하위 컴포넌트 크기대로 오토레이아웃을 설정하는 방법이다.

먼저 top,leading,trailing anchor를 50으로 고정해준다. 이렇게 되면 경고 메세지가 뜰것이다. 왜? bottom값에 대한 설정을 하지 않았기 때문에 뷰의 height 설정이 되지 않기 때문이다. 일부러 이렇게 한것이다.

 

다음 Label을 UIView안에 추가해주는데 여기서 상하의 Anchor값을 모두 고정해준다. 그러면 무슨 일이 일어나냐면,

 

상위 UIView의 Height의 크기가 Label 크기에 맞춰서 조절된다. Label은 안의 문자 폰트에 따라 프레임이 설정 되기 때문에 Label의 bottom Anchor를 10으로 고정하여 항상 Label보다 아랫쪽이 10떨어져 있게 되는 것이다. 

 

하지만 아직 끝나지 않았다.

 

Label의 문자는 지금 y축에 한에서만 오토레이아웃이 설정 된것이고, x축도 설정해줘야한다. 위의 사진처럼 UIView의 좌측에 Label을 배치하고 싶다면,

이렇게 되면 라벨의 프레임이 좌,우측의 10의 spacing이 생긴채로 맞춰진다. 이렇게 하면 글자 수가 많을 경우

이렇게 ...으로 잘릴텐데 그건 Lebel Lines수의 제한을 풀면 된다. 0으로 설정하고 확인해보자



 

올ㅋ