iOS 코드로 UI 짜기 (Code UI)
목차
기본 방법
import UIKit
class ViewController: UIViewController {
let emailTextFieldView = UIView()
override func viewDidLoad() {
super.viewDidLoad()
makeUI()
}
func makeUI() {
// emailTextFieldView를 현재 뷰 컨트롤러의 기본 뷰에 추가.
view.addSubview(emailTextFieldView)
// emailTextFieldView의 배경색을 어두운 회색으로 설정.
emailTextFieldView.backgroundColor = .darkGray
// Auto Layout 제약 조건을 직접 설정하기 위해 autoresizing mask를 비활성화.
emailTextFieldView.translatesAutoresizingMaskIntoConstraints = false
// emailTextFieldView의 모서리를 둥글게 설정 (cornerRadius: 5).
emailTextFieldView.layer.cornerRadius = 5
// 둥근 모서리 외부에 그려지는 내용이 잘리지 않도록 설정.
emailTextFieldView.layer.masksToBounds = true
// emailTextFieldView의 왼쪽(anchor)을 부모 뷰의 왼쪽(anchor)과 30pt 거리로 고정.
emailTextFieldView
.leadingAnchor
.constraint(equalTo: view.leadingAnchor, constant: 30)
.isActive = true
// emailTextFieldView의 오른쪽(anchor)을 부모 뷰의 오른쪽(anchor)과 -30pt 거리로 고정.
emailTextFieldView
.trailingAnchor
.constraint(equalTo: view.trailingAnchor, constant: -30)
.isActive = true
// emailTextFieldView의 상단(anchor)을 부모 뷰의 상단(anchor)에서 200pt 아래로 고정.
emailTextFieldView
.topAnchor
.constraint(equalTo: view.topAnchor, constant: 200)
.isActive = true
// emailTextFieldView의 높이를 40pt로 고정.
emailTextFieldView
.heightAnchor
.constraint(equalToConstant: 40)
.isActive = true
}
}클로저 사용
//addSubview, autoLayout은 뷰생성뒤 이루어져야함 클로저 포함 불가
//let -> lazy var를 사용하여 .addSubview까지 클로저 넣는 것도 가능
import UIKit
class ViewController: UIViewController {
let emailTextFieldView: UIView = {
let view = UIView()
view.backgroundColor = .darkGray
view.translatesAutoresizingMaskIntoConstraints = false
view.layer.cornerRadius = 5
view.layer.masksToBounds = true
return view
}()
override func viewDidLoad() {
super.viewDidLoad()
makeUI()
}
func makeUI() {
view.addSubview(emailTextFieldView)
emailTextFieldView
.leadingAnchor
.constraint(equalTo: view.leadingAnchor, constant: 30)
.isActive = true
emailTextFieldView
.trailingAnchor
.constraint(equalTo: view.trailingAnchor, constant: -30)
.isActive = true
emailTextFieldView
.topAnchor
.constraint(equalTo: view.topAnchor, constant: 200)
.isActive = true
emailTextFieldView
.heightAnchor
.constraint(equalToConstant: 40)
.isActive = true
}
}