Jiwift

[iOS/Swift] SnapKit 제일 기본기 UIView 추가하기 본문

라이브러리/SnapKit

[iOS/Swift] SnapKit 제일 기본기 UIView 추가하기

지위프트 2023. 11. 21. 00:14
반응형

예시

 SnapKit 사용 중에 제일 기본기 UI 컴포넌트를 추가하도록 하겠습니다. UIView를 추가할 줄 안다면 다른 애들도 똑같이 사용 가능합니다. 다만 SnapKit이 아닌 UI마다 가진 고유 옵션들은 다를 수 있겠죠??

 

 제일 옵션을 줄게 없는 UIView에 backgroundColor를 Blue로 설정하여 추가하도록 하겠습니다. 

 

import SnapKit

 원하는 사용 위치에서 라이브러리를 추가합니다.

 

// UIView 선언
lazy var myView: UIView = {
    let view: UIView = UIView()
    view.backgroundColor = .blue
    return view
}()

 일단 아무 기능을 하지 않지만 파란색을 나타내는 UIView도 선언합니다. 

 

private func setUI() {
    // 슈퍼 View에 파랑색 View 추가
    self.view.addSubview(self.myView)

    // SnapKit 적용
    self.myView.snp.makeConstraints { make in
        make.top.equalToSuperview()
        make.bottom.equalToSuperview()
        make.leading.equalToSuperview()
        make.trailing.equalToSuperview()
    }
}

 정리하기 쉽게 함수를 하나 만들어서 파랑색 View를 추가하고 SnapKit을 적용합니다. 저게 뭔지는 몰라도 됩니다. 일단 이렇게 하면 위 사진처럼 UI가 추가됩니다.

 

전체 코드

//
//  ViewController.swift
//  SnapkitEx
//
//  Created by 김지태 on 11/20/23.
//

import UIKit
import SnapKit

class ViewController: UIViewController {
    
    lazy var myView: UIView = {
        let view: UIView = UIView()
        view.backgroundColor = .blue
        return view
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // ViewController 배경색
        self.view.backgroundColor = .white
        
        // UI
        self.setUI()
    }
    
    // UI
    private func setUI() {
        // 슈퍼 View에 파랑색 View 추가
        self.view.addSubview(self.myView)
        
        // SnapKit 적용
        self.myView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.bottom.equalToSuperview()
            make.leading.equalToSuperview()
            make.trailing.equalToSuperview()
        }
    }
}
반응형