코드로 오토레이아웃 잡기 - CodeBase UI

codebase UI의 장단점(복습)

• 장점: 협업간에 UI conflict 해결이 쉽다, 더 다양한 UI적 표현이 가능
• 단점: 스토리보드처럼 시각적으로 보이지 않음, 어느정도 컴포넌트의 속성에 대해 알아야함, 오토레이아웃 오류를 보여주지 않음, 코드가 왕창 길어진다.

기본적인 세팅(Main.storyboard 안쓰기)

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    guard let windowScene = (scene as? UIWindowScene) else { return }
    
    window = UIWindow(windowScene: windowScene)
    window?.rootViewController = ViewController() // 원하는 뷰컨트롤러로 변경해주기
    window?.makeKeyAndVisible()
}

❗️아마 검색해보시면 Main.storyboard를 지우고 info.plist 등을 수정하는 작업이 필요하다고 나올겁니다만!! Main.storyboard를 남겨두고도 사용이 가능해서 이렇게 진행하도록 하겠습니다 🙂

❗️스토리보드와는 다르게 view.backgroundColor를 지정해주지 않으면 검정색으로 나옵니다! 놀라지마세요

UI Component 추가하기

기존에 Outlet으로 연결한 것처럼 UI 컴포넌트들을 초기화해서 넣어줍니다.

<aside> ❗ 우리가 스토리보드에서 뷰를 얹는 순서와 똑같기 때문에 addSubview를 해주는 순서가 중요할 수 있습니다! ex) imageview 위에 label이 올라가는 경우

</aside>

stackView에 요소를 넣을때는 addArrangedSubview 를 사용해야합니다. 또한 이는 순서대로 스택뷰에 들어가게 되므로 순서가 중요합니다!

또한 addSubView를 해주게 되면 계층 구조가 만들어져 부모-자식의 관계가 됩니다. 즉 button1의 부모는 stackView가 되기 때문에 button1의 SuperView는 stackView가 됩니다. SuperView는 코드로 오토레이아웃을 잡는데 많이 사용되므로 관계를 잘 파악해줘야합니다.