[iOS] Swift 오픈소스 - Snapkit

SnapKit

: 코드 작성을 통해 UI의 오토레이아웃을 쉽게 잡을 수 있도록 도와주는 오픈소스이다.

기존의  오토레이아웃 작성 방식은 상당히 긴 코드가 들어가는데, SnapKit을 이용하면 간단하게 몇줄로 동일한 코드를 작성할 수 있다.

예제의 전체 소스는 다음과 같습니다.

 

 

	import UIKit
	import SnapKit
	class ViewController: UIViewController {
	lazy var greenBox = { () -> UIView in
	let view = UIView()
	view.backgroundColor = .green
	return view
	}()
	lazy var redBox = { () -> UIView in
	let view = UIView()
	view.backgroundColor = .red
	return view
	}()
	lazy var yellowBox = { () -> UIView in
	let view = UIView()
	view.backgroundColor = .yellow
	return view
	}()
	lazy var blueBox = { () -> UIView in
	let view = UIView()
	view.backgroundColor = .blue
	return view
	}()
	override func viewDidLoad() {
	super.viewDidLoad()
	// Do any additional setup after loading the view.
	self.view.addSubview(yellowBox)
	self.view.addSubview(greenBox)
	self.view.addSubview(redBox)
	self.view.addSubview(blueBox)
	// 위 코드와 동일. 더 간단하게 superView와 edge를 매칭
	// self view의 edge에 맞춤
	// 마진을 20준다
	yellowBox.snp.makeConstraints{ make -> Void in
	make.edges.equalToSuperview().inset(UIEdgeInsets(top: 20, left: 20, bottom: 20, right: 20))
	}
	// 기존 방식
	// 빨간색 사각형(가로:100 세로: 100)
	// redBox.translatesAutoresizingMaskIntoConstraints = false
	// NSLayoutConstraint.activate([
	// redBox.widthAnchor.constraint(equalToConstant: 100),
	// redBox.heightAnchor.constraint(equalToConstant: 100),
	// ])
	// SnapKit을 이용한 방식
	// 빨간색 사각형(가로:100 세로: 100)
	redBox.snp.makeConstraints( {make -> Void in
	make.width.height.equalTo(100)
	make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top)
	make.centerX.equalToSuperview()
	})
	// 기존 방식
	// 파란색 사각형
	// blueBox.translatesAutoresizingMaskIntoConstraints = false
	// NSLayoutConstraint.activate([
	// blueBox.widthAnchor.constraint(equalTo: self.redBox.widthAnchor, multiplier: 2),
	// blueBox.heightAnchor.constraint(equalTo: self.redBox.heightAnchor),
	// blueBox.topAnchor.constraint(equalTo: self.redBox.bottomAnchor, constant: 20),
	// blueBox.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
	// ])
	// SnapKit을 이용한 방식
	// 파란색 사각형
	blueBox.snp.makeConstraints{ make -> Void in
	make.width.equalTo(redBox.snp.width).multipliedBy(2)
	make.height.equalTo(redBox.snp.height)
	make.top.equalTo(redBox.snp.bottom).offset(20)
	make.centerX.equalToSuperview()
	}
	// 기존 방식
	// 초록색 사각형
	// greenBox.translatesAutoresizingMaskIntoConstraints = false
	// NSLayoutConstraint.activate([
	// greenBox.widthAnchor.constraint(equalToConstant: 100),
	// greenBox.heightAnchor.constraint(equalToConstant: 100),
	// greenBox.topAnchor.constraint(equalTo: blueBox.bottomAnchor, constant: 20),
	// greenBox.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
	//
	// ])
	// SnapKit을 이용한 방식
	// 초록색 사각형
	greenBox.snp.makeConstraints{ make -> Void in
	make.width.height.equalTo(100)
	make.centerX.equalToSuperview()
	make.top.equalTo(blueBox.snp.bottom).offset(20)
	}
	}
	}
	#if DEBUG
	import SwiftUI
	struct ViewControllerRepresentable: UIViewControllerRepresentable {
	func updateUIViewController(_ uiView: UIViewController,context: Context) {
	// leave this empty
	}
	@available(iOS 13.0.0, *)
	func makeUIViewController(context: Context) -> UIViewController{
	ViewController()
	}
	}
	@available(iOS 13.0, *)
	struct ViewControllerRepresentable_PreviewProvider: PreviewProvider {
	static var previews: some View {
	Group {
	ViewControllerRepresentable()
	.ignoresSafeArea()
	.previewDisplayName(/*@START_MENU_TOKEN@*/"Preview"/*@END_MENU_TOKEN@*/)
	.previewDevice(PreviewDevice(rawValue: "iPhone 11"))
	}
	}
	} #endif

view raw viewDidLoad.swift hosted with ❤ by GitHub

 

예제에는 기존 방식(주석처리 되어있음)과 SnapKit을 적용한 방식이 모두 작성되어 있으니 비교해보면 SnapKit을 적용한 방식이 훨씬 간단하다는 것을 확인할 수 있습니다.

 

결과

참고로 하단의 SwiftUI는 코드는  기기에서 어떻게 보이는지 확인할 수 있는 프리뷰 할 수 있는 코드이다.
해당 내용은 개발하는 정대리님의 유튜브(https://www.youtube.com/watch?v=2Gp01Zqy2oA&t=547s)를 참고하였습니다.