[TIL] 2022 / 08 / 17

iOS Layout

 

 

코드로 레이아웃을 짜는 경우엔 간단한 몇 가지 과정이 있음.

 

1. 인스턴스 생성

2. 루트뷰에 추가

 

3. 크기 및 위치 설정

 

 

처음엔 Frame Based Layout.

 

왼쪽 위 (0, 0)을 기준으로 width와 height를 이용해 레이아웃을 잡는 방식이었음.

 

디바이스가 다양해히면서 한계를 느낌.

-> AutoResizing Mask, AutoLayout이 등장.

 

 

기존의 Frame Based Layout에서 뷰의 위치와 크기를 직접 정했다면, 이후엔 제약을 추가하는 형태로 전환됨.

 

AutoResizing Mask는 부모 뷰를 기준으로 서브 뷰의 크기와 위치를 정하는 방식임.

 

이렇게 만들어진 레이아웃들은 Constraints로 변환됨

-> AutoResizing Mask 이후 제약 설정 불가.

 

AutoResizing과 AutoLayout을 동시에 적용할 때, 충돌할 가능성이 있음.

-> 따라서 코드로 레이아웃을 정할땐 translatesAutoresizingMaskIntoConstraints를 false로 설정해야함.

 

 

Frame Based Layout 이후 NSLayoutConstraints를 이용해 레이아웃을 짜게 됨.

 

각각 isActive를 true로 해주는 것이 불편해서 addConstraints를 이용해 한 번에 추가해줄 수 있게 되었지만, NSLayoutConstraints를 이용해 작성하는 것 자체가 불편함.

 

 

그래서 더 간편한 NSLayoutAnchor를 이용해 코드를 작성하게됨.

 

이전보다 훨씬 간편해졌지만, SnapKit이라는 오픈소스 라이브러리를 이용하면 이것보다도 훨씬 더 간편하게 구성할 수 있음.

 

똑같이 인스턴스 생성 후, 오른쪽처럼 작성하면됨.

 

 

새롭게 안 것

 

 

configuration을 이용해 버튼을 구성할 때, 아래처럼 point사이즈로 크기 키울 수 있음.

 

SnapKit을 이용할 때 offset을 양수로 입력하면 오른쪽과 아래로 움직이고, 음수로 입력하면 왼쪽과 위로 움직임.

 

leading과 함께 left라는 프로퍼티도 있음.

-> 아랍과 같이 RTL 국가들에서는 leading이 오른쪽임. left는 무조건 왼쪽을 의미.

 

offset

 

inset

여기서 확인해야 하는 것은 inset의 경우 blackView가 redView안에 있는 것이 아님.

 

안에 넣고 싶다면 아래와 같이 서브뷰로 추가를 해야함.

 

 

stackView를 이용할땐 AddarrangedSubView를 이용해 따로 추가해줘야함.

 

 

추가

 

네비게이션 아이템 사이 간격 줄이기

 

스택오버플로우에서 참고한 코드인데 스택뷰로 되어있나봄.

 

---

다른 화면들도 코드로 구현해봐야겠음.

 

배달의 민족 화면 구현

 

기기에 상관없이 비율대로 잘 보여짐.

 

근데 스냅킷을 이용해서그런지, 만들어준 뷰가 너무 많아서 그런지 빌드 속도가 많이 느려짐.