[iOS - swift] 12. 오토 레이아웃(auto layout) - storyboard

1. 오토 레이아웃 이란?

 - 어떤 디바이스에서라도 그에 따라 자동적으로 배치될 수 있게끔 하는 것

 - 크게 pin으로 설정하는 방법과, ctrl+드래그앤드랍으로 설정 가능

 

- 간격을 고정으로 한 오토레이아웃 (뷰의 크기가 변동)

 - 뷰와 다른 뷰 사이의 간격과 뷰와 뷰컨트롤러 테두리와의 간격을 고정 -> 뷰는 그 크기를 맞추기 위해 자체 크기 변동

 

* Safe Area : 상태바 등과 겹치지 않게 미리 IDE에서 표시해 주는 것 (파란색 테두리로 표현)

safe area : 파란색 테두리

2. 설정 방법

1) pin으로 설정하는 방법 (가장 좋은 방법)

pin사용

뷰와 상단에 있는 뷰 또는 뷰컨틀롤러 상단과의 차이

2) 드래그 앤 드랍 방법

 뷰에서 고정하려는 곳으로 ctrl + 드래그 앤 드랍

 

3) resolve auto layout버튼에서 "Add Missing Constraints"로 한번에 설정 (단 크기 유지 안될 수 있으므로 비추천)

뷰를 클릭한 후, 자동으로 constarints설정됨

- 단축키로 만들 것 : "cmd + ," -> key binding 탭에서 Add Missing Constraints 단축키 등록 -> "cmd + opt + ;"

 

아이폰8 기준으로 View를 넣고 꽉차게 설정(분홍색)한 후 아이패드에서 실행한 결과) 

---

오토레이아웃 미 적용(Add Missing constraints도 이렇게 나옴)

pin또는 드래그앤드랍으로 한 경우

 

3. 오토레이아웃 설정 이름

 -Leading, Trailing은 각각 왼쪽 여백, 오른쪽 여백을 의미

*출처 : apple의 autolayout document

4. Label에서의 여백 설정 오류 대처방법

 - Label은 드래그해서 얻은 크기가 아닌, 내부 글자 크기에 고정되어 있음

여기서 "글의 제목"부분을 Leading, Trailing을 pin으로 고정하면 밑의 결과

글의 제목에 내부마진이 사라짐

 

 - 글의 제목은 드래그해서 크게해도, 사실상 크기가 고정되어 있음 : 1)~3)중 3)번이 가장 좋은방법

 

 1) 내부마진(padding)을 추가하는 방법 : UILabel대신 UIButton생성 (UIButton은 내부 마진을 정할 수 있음)

  - 이 방법의 유일한 단점은 @IBOutlet UIButton형으로 됨 (UILabel이 안돼서 델리게이트 패턴시 오류 날 수 있음)

  - identity inspector에서 Accessibility에 있는 static Text만 체크 활성화

identity inspector

  - attribute inspector에서 User Interaction Enabled해제

attributes inspector

 

  - size inspector에서 내부마진 설정(Content insets)

Size inspector

 

-결과

"글의 제목" : pin설정해도 내무 마진이 사라지지않음

 

 2) superView를 만들고 그 위에 Label을 놓고 pin설정으로 해결 (단, 내부 마진은 사라지며 위치만 보존)

2)번 방법 : 뷰를 생성한 후 그 뷰를 기준으로 pin설정 한 경우

 

3) UILabel배치 후, pin에서 width영역을 고정 시킬 것

 

* 일반적으로 오토레이아웃은 storyboard가 아닌 programmatically로 구현하는게 일반적이며 더욱 섬세

 non-storyboard 방법은 아래 링크 참고

https://ios-development.tistory.com/67

[iOS - UI Custom] 11. Auto layout (programmatically)