[iOS] AutoLayout 코드로 그리기 (Code base UI)

AutoLayout 코드로 그리기

기존에 storyboard 기반으로 짰던 UI를 코드만으로 작성해보겠습니다.

 

여기서 핵심은

1. 해당 뷰의 x, y 위치

2. 해당 뷰의 가로, 세로 크기

입니다.

 

3가지 방법으로 나누어 설명하겠습니다.

 

1. 뷰 인스턴스 생성

myFirstView 인스턴스를 생성하고,

x축과 y축 위치, 가로 세로 크기를 설정해줍니다.

        let myFirstView = UIView()
        myFirstView.translatesAutoresizingMaskIntoConstraints = false
        myFirstView.backgroundColor = .systemPink
        self.view.addSubview(myFirstView)
        
        // x축, y축 위치
        myFirstView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        myFirstView.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100).isActive = true
        
        // 뷰의 가로세로, 크기 제공
        myFirstView.widthAnchor.constraint(equalToConstant: 200).isActive = true
        myFirstView.heightAnchor.constraint(equalToConstant: 200).isActive = true
        myFirstView.layer.cornerRadius = 30

실행 화면

2. 클로저로 뷰를 설정

클로저로 뷰를 먼저 선언해주고,

addSubView에 constraint를 잡아줍니다.

// 클로저로 뷰를 설정
    var mySecondView : UIView = {
        let view = UIView()
        view.backgroundColor = #colorLiteral(red: 0.5843137503, green: 0.8235294223, blue: 0.4196078479, alpha: 1)
        view.layer.cornerRadius = 16
        view.translatesAutoresizingMaskIntoConstraints = false
        view.clipsToBounds = true
        return view
    }()

self.view.addSubview(mySecondView)
        NSLayoutConstraint.activate([
            mySecondView.widthAnchor.constraint(equalToConstant: 100),
            mySecondView.heightAnchor.constraint(equalToConstant: 100),
            mySecondView.leadingAnchor.constraint(equalTo: myFirstView.leadingAnchor, constant: 10),
            mySecondView.topAnchor.constraint(equalTo: myFirstView.bottomAnchor, constant: 50)])

실행 화면

 

3. 커스텀 뷰 설정

새로운 MyCircleView.swift 파일을 생성해주고,

생성한 view파일을 가져와 사용합니다.

import Foundation
import UIKit

class MyCircleView: UIView{
    override func layoutSubviews() {
        super.layoutSubviews()
        print("MyCircleView - layoutSubviews() called")
        self.layer.cornerRadius = self.frame.height / 2
    }
}

var myThirdView : MyCircleView = {
        let circleView = MyCircleView()
        circleView.backgroundColor = #colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1)
        circleView.translatesAutoresizingMaskIntoConstraints = false
        return circleView
    }()

self.view.addSubview(myThirdView)
        NSLayoutConstraint.activate([
            myThirdView.widthAnchor.constraint(equalTo: mySecondView.widthAnchor, multiplier: 1.5),
            myThirdView.heightAnchor.constraint(equalTo: mySecondView.heightAnchor, multiplier: 1.5),
            myThirdView.topAnchor.constraint(equalTo: mySecondView.bottomAnchor, constant: 50),
            myThirdView.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
        ])

실행 화면

 

Preview

코드로 레이아웃을 짤때 바로바로 UI 확인을 못하는 점이 불편한데, Preview를 이용하면 빠르게 확인이 가능합니다.

이 방법은 코드는 UIkit을 이용하고, Preview(미리보기)만 swiftui를 이용해서 보는 것입니다.

 

단축키

- 미리보기 창 열기 : option + command + enter 

- 미리보기 돌리기 : option + command + p 

#if DEBUG
import SwiftUI
struct ViewControllerRepresentable: UIViewControllerRepresentable {
    
    // update
    func updateUIViewController(_ uiViewController: UIViewController, context: Context){
        
    }
    // makeui
    @available(iOS 13.0, *)
    func makeUIViewController(context: Context) -> UIViewController {
        ViewController()
    }
}

struct ViewController_Previews: PreviewProvider {
    static var previews: some View{
        ViewControllerRepresentable().previewDisplayName("아이폰 11")
    }
}
#endif

 

[출처]

https://www.youtube.com/watch?v=_E0VZJf2NJk