해당 포스트에서는 SnapKit과 함께 Auto layout를 좀 더 편하게 쓰기 위해 만들어진 Stevia 라이브러리를 맛볼 예정입니다.
Auto layout의 Constraint 가 익숙하지 않은 분도 쉽게 레이아웃을 구성할 수 있어요!
일단, Stevia를 설치해봅시다. 설치는 CocoaPods, Carthage, Swift Package Manager 가 있는데, 공식적으로는 Swift Package Manager를 팍팍 밀어주는 것 같더라구요..
저는 팍팍 밀어주는 Swift Package Manager로 시작해보도록 하겠습니다. 프로젝트를 클릭하고 Frameworks, Libraries, and Embedded Content 에 있는 + 버튼을 클릭해주세요
그럼 위와 같이 Add Package Dependency...가 있습니다. 눌러서 https://github.com/freshOS/Stevia를 입력해주시면 추가 끝입니다!
추가가 잘되었다면 위와 같이 Stevia가 나타납니다. 이제 한번 사용해볼까요? 일단 공식 문서에 있는 방법대로 해봅시다. 공식 문서에는 View파일을 따로 만들어서 ViewController와 분리하도록 예제를 제공하더라구요.. 그래서 View 파일을 하나 만들었습니다. 저는 ViewControllerView.swift로 하겠습니다.
import UIKit
import Stevia
class ViewControllerView: UIView {
fileprivate let labelWelcome: UILabel = {
let node = UILabel()
node.text = "Login Page"
node.textAlignment = .center
return node
}()
fileprivate let emailTextField: UITextField = {
let node = UITextField()
node.placeholder = "Email"
node.layer.borderColor = UIColor.black.cgColor
node.layer.borderWidth = 1.0
return node
}()
fileprivate let passwordTextField: UITextField = {
let node = UITextField()
node.placeholder = "Password"
node.layer.borderColor = UIColor.black.cgColor
node.layer.borderWidth = 1.0
return node
}()
fileprivate let button: UIButton = {
let node = UIButton()
node.setTitle("Sign in!", for: .normal)
node.setTitleColor(.black, for: .normal)
return node
}()
convenience init() {
self.init(frame: .zero)
subviews {
labelWelcome
emailTextField
passwordTextField
button
}
layout {
100
|-100-labelWelcome-100-|
40
|-40-emailTextField-40-| ~ 40
20
|-40-passwordTextField-40-| ~ 40
20
|-button-| ~ 80
}
}
}
어디에서나 있을법한 간단한 로그인 페이지를 구성해보았습니다. 코드를 하나하나씩 살펴보자면, 저같은 경우는 최상단에 UI 컴포넌트들을 전부 정의해두었고 (스타일까지 저는 한번에 정의해두는 성격이라.. 다른분들은 저렇게 안하셔도 됩니다!) init()에서 해당 컴포넌트들을 설정합니다.
일단, subviews에서 사용할 UI Components들을 추가하고, layout영역에서 Auto layout를 설정하게 됩니다. 문법이 엄청 심플하면서도 독특한데요,일반적으로 사이사이에 있는 100, 40, 20, 20등은 컴포넌트들 사이의 여백입니다.
그리고 컴포넌트 사이에 있는 숫자들을 하나하나씩 살펴봅시다!
|-100-labelWelcome-100-|위의 코드는 labelWelcome 컴포넌트 양 옆에 100씩 만큼 여백을 주겠다는 의미입니다.
여백을 주기 싫으면 |-labelWelcome-| 으로 정의하면 됩니다~!
Stevia는 기본적으로 Vertical Stack으로 컴포넌트들이 쌓이는 것 같아서 여백을 주면 너비가 그만큼 자동으로 지정되어집니다. 그럼 높이는 어떻게 설정할까요?
|-40-emailTextField-40-| ~ 40바로 위와 같이 물결표와 높이를 지정해줍니다. 위 코드는 emailTextField 에게 양 쪽으로 40씩 여백을 주고 높이도 40을 줬네요!
이제 위와 같은 코드를 작성하셨으면 View 파일이 만들어진겁니다. 이제 ViewController에서 불러와서 보여줘야겠죠? 아래와 같이 작성해서 보여줄 수 있습니다!
class ViewController: UIViewController {
var v: ViewControllerView!
override func loadView() {
v = ViewControllerView()
self.view = v
}
}이제 실행하시면 잘 나옵니다~! 하지만.. 저는 개인적으로 View와 ViewController를 분리하는것보다 한 곳에서 작성하는 게 더 좋더라구요… 그래서 View파일을 따로 생성하지 않고 작업해보도록 하겠습니다.
저희는 일단 기본적으로 UIViewController에 기본적인 view가 있다는 걸 알아야 합니다~! 굳이 새로운 UIView 파일을 추가하지 않아도 기본적인 view로 작업할 수 있다는 얘기죠. 아까전의 컴포넌트 코드를 전부 옮기고 조금만 수정해주면 끝납니다.
import UIKit
import Stevia
class ViewController: UIViewController {
fileprivate let labelWelcome: UILabel = {
let node = UILabel()
node.text = "Login Page"
node.textAlignment = .center
return node
}()
fileprivate let emailTextField: UITextField = {
let node = UITextField()
node.placeholder = "Email"
node.layer.borderColor = UIColor.black.cgColor
node.layer.borderWidth = 1.0
return node
}()
fileprivate let passwordTextField: UITextField = {
let node = UITextField()
node.placeholder = "Password"
node.layer.borderColor = UIColor.black.cgColor
node.layer.borderWidth = 1.0
return node
}()
fileprivate let button: UIButton = {
let node = UIButton()
node.setTitle("Sign in!", for: .normal)
node.setTitleColor(.black, for: .normal)
return node
}()
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
self.view.subviews {
labelWelcome
emailTextField
passwordTextField
button
}
self.view.layout {
100
|-100-labelWelcome-100-|
40
|-40-emailTextField-40-| ~ 40
20
|-40-passwordTextField-40-| ~ 40
20
|-button-| ~ 80
}
}
}
엄청 대공사일줄 알았는데 너무 쉽게 끝났네요 ㅋㅋㅋ.. 다음에는 AsyncDisplayKit이라 불렸던 Texture 라이브러리에 대해서 소개해보도록 하겠습니다~!