iOS/Swift실전

[iOS] Swift 오토레이아웃 auto layout 실전편! 2

Sweetft 2022. 1. 12. 23:17

 

캔버스 메뉴 소개

 

캔버스 메뉴

 

Update Frames

제약이 지정되어 있는 상황에서 오브젝트 위치를 옮기면 노란색 경고선이 표시된다.

이는 지정된 제약과 오브젝트의 위치가 맞지 않아서 생기는 문제인데 이 업데이트 프레임을 해주면

지정된 제약에 맞춰 오브젝트의 위치가 다시 맞춰진다.

(밑에 예시를 첨부해둠!)

 

 

Align

뷰의 가운데 수직, 수평선에 맞추는 제약 지정 가능

 

Add New Constraints

말 그대로 새로운 제약 지정이 가능하다. top, trailing, bottom, leading, 그리고 너비와 높이 제약 지정!

 

Resolve Auto Layout Issues

오토레이아웃 관련된 이슈를 처리해주는 메뉴

선택된 뷰, 뷰 컨트롤러에 있는 전체 뷰 두 섹션으로 나누어져 있다.

예) Update Constraint Constants - 제약이 지정된 오브젝트의 위치를 옮길 경우, 이 업데이트를 해주면 현재 위치로 제약이 수정된다.

Embed In

 

제약 변경, 제약 삭제

지정된 제약을 수정, 삭제 방법을 알아보자!

 

이렇게 제약이 설정되어 있는 상태. 

 

만약 뷰 위치를 조정 후 제약을 재설정 해주고 싶어서 Add New Constraints로 새로 제약을 지정해준다면?

 

자동으로 수정이 되면 좋겠지만 제약이 두 개가 되어버렸다!

conflicting constraints!

 

그러면 여기서 하나의 제약을 삭제해주기 위해서는?

 

선 하나를 선택하고 delete 키를 눌러주면 삭제된다.

 

짠~

 

만약 수정을 해주고 싶다면 선을 선택하고 인스펙터에서 수정해주면 된다.

 

제약을 현재 상태로 업데이트

 

왼쪽 상태에서 오브젝트 위치를 이동시킨다면, 파란 선이 노란 선으로 바뀐다.

만약 제약을 이 오브젝트 위치로 변경시키고 싶다면

 

Resolve Auto Layout Issues 캔버스에서 Update Constraint Constants를 해준다.

 

짠~

 

 

도큐먼트 아웃라인에서 제약의 위치와 이름

 

뷰 컨트롤러

 

도큐먼트 아웃라인에서 constraints의 위치를 확인해보면 제각각인 것을 볼 수 있다.

height와 관련된 제약은 각각 해당하는 오브젝트의 하위에 위치.

두 개의 뷰와 관계되어 있는 제약은 그 위 공통되는 상위 그룹에 위치해있다.

 

제약의 이름을 한 번 살펴보자.

 

 

사이즈 인스펙터의 제약 목록

 

 

프리뷰(빌드하지 않고 특정 디바이스의 미리보기)