[UIKit] : Autolayout, SnapKit 사용해보기

Swift 는 View들의 위치를 Layout으로 정해준다.

이때 Layout을 상수로 지정해주면

기기를 바꾸는 경우 원하는 상황이 연출되지 않을 것이다!

 iOS 기기마다 화면 View의 크기가 다르기 때문이다

-> 이를 해결하기 위해 AutoLayout 을 사용해보자!

 

 

1. 기존의 frame을 사용한 코드를 먼저 보자

import UIKit
import Foundation


class ViewController: UIViewController{
    private let testView : UIView = {
        let testView = UIView()
        testView.backgroundColor = .blue
        return testView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(testView)
    }
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        testView.frame = CGRect(x: 100, y: 100, width: 100, height: 100)
    }
}

 

이제 AutoLayout 을 적용해보자

import UIKit
import Foundation


class ViewController: UIViewController{
    private let testView : UIView = {
        let testView = UIView()
        testView.backgroundColor = .blue
        return testView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(testView)
        setSubviewsLayout()
    }
    
    private func setSubviewsLayout(){
        testView.translatesAutoresizingMaskIntoConstraints = false
        
        testView.topAnchor.constraint(equalTo: view.topAnchor, constant: 100).isActive = true
        testView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 100).isActive = true
        testView.heightAnchor.constraint(equalToConstant: 100).isActive = true
        testView.widthAnchor.constraint(equalToConstant: 100).isActive = true
    }
}

위 코드같이 오토레이아웃을 설정해주고 실행시키면~

frame으로 했을 때와 같은 결과의 화면을 얻을 수 있을 것이다!  짠!

 

하지만.. 분명 오토레이아웃이 유용하다고 해서 사용했는데 코드가 너무 길어진 것 같은 느낌이다..

 

 

이를 해결하기 위해서 나온 것이  SnapKit이다!

https://seorin-yy.tistory.com/24

[iOS] : CocoaPods 설치, 라이브러리 (SnapKit + Then)사용하기

위 글을 참고하여 SnapKit을 깔아주었다면

SnapKit을 사용하여 오토레이아웃 코드를 짧게 줄여보자!

import UIKit
import Foundation
import SnapKit


class ViewController: UIViewController{
    private let firstView : UIView = {
        let testView = UIView()
        testView.backgroundColor = .blue
        return testView
    }()
    
    private let secondView : UIView = {
        let testView = UIView()
        testView.backgroundColor = .red
        return testView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(firstView)
        view.addSubview(secondView)
        setSubviewsLayout()
    }
    private func setSubviewsLayout(){
        //위의 오토레이아웃과 똑같은 결과를 가져오는 SnapKit코드이다
        firstView.snp.makeConstraints { make in
            make.leading.equalToSuperview().offset(100)
            make.top.equalToSuperview().offset(100)
            make.width.equalTo(100)
            make.height.equalTo(100)
        }
        
        //SnapKit에 대한 이해를 돕기 위해 하나의 추가 뷰를 더 작성해봤다.
        secondView.snp.makeConstraints { make in
            make.leading.equalTo(firstView.snp.leading)
            make.top.equalTo(firstView.snp.bottom).offset(100)
            make.width.equalTo(100)
            make.height.equalTo(100)
        }
    }
}

 

결과 화면