[iOS, Swift] 코드로 뷰 작성하기(UIKit, Constraint)

iOS 15, Xcode 13.31, Swift 5, UIKit 환경에서 진행했습니다.

 

 

이번 글에서는 Swift 코드로 뷰를 작성하는 방법에 대해 알아보겠습니다. 뷰를 코드로 작성하면 Interface Builder를 사용하는 것보다 더 세밀한 제어가 가능합니다. 그리고 Constraints를 활용하여 뷰를 자동으로 정렬하는 방법도 함께 알아보겠습니다.

 

1. 뷰 작성하기

Swift 코드로 뷰를 작성하는 방법은 매우 간단합니다. 먼저, UIView 클래스를 상속받은 새로운 클래스를 만듭니다. 그리고 그 클래스 내부에서 필요한 뷰들을 생성하고, addSubview() 메소드를 사용하여 부모 뷰에 추가합니다.

 

class MyView: UIView {
    let titleLabel = UILabel()
    let descriptionLabel = UILabel()
    let imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)

        // 뷰들의 설정 작업
        titleLabel.text = "제목"
        descriptionLabel.text = "내용"
        imageView.image = UIImage(named: "image")

        // 뷰들을 부모 뷰에 추가
        addSubview(titleLabel)
        addSubview(descriptionLabel)
        addSubview(imageView)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

이렇게 작성한 코드를 실행하면 뷰가 화면에 나타나지 않습니다. 이유는 뷰들의 크기와 위치가 설정되지 않았기 때문입니다. 따라서, Constraints를 활용하여 뷰들을 정렬해주어야 합니다.

 

2. Constraints 설정하기

Constraints를 설정하는 방법은 크게 두 가지가 있습니다. 첫 번째는 NSLayoutConstraint 클래스를 사용하는 방법이고, 두 번째는 Anchor를 사용하는 방법입니다. 여기서는 Anchor를 사용하는 방법에 대해 알아보겠습니다.

Anchor를 사용하면 코드가 간결해지고 가독성이 좋아집니다. 또한, NSLayoutConstraint 클래스에서 사용하는 상수값들이 많아서 코드 작성이 번거로울 수 있는데, Anchor를 사용하면 이러한 문제를 해결할 수 있습니다.

 

class MyView: UIView {
    let titleLabel = UILabel()
    let descriptionLabel = UILabel()
    let imageView = UIImageView()

    override init(frame: CGRect) {
        super.init(frame: frame)

        // 뷰들의 설정 작업
        titleLabel.text = "제목"
        descriptionLabel.text = "내용"
        imageView.image = UIImage(named: "image")

        // 뷰들을 부모 뷰에 추가
        addSubview(titleLabel)
        addSubview(descriptionLabel)
        addSubview(imageView)

        // Constraints 설정
        titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 20).isActive = true
        titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
        titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20).isActive = true

        descriptionLabel.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 10).isActive = true
        descriptionLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
        descriptionLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20).isActive = true

        imageView.topAnchor.constraint(equalTo: descriptionLabel.bottomAnchor, constant: 10).isActive = true
        imageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 20).isActive = true
        imageView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20).isActive = true
        imageView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -20).isActive = true
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

 

3. 뷰 사용하기

MyView 클래스를 만들었으니, 이제 해당 뷰를 사용할 수 있습니다. ViewController 클래스에서 MyView를 생성하고, view에 추가해주기만 하면 됩니다.

 

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        let myView = MyView()
        view.addSubview(myView)

        myView.translatesAutoresizingMaskIntoConstraints = false
        myView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        myView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        myView.widthAnchor.constraint(equalToConstant: 300).isActive = true
        myView.heightAnchor.constraint(equalToConstant: 400).isActive = true
    }
}

 

위 코드에서는 MyView를 생성하고, view에 추가해줍니다. 그리고, myView의 Constraints를 설정하여 가운데에 위치하도록 하였습니다.

이제 앱을 실행시키면, MyView가 화면에 나타나고, titleLabel, descriptionLabel, imageView가 설정해준 위치에 맞게 정렬된 것을 확인할 수 있습니다.

4. 결론

이번 글에서는 Swift 코드로 뷰를 작성하는 방법에 대해 알아보았습니다. 코드로 뷰를 작성하는 것은 Interface Builder를 사용하는 것보다 더 세밀한 제어가 가능합니다. 그리고 Constraints를 활용하여 뷰를 자동으로 정렬하는 방법도 함께 알아보았습니다. 코드로 뷰를 작성하는 것은 초기 설정이 번거로울 수 있지만, 나중에 유지보수할 때 매우 편리합니다.