[iOS] Day44 - Storyboard 없이 코드로 UI 설정해보기(Feat. Snapkit)

이 스냅이 아니다

SnapKit이다 

오늘도 달려보자

---

UIWithoutStoryboard

Snapkit을 활용하기 전 코드로 레이아웃을 설정하는 과정을 알아보자 

 

1. 뷰객체 프로퍼티 선언 클래스의 인스턴스 선언을 해준다

2. 루트뷰에 추가를 해주자

이 과정이 없으면 시각적으로 드러나지 않는다 

쉽게 말하면 Storyboard에서 +버튼을 통해 라이브러리에 접근 후 필요한 기능을 가져오는 과정이라 생각하면 편하다

 

3. 크기와 위치 및 속성을 정의 해주자

여기서 디바이스 마다 절대적인 수치가 다르기 때문에 비율로 잡기는 어렵다 (해보니까 어려웠다)

 

디바이스 마다 절대적인 수치가 다르기 때문에 어려워져서 새로운 기능등이 등장한다

 

NSLayoutConstraints 방식이 등장했는데 

이런식으로 코드를 짜고 중요한 포인트는 2가지다

1. translateAutoresizingMaskIntoConstraints를 false로 설정해주어야한다

=> AutoresizingMask와 Autolayout을 동시에 적용할 때 충돌할 수 있어서 그렇다

=> 왜? AutoresizigMask로 결정된 레이아웃은 부모 뷰의 설정에 따라 서브 뷰의 크기나 위치를 조정하는 방식을 결정하게 된다

=> 이 때문에 충돌이 발생 할 수 있다

=> Storyboard로 할때는 오류 안나던데? -> 그때는 true 설정이 되어 있고 코드로 설정하지 않는 이상 충돌은 발생하지 않는다

 

2. 코드 뒤에 isActive 설정을 true로 설정해주어야 레이아웃이 활성화가 된다

=> 2가지 방법으로 설정했다

=> 계속 코드마다 Active 설정하는 것이 불편하다

 

NSLayoutAnchor 방식이 등장한다

그래도 좀 간편해졌지만 더 편한 것이 필요했다

 

넘어가기 전에

left right도 있고 leading trailing도 있는데 왜 leading trailing만 쓰나?

=> Localization 떄문이다 

=> 한국은 오른쪽에서 왼쪽으로 읽는 지역(RTL)이다 하지만 아랍은? 왼쪽에서 오른쪽으로 읽는 지역이다(LTR)

=> left는 어떤 지역을 가던 디바이스의 왼쪽으로 설정하지만 leading의 경우 지역권에 맞추어서 설정해준다

=> leading 설정을 해주면 RTL 지역(한국)에서는 디바이스의 왼쪽 설정이지만 LTR 지역(아랍권)에서는 오른쪽 설정이다

 

RTL VS LTR

이제 SnapKit을 알아보러 가자

 

---

SnapKit

Layout을 코드로 설정하기 위해서 필요한 라이브러리다 

위의 방식으로 클로저 구문을 활용해서 뷰의 속성을 만들어주고 

Foreach 구문을 활용해서 뷰를 더해준 다음에 Constraint를 설정해주는 방법이다 

=> 상수 선언하고 인스턴스 생성하고 리턴하고 복잡한거 같은데...?

 

그래서 준비했다

수업이 끝나가기 전에 Then 라이브러리도 한번 보면 좋다는 말을 기억한 나는 실습 때 Then 라이브러리를 활용했다

then을 활용하면 위의 방식처럼 코드가 간결해진다

 

코드로 Layout 설정할 때 힘들었던 점은 

1. 그림은 그리는게 좋다

=> 머리속에서 짜는건 내가 생각했던 방향으로 흘러가지 않음

2. 스토리보드에서 button Image를 PointSize로 키우던 시절 그립다..

이런식으로 버튼의 사이즈를 키워주는 코드가 필요하다 

코드는 구글링이나 StackOverFlow 형님들이 다 알려주시지만 속성을 설정할 때 필요하구나! 이런 깨닳음을 갖는 시간이 필요하다

 

3. lazy var 

StackView나 ProgressView등을 설정할 때는 let이 아닌 lazy var 설정을 해주어야한다

 

4. inset vs offset

inset

inset의 경우 안쪽에 검은뷰가 들어와있다 inset? 안에 포함되어 있는거 아냐?

=> 아니다

=> 기둥 뒤에 공간 있는 것 처럼 뷰 2개가 있는 것

offset

offset을 보면 inset의 경우도 이해하기 쉬워진다 

 

Snapkit으로 구현한 카카오톡 프로필 뷰 

=> 멜론 뷰하다가 잠들었다는...