본문 바로가기
아이폰 개발/ios 디자인

autolayout - priority 정리

by 인생여희 2020. 12. 19.

autolayout - priority 정리

 

priority를 번역하면 우선순위라는 뜻이다. priority는 오브젝트가 하나일때는 별로 중요하지 않다. 오브젝트가 두개이거나 하나 이상일때 priority 기능이 사용이 된다. 오브젝트가 두개일때 priority의 우선순위가 높은 오브젝트는 자신의 크기를 먼저 갖고, 고정이 된다. 반대로 priority가 상대 오브젝트 보다 낮은 오브젝트는 크기가 밀리거나, 유동적으로 변할 수 있다.

 

 

1.문제상황

라벨 두개를 만들었다. 첫번째 라벨의 제약조건을 위, 좌, 우, 20씩 주었다. 우측 라벨의 제약조건을 우 20으로 주었다. 참고로 라벨은 크기를 지정하지 않아도 오류가 안난다. 텍스트의 크기가 곧 라벨의 크기이기 때문이다. 크기를 확인 할 수 있는 컨텐츠를 갖고 있으면 오류가 안난다. 아래 그림에서 두 라벨의 제약조건을 지정해 줬는데, 오류가 발생했다. 이유는 xcode가 두 라벨의 크기가 얼마나 될지알지 못하기 때문이다. 두 라벨 모두 길이가 어떻게 되든 상관은 없다. 하지만 xcode는 둘중 하나의 크기가 어떻게든 지정이 되어 있어야지 상대방 오브젝트를 유동적으로 표시하던지 할 수 있다. 그래서 이때, xcode에게 크기 우선순위를 알려 주기 위해서 priority가 필요하다.

 

 

 

2.priority

priority는 1부터 1000까지 지정을 할 수가 있다. 위 상황에서 좌측 라벨의 priority를 1000, 우측 라벨의 priority를 500으로 설정하면 좌측의 라벨 크기는 고정이되고,우측 라벨의 크기는 동적으로 늘어난다. priority가 낮아서 크기를 유지하지 못하고, 상대오브젝트 보다 커져버린다.

 

 

 

3.오브젝트가 겹치거나, 뷰 밖으로 나가버리는 문제

만약 위의 상황에서 첫번째 라벨의 내용이길어지거나, 두번째 라벨의 내용이 길어지면 두 라벨이 겹치거나, 한쪽 라벨이 밖으로 나가버리는 현상이 발생한다. 이때는 우선순위를 설정했음에도 내용이 길어져서 오브젝트가 서로 겹치거나 밀려나가는 상황이 생길 수 있다.

 

 

 

4.content compression resistance priority

위 상황의 문제는 content compression resistance priority 를 설정해서 해결할 수 있다. content compression resistance priority는 찌그러지는, 압축되는 문제를 해결하는 우선순위다. 라벨 두개가 겹쳐진 상황에서 좌측 aaa...라벨의 content compression resistance priority를 751로변경하면 좌측 aaa라벨은 찌그러진 상태(겹침)에서 자신의 가로 크기를 회복하고 왼쪽 라벨을 크기 만큼 밀어버린다. 

 

반대로 우측 라벨의 content compression resistance priority 값을 1 높이면 컨텐츠가 서로 겹쳤을 때 우측의 내용 먼저 유지하고, 압축되게 하지 않고, 좌측을 밀어버린다. 쉽게말해 오브젝트가 겹칠 수 있는 상황에서 크기가 우선순위로 고정되어야 할 오브젝트의 content compression resistance priority를 늘려주면된다.

 

 

 

5.참고 rotation 

아이폰 디자인작업을 할때, 세로화면에서 레이아웃 따로, 가로화면에서 레이아웃 따로 작업을 해주고 싶으면, storyboard아래 vary for traits을 눌러서 적용되는 아이폰 기종을 확인하고, 세로 상태에서 작업을 하고 done 눌러주고, 가로상태에서 레이아웃 작업하고 done을 눌러주면 된다. 

 

 

 

ios autolayout 예제

autolayout - constraints 정리 (1)

autolayout - constraints 정리 (2)

autolayout - align 정리

autolayout - multiplier 정리

 

 

 

 

'아이폰 개발 > ios 디자인' 카테고리의 다른 글

autolayout - ScrollView 정리  (0) 2020.12.19
autolayout - multiplier 정리  (0) 2020.12.19
autolayout - align 정리  (0) 2020.12.18
autolayout - constraints 정리 (2)  (0) 2020.12.18
autolayout - constraints 정리 (1)  (0) 2020.12.18