[iOS/Library] Swift Snapkit으로 코드로 오토레이아웃 쉽게하기(Easy Programmatically AutoLayout)

Snapkit은 코드로 레이아웃을 도와주는 라이브러리입니다.

 

우선 팟파일에 아래와 같이 'SnapKit', '~> 5.0.0'을 추가해줍니다. 버전은 바뀔 수 있으므로 아래 스냅킷 라이브러리로 가셔서 확인하시고 추가하시기 바랍니다.

https://github.com/SnapKit/SnapKit

SnapKit/SnapKit

 

그리고 뷰컨트롤러로 이동해 'SnapKit'을 import해주고

무지개색 UIView들을 만들어놓습니다.

그리곤 view에 addSubview로 무지개색 뷰들을 넣어주고, 각 각 뷰의 이름에 맞게 색도 backgroundColor로 설정해줍니다.

자 먼저 빨주노 뷰들을 차례대로 위에서 아래로 배치하기 위한 코드입니다.

자세히 살펴보면 redView.snp.makeConstraints { make in  <-는 빨간색뷰에 콘스트레인트 만들거야

make.top.equalTo(view.snp.top) <- 위를 현재 뷰컨트롤러의 view의 위랑 똑같이 해줘!

make.size.width.height.equalTo <- 뷰크기를 가로 100 세로 100으로 만들어줘

make.left.equalTo(view.snp.left) <- 왼쪽도 뷰컨트롤러의 view의 왼쪽이랑 똑같이 해줘!

이런식으로 오렌지색뷰는 빨간색뷰 아래에 노란색뷰는 오렌지색 아래로 배치합니다.

아래화면과 같이 설정됩니다.

그리곤 초록색,파랑색,남색 뷰들은 노란색뷰와 똑같은 높이에서 왼쪽부터 오른쪽으로 배치하기는

아래와 같이 make.top.equalTo(yellow.snp.top) <- 노란색뷰랑 위를 똑같이 해줘

make.size.width.height.equalTo <- 마찬가지로 크기를 정하는 것

make.left.equalTo(yellowView.snp.right) <- 내 왼쪽을 노란색뷰 오른쪽에 붙여줘

마찬가지로 파랑색뷰는 초록색뷰 오른쪽옆에 남색뷰는 초록색 뷰 오른쪽옆으로 설정해줍니다.

아래화면과 같이 설정됩니다

그리곤 마지막으로 보라색뷰는 다 필요없고 그냥 가운데다 놔줘는

make.center.equalTo(view.snp.center) <- 현재 뷰컨트롤러의 가운데랑 보라색뷰 가운데를 똑같이 해줘 

아래화면과 같이 배치됩니다.

전체코드

import UIKit
import SnapKit
 
 
@available(iOS 13.0, *)
class TabbarViewController1: UIViewController,UITextFieldDelegate {
    
    var redView = UIView()
    var orangeView = UIView()
    var yellowView = UIView()
    var greenView = UIView()
    var blueView = UIView()
    var indigoView = UIView()
    var purpleView = UIView()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.addSubview(redView)
        self.view.addSubview(orangeView)
        self.view.addSubview(yellowView)
        self.view.addSubview(greenView)
        self.view.addSubview(blueView)
        self.view.addSubview(indigoView)
        self.view.addSubview(purpleView)
        
        redView.backgroundColor = .red
        orangeView.backgroundColor = .orange
        yellowView.backgroundColor = .yellow
        greenView.backgroundColor = .green
        blueView.backgroundColor = .blue
        indigoView.backgroundColor = .systemIndigo
        purpleView.backgroundColor = .purple
        
        redView.snp.makeConstraints { make in
            make.top.equalTo(view.snp.top)
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(view.snp.left)
        }
        orangeView.snp.makeConstraints { make in
            make.top.equalTo(redView.snp.bottom)
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(redView.snp.left)
        }
        yellowView.snp.makeConstraints { make in
            make.top.equalTo(orangeView.snp.bottom)
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(orangeView.snp.left)
        }
        greenView.snp.makeConstraints { make in
            make.top.equalTo(yellowView.snp.top)
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(yellowView.snp.right)
        }
        blueView.snp.makeConstraints { make in
            make.top.equalTo(greenView.snp.top)
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(greenView.snp.right)
        }
        indigoView.snp.makeConstraints { make in
            make.top.equalTo(blueView.snp.top)
            make.size.equalTo(CGSize(width: 100, height: 100))
            make.left.equalTo(blueView.snp.right)
        }
 
        purpleView.snp.makeConstraints { make in
            make.center.equalTo(view.snp.center)
            make.size.equalTo(CGSize(width: 100, height: 100))
        }
        
    }
    
}
 

더 자세한 건 SnapKit 라이브러리 깃허브 주소로 가셔서 확인할 수 있습니다! 위에 첨부해놓았습니다~