1-6. 코드베이스 UI
(a) 코드 베이스 UI
- 스토리보드 vs 코드베이스
- 코드베이스: 스토리보드 없이 코드로만 UI 구성.
- 장점: 코드 리뷰 시 가독성 향상.
- 단점: 실행해서 확인해야 함.
- 스토리보드 삭제
- Main.storyboard 삭제.
- Info.plist에서 Storyboard Name 항목 삭제.
- Build Settings에서 UIKit Main Storyboard File Base Name 항목 삭제.
- SceneDelegate.swift에서 루트 뷰 설정:
class SceneDelegate: UIResponder, UIWindowSceneDelegate {
var window: UIWindow?
func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
guard let windowScene = (scene as? UIWindowScene) else { return }
let window = UIWindow(windowScene: windowScene)
window.rootViewController = ViewController()
window.makeKeyAndVisible()
self.window = window
}
}
- NSLayoutConstraint
- Constraint를 사용하여 뷰의 레이아웃을 정의.
- NSLayoutConstraint.activate([제약조건들])로 제약조건 활성화.
(b) UIKit 코드 베이스 예제
- UILabel
import UIKit
class ViewController: UIViewController {
let label = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
label.text = "안녕하세요"
label.textColor = .black
label.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(label)
NSLayoutConstraint.activate([
label.widthAnchor.constraint(equalToConstant: 80),
label.heightAnchor.constraint(equalToConstant: 40),
label.centerXAnchor.constraint(equalTo: view.centerXAnchor),
label.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
}
}
- UIButton
import UIKit
class ViewController: UIViewController {
let button = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
button.setTitle("Click", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .red
button.translatesAutoresizingMaskIntoConstraints = false
button.layer.cornerRadius = 10
view.addSubview(button)
NSLayoutConstraint.activate([
button.widthAnchor.constraint(equalToConstant: 120),
button.heightAnchor.constraint(equalToConstant: 60),
button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
button.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
}
}
- UIImageView
import UIKit
class ViewController: UIViewController {
let imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
imageView.image = UIImage(named: "cat")
imageView.backgroundColor = .black
imageView.contentMode = .scaleAspectFit
imageView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(imageView)
NSLayoutConstraint.activate([
imageView.widthAnchor.constraint(equalToConstant: 300),
imageView.heightAnchor.constraint(equalToConstant: 300),
imageView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
])
}
}
(c) SnapKit
- SnapKit
- 코드베이스 UI 작성을 간결하게 도와주는 서드파티 라이브러리.
- Swift Package Manager를 사용해 프로젝트에 추가 가능.
- UILabel with SnapKit
import UIKit
import SnapKit
class ViewController: UIViewController {
let label = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
label.text = "안녕하세요"
label.textColor = .black
view.addSubview(label)
label.snp.makeConstraints {
$0.width.equalTo(80)
$0.height.equalTo(40)
$0.centerX.equalToSuperview()
$0.centerY.equalToSuperview()
}
}
}
- UIButton with SnapKit
import UIKit
import SnapKit
class ViewController: UIViewController {
let button = UIButton()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
button.setTitle("Click", for: .normal)
button.setTitleColor(.white, for: .normal)
button.backgroundColor = .red
button.layer.cornerRadius = 10
button.addTarget(self, action: #selector(buttonClicked), for: .touchDown)
view.addSubview(button)
button.snp.makeConstraints {
$0.width.equalTo(120)
$0.height.equalTo(60)
$0.centerX.equalToSuperview()
$0.centerY.equalToSuperview()
}
}
@objc
private func buttonClicked() {
print("버튼이 클릭되었음.")
}
}
- UIImageView with SnapKit
import UIKit
import SnapKit
class ViewController: UIViewController {
let imageView = UIImageView()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
imageView.image = UIImage(named: "cat")
imageView.backgroundColor = .black
imageView.contentMode = .scaleAspectFit
view.addSubview(imageView)
imageView.snp.makeConstraints {
$0.width.equalTo(300)
$0.height.equalTo(300)
$0.centerX.equalToSuperview()
$0.centerY.equalToSuperview()
}
}
}
- 응용 예제
- UIImageView와 UILabel 배치 :
import UIKit
import SnapKit
class ViewController: UIViewController {
let imageView = UIImageView()
let label = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
imageView.image = UIImage(named: "cat")
imageView.backgroundColor = .black
imageView.contentMode = .scaleAspectFit
label.text = "고양이"
label.textColor = .black
label.font = UIFont.boldSystemFont(ofSize: 30)
[imageView, label]
.forEach { view.addSubview($0) }
imageView.snp.makeConstraints {
$0.width.equalTo(300)
$0.height.equalTo(300)
$0.centerX.equalToSuperview()
$0.centerY.equalToSuperview()
}
label.snp.makeConstraints {
$0.centerX.equalToSuperview()
$0.top.equalTo(imageView.snp.bottom).offset(16)
}
}
}
- 복합 UI 구성 :
import UIKit
import SnapKit
class ViewController: UIViewController {
let imageView = UIImageView()
let imageView2 = UIImageView()
let label = UILabel()
let label2 = UILabel()
override func viewDidLoad() {
super.viewDidLoad()
configureUI()
}
private func configureUI() {
view.backgroundColor = .white
imageView.image = UIImage(named: "cat")
imageView.backgroundColor = .black
imageView.contentMode = .scaleAspectFit
label.text = "고양이"
label.textColor = .black
label.font = UIFont.boldSystemFont(ofSize: 30)
imageView2.image = UIImage(named: "dog")
imageView2.backgroundColor = .black
imageView2.contentMode = .scaleAspectFit
label2.text = "강아지"
label2.textColor = .black
label2.font = UIFont.boldSystemFont(ofSize: 30)
[imageView, label, imageView2, label2]
.forEach { view.addSubview($0) }
imageView.snp.makeConstraints {
$0.width.equalTo(160)
$0.height.equalTo(160)
$0.leading.equalToSuperview().inset(16)
$0.centerY.equalToSuperview()
}
label.snp.makeConstraints {
$0.centerX.equalTo(imageView.snp.centerX)
$0.top.equalTo(imageView.snp.bottom).offset(16)
}
imageView2.snp.makeConstraints {
$0.width.equalTo(160)
$0.height.equalTo(160)
$0.trailing.equalToSuperview().inset(16)
$0.centerY.equalToSuperview()
}
label2.snp.makeConstraints {
$0.centerX.equalTo(imageView2.snp.centerX)
$0.top.equalTo(imageView2.snp.bottom).offset(16)
}
}
}
- UI 디버깅 팁
- 런타임 중 뷰 계층구조를 파악하여 디버깅 가능.
반응형
'TIL (Today I Learned)' 카테고리의 다른 글
[TIL] 2024. 06. 26 (0) | 2024.06.26 |
---|---|
[TIL] 2024. 06. 25 (0) | 2024.06.25 |
[TIL] 2024. 06. 21 (0) | 2024.06.21 |
[TIL] 2024. 06. 20 (0) | 2024.06.20 |
[TIL] 2024. 06. 19 (0) | 2024.06.19 |