[코드베이스UI] SnapKit과 NSLayoutConstraint 코드 비교

스토리보드에서 @IBOutlet과 같은 역할을 한다.

 

UILable

NSLayoutConstraint 코드 

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //UILabel 선언
    let label = UILabel()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI세팅 메서드
    private func configureUI(){
        view.backgroundColor = .yellow  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        label.text = "안녕하세요"
        label.textColor = .black
        label.translatesAutoresizingMaskIntoConstraints = false //오토레이아웃 활성화하기 위해 필요한 코드
        
        view.addSubview(label)  // view안에 서브뷰로 label 추가. 이 코드를 작성하지 않으면 label 이 안 보임
        NSLayoutConstraint.activate([  //제약조건 활성화
            label.widthAnchor.constraint(equalToConstant: 80), //라벨의 너비는 80과 같게 세팅
            label.heightAnchor.constraint(equalToConstant: 40),
            label.centerXAnchor.constraint(equalTo: view.centerXAnchor), //view의 centerXAnchor와 label의 centerXAnchor를 같게 가져간다.
            label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

 

 

 

SnapKit 코드

private func configureUI(){
    view.backgroundColor = .yellow  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
    label.text = "안녕하세요"
    label.textColor = .black
        
    view.addSubview(label)
        
    //label에 SnapKit을 이용해서 제약조건을 만들기.
    label.snp.makeConstraints { make in //클로저 사용
        make.width.equalTo(80)          //라벨의 넓이
        make.height.equalTo(40)         //라벨의 높이
        make.centerX.equalToSuperview() //label의 슈퍼뷰(view)와 centerX를 같게 한다.
        make.centerY.equalToSuperview()
    }
}

 

 

클로저 축약

private func configureUI(){
    view.backgroundColor = .yellow  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
    label.text = "안녕하세요"     
    label.textColor = .black
        
    view.addSubview(label)
        
    //label에 SnapKit을 이용해서 제약조건을 만들기.
    label.snp.makeConstraints {
        $0.width.equalTo(80)          //라벨의 넓이
        $0.height.equalTo(40)         //라벨의 높이
        $0.center.equalToSuperview()  //centerX와 centerY를 함께 쓸 수 있다. 
    }
}

 

 

---

UIButton 

NSLayoutConstraint 코드 

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //UIButton 선언
    let button = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI세팅 메서드
    private func configureUI(){
        view.backgroundColor = .white  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        button.setTitle("Click", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.layer.cornerRadius = 10 //버튼 모서리 둥글게
        
        view.addSubview(button)
        NSLayoutConstraint.activate([
            button.widthAnchor.constraint(equalToConstant: 120),
            button.heightAnchor.constraint(equalToConstant: 60),
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

 

 

 

SnapKit 코드 

    private func configureUI(){
        view.backgroundColor = .white  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        button.setTitle("Click", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.backgroundColor = .red
        button.translatesAutoresizingMaskIntoConstraints = false
        button.layer.cornerRadius = 10 //버튼 모서리 둥글게
        
        view.addSubview(button)
        
        button.snp.makeConstraints {
            $0.width.equalTo(120)
            $0.height.equalTo(60)
            $0.center.equalToSuperview()
        }
    }

 

 

 

 

---

UIImageView

NSLayoutConstraint 코드

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    //UIImageView 선언
    let imageView = UIImageView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        configureUI()
    }
    
    //UI세팅 메서드
    private func configureUI(){
        view.backgroundColor = .white  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        
        imageView.image = UIImage(named: "seattle")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(imageView)
        NSLayoutConstraint.activate([
            imageView.widthAnchor.constraint(equalToConstant: 300),
            imageView.heightAnchor.constraint(equalToConstant: 300),
            imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }
}

 

 

 

SnapKit 코드

   private func configureUI(){
        view.backgroundColor = .white  //여기서 view는 ViewController가 기본적으로 갖고 있는 기본 view
        
        imageView.image = UIImage(named: "seattle")
        imageView.backgroundColor = .black
        imageView.contentMode = .scaleAspectFit
        imageView.translatesAutoresizingMaskIntoConstraints = false
        
        view.addSubview(imageView)
        
        imageView.snp.makeConstraints {
            $0.width.height.equalTo(300)  //같은 값이면 붙여서 쓸 수 있음
            $0.center.equalToSuperview()
        }
    }