[Swift] Safe Area / View Hierarchy / Layout

깃허브 말고 갑자기 블로그에 쓰는 이유는 ,, 그냥 요즘 블로그가 심심해보여서,, 복붙해보았습니다,,

 

Safe Area?

아이폰 X 부터 나온 개념으로, M자 탈모 아이폰이 등장하면서 상단의 노치와 하단의 홈바에는 콘텐츠가 제대로 표시되지 않기 때문에, 이 부분을 제외하고 콘텐츠가 안전하게 표시될 수 있는 영역을 의미합니다.

• Storyboard에서 뷰컨생성하면 Safe Area를 볼 수 있습니다.

 

View Hierarchy

• View 안에 View 를 담을 수 있으며, 이렇게 하면 View의 상하관계가 생깁니다.
• 부모-자식관계가 형성됩니다. (부모: superview , 자식: subview)
  • subview는 반드시 1개의 superview만 가질 수 있습니다.
  • superview와 subview는 상대적인 관계이므로 subview 아래에 새로운 subview가 생긴다면 새로 생긴 subview에 대해 superview가 되는 것!

 

Layout 잡는 방법

크게 세 가지로 나눌 수 있습니다.

1. Frame 기반으로 레이아웃 잡기 (Frame-based)
2. Autoresizing masks
3. Autolayout

🍎 1. Frame 기반 레이아웃 잡기 (frame-based)

frame을 통해 superview에서 얼마나 떨어져 있는지 + 얼만큼의 width와 height를 가지고 있는지 잡아준다.

• frame ❓ superView 좌표시스템(기준) 안에서 자신의 View 위치와 크기를 나타내는 값
• 코드로 하나하나 모든 view의 frame 을 잡아주는 방식이다.
• superview 기준으로 절대값을 잡아서 움직인다.
• → 기기마다 대응하거나 유지보수가 힘들다. (레이아웃 변화 → 다시,,)

🍎 2. Autoresizing masks

superView의 frame 자체가 변경되었을 때, view의 frame을 변경하는 방식이다.

• 외부의 변화에만 대응 가능하다.

🍎 3. Autolayout

View 사이의 관계를 정의하는 방식의 레이아웃이다.

• 해당 제약조건(Constraint)을 바탕으로 각 뷰의 크기를 결정한다. → 제약조건이 충분하지 않으면 에러!
• 외부와 내부 변경에 동적으로 대응할 수 있다.

Autolayout 자세히 보기 👀

Autolayout 의 용어

• Width : 정렬 사각형의 너비
• Height : 정렬 사각형의 높이
• Top : 정렬 사각형의 상단
• Bottom : 정렬 사각형의 하단
• Baseline : 텍스트의 하단 (텍스트가 들어가는 뷰)
• Horizontal : 수평
• Vertical : 수직
• Leading : 리딩, 좌측
• Trailing : 트레일링, 우측
• CenterX : 수평중심
• CenterY : 수직중심

Autolayout 설정방법

3-1) 오른쪽 하단의 Add New Constraint를 통해 제약조건을 설정해주는 방법

(각 숫자옆에 화살표 버튼을 누르면 어느 View와의 관계를 설정할지 나온다 → 3-2방법에서 사용됨.)

 

1. Spacing to nearest neighbor : 가장 인접한 뷰와 얼만큼의 constraint를 가질것인가 ? → 빨간색으로 들어와야 활성화됨.
2. Constrain to margins : margin을 고려해서 설정할 것인지?
3. Width, Height : 가로 세로길이에 관한 constraint
4. Aspect Ratio : 해당 뷰의 가로:세로 비율을 고정한다. (ex. 해당 화면 1:1 잡기 등.. → Multiplier 1:1 로 설정하기!)

• 설정된 Constraint는 해당 뷰를 클릭한 후 inspector 창에서 확인할 수 있다.

제약조건을 다 설정하고 나서 preview 창을 띄워 보면 이렇게 기종에 관계없이 모두 같은 레이아웃으로 잘 나오는 것을 볼 수 있을 것이다.!!

3-2) 두 View 사이의 관계를 정의해주는 방법

설정할 View를 선택한 후, 관계를 설정해 줄 View에 Control 을 누른 채로 드래그해줍니다. (왼쪽에서 해도 되고, stroyboard 상에서 해도 된다. 나는 스토리보드 위에서 해주면 가끔 모든 항목이 나오지 않아서 왼쪽에서 해줬다.)

→ 나는 가장 아래의 view를 가장 위의 View와의 관계를 통해 레이아웃을 설정하기 위해서 아래의 뷰를 선택하고 control을 누른 채로 가장 위의 view로 드래그했다.

 

그러면 이제 여러가지 항목들이 나오는데, Command를 선택한 채로 항목을 선택하면 다중선택을 할 수 있습니다.

AutoLayout 의 계산방식

FirstItem.Attribute1 = (Multiplier) * SecontItem.Attribute2 + Constant

해당되는 Constraint 를 선택하면 우측 Inspector 창에 아래와 같이 나오게 됩니다.

 

1. FirstItem.Attribute1 은 View3.Width
2. SecondItem.Attribute2 는 View1.Width
3. Multiplier는 1
4. Constant는 0

위 내용의 의미는, View3의 Width 가 View1의 Width 크기의 1배 + 0 만큼이라는 이야기 입니다.

Constant → 30, Multiplier → 1:2으로 바꾼 후,

2위 내용의 의미는 View3의 Width가 View1의 Width크기의 1/2배 + 30 이라는 이야기 입니다.

만약 View1.Width가 200이라면, View3.Width는 200/2 + 30 = 130이 된다는 의미죠

Intrinsic Size

Label은 애초에 폰트 크기와 텍스트가 정해져 있기 때문에 컨텐츠 자체의 본질적인 크기인 Intrinsic Size 계산을 할 수 있습니다. 그래서 우리가 따로 Width를 잡아주지 않아도 에러가 발생하지 않습니다.

• Imageview, TextView 는 컨텐츠에 따라 크기가 변하고
• Label, Button, Switch, TextField에서는 width 와 height를 구할 수 있습니다.

이러한 점은 UIView와 큰 차이점을 보이는데, UIView 같은 경우에는 내부 컨텐츠의 크기를 정할 수 없기 때문에 Instrinsic Size 계산을 할 수 없습니다. 그래서 top, leading만 잡아주면 에러가 납니다!

 

uiview 에서는 에러가 납니다. (top, leading만 설정해준 후,, 어떤게 더 필요한지 살펴보면 width와 height를 더 설정해줘야 한다고 나오네요.)