[iOS] codebase UI

4월의 마지막 날.

스토리보드와의 이별을 준비를 해 보자. 

---

 

|  codebase

    장점:  협업 시 UI conflict 해결이 쉽다. 더 다양한 UI 표현이 가능하다.

    단점:  비시각적 → 오토레이아웃 오류를 볼 수 없다. 코드가 길어진다. components 속성을 알아야 한다. 등등

 

 

 

 

|  Main.storyboard 이별 준비 

 

:  SceneDelegate에서 코드를 수정한다.

수정 전 디폴트 코드

SceneDelegate 코드 상단 수정 (guard let windowScene / ViewController 인스턴스화 )

 

 

|  화면에 components 추가하기

 

:  기존에 Outlet 연결한 것처럼 UI components를 초기화해서 넣어준다.

 

※  storyboard에서 view를 얹는 순서와 같기에 addSubView를 해주는 순서가 중요하다.

        예) imageview 위에 label이 올라가는 경우처럼! 

Label, Button, TableView

 

※ stackView에 요소를 넣을 때는 addArrangedSubview를 사용한다.

     "순서대로" stackView에 들어가게 된다.

      addSubView를 하면 계층구조가 만들어져 부모-자식 관계가 된다. 

      즉, button1의 부모는 stackView가 되기 때문에 button1의 SuperView는 stackView가 된다. 

stackView는 코드로 autoLayout을 잡을 때 많이 사용되므로 잘 이해해야 한다.

 

 

|  Cell 관련 유의할 점 

 

: cell 파일의 경우 기존의 .xib 방식이 아니기 때문에 달라지는 부분들이 있다.

awakeFromNib은 삭제해도 된다. 날리자.

 

우선, init을 override해야 한다.

init을 override하면 아래와 같이 메시지가 뜨는데, 자동완성 기능으로 fix하면,

 

 

아래와 같이 NSCoding 프로토콜을 구현하는 Object-C 메소드가 뜨는데 일단 넘어가자. (사실 잘 모름)

 

cell을 register하는 과정에서 inspector창에 reuse identifier 설정이 없기 때문에 (.xib와 다르다)

아래와 같이 type property를 사용하면 좋다. 그리고 register과정에서는 Nib이 아닌 CellClass를 선택하면 된다. autoLayout을 잡을 때는 contentView에 UI 요소들을 addSubview 해줘야 한다. (VC에서는 self.view)

 

register과정에서는 Nib이 아닌 CellClass를 선택

 

 

|  Constraints 잡기

 

1. translatesAutoresizingMaskIntoConstraints = false 설정
2. anchor 연결

translatesAutoresizingMaskIntoConstraints = autoLayout을 코드로 하려면 꺼야하는 것

기기에 맞춰 자동으로 크기를 조정해주는 기능. 동적으로 뷰의 위치와 크기를 설정해줘야 한다면 이 기능을 꺼야한다.

translatesAutoresizingMaskIntoConstraints | Apple Developer Documentation