[iOS / Storyboard] Auto Layout 여러 View에 적용하기(2)

이번에는 여러 view에 대한 Auto Layout을 적용해보겠습니다.

 

 

 

[Step 1] view 3개 생성하기

 

먼저 green View에 제약조건을 모두 설정해보겠습니다.

 

아직 빨간 부분이 존재합니다. 이번에는 pupple View의 제약조건을 모두 설정해보겠습니다.

 

green View의 제약조건은 모두 만족하는 것을 확인할 수 있습니다.

 

[Step 2] pupple의 왼쪽 가장자리 제약조건을 선택하고 green의 왼쪽 가장자리에 맞추기

 

pupple의 왼쪽 가장자리가 green의 왼쪽 가장자리에 맞춰진 것을 확인할 수 있습니다.

 

여기서 왼쪽 Constant를 30으로 조정해보겠습니다.

 

왼쪽을 30으로 줄인 만큼 pupple의 크기가 줄어든 것을 확인할 수 있습니다.

왜 위치가 변하지 않고 크기가 줄어들었을까요?

그 이유는 pupple View의 오른쪽 가장자리가 이미 설정되어 있기 때문입니다.

제약조건 우선순위가 가장자리(Leading, Trailing, Top, Bottom) > 크기(Width, height) 이기 때문입니다.

 

(pupple의 오른쪽 가장자리도 마찬가지로 green의 오른쪽에 맞춥니다.)

 

 

 

이번에는 ctrl키를 이용해서 제약조건을 설정해보겠습니다.

 orange View의 제약조건을 위, 아래, 너비, 높이만 설정하겠습니다.

 

 

[Step 3] orange을 클릭하고 Ctrl + 드래그해서 pupple을 클릭하기

왼쪽 가장자리 제약조건을 설정하기 위해서 Leading 클릭

 

orange View의 왼쪽 가장자리가 pupple의 왼쪽 가장자리에 맞춰지는 것을 볼 수 있습니다.

 

 

완전히 맞추지 않고 현재 위치를 유지하려면 Ctrl + 드래그 후, Option 키를 클릭하고 Leading을 클릭하면 됩니다.

 

 

 

 

※ 참고 출처

개발하는 정대리