Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20190117_iOSLT_CBLinSwift.pdf
Search
shtnkgm
January 17, 2019
Programming
0
93
20190117_iOSLT_CBLinSwift.pdf
Code-Based Layout in Swift
shtnkgm
January 17, 2019
Tweet
Share
More Decks by shtnkgm
See All by shtnkgm
Combine入門
shtnkgm
2
290
Property Wrappers
shtnkgm
0
350
Saliency Detection
shtnkgm
0
49
パフォーマンス改善とユニットテスト
shtnkgm
4
1.6k
iOSのコードベースレイアウト
shtnkgm
2
770
SwiftとFunctional Reactive Programming
shtnkgm
0
170
20180710_iOSLT_iOSでDarkModeを実装する
shtnkgm
0
92
20180410_iOSLT_SwiftとProtocol-OrientedProgramming
shtnkgm
0
110
20180220_iOSLT_Swiftとオブジェクト間の通知のパターン
shtnkgm
0
130
Other Decks in Programming
See All in Programming
iOSエンジニア向けの英語学習アプリを作る!
yukawashouhei
0
180
Signals & Resource API in Angular: 3 Effective Rules for Your Architecture @BASTA 2025 in Mainz
manfredsteyer
PRO
0
100
Breaking Up with Big ViewModels — Without Breaking Your Architecture (droidcon Berlin 2025)
steliosf
PRO
1
340
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
340
CSC509 Lecture 06
javiergs
PRO
0
240
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
23
12k
Back to the Future: Let me tell you about the ACP protocol
terhechte
0
130
Model Pollution
hschwentner
1
180
overlayPreferenceValue で実現する ピュア SwiftUI な AdMob ネイティブ広告
uhucream
0
110
ポスターセッション: 「まっすぐ行って、右!」って言ってラズパイカーを動かしたい 〜生成AI × Raspberry Pi Pico × Gradioの試作メモ〜
komofr
0
980
Swift Concurrency - 状態監視の罠
objectiveaudio
2
470
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
370
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1032
460k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A better future with KSS
kneath
239
17k
Writing Fast Ruby
sferik
629
62k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Measuring & Analyzing Core Web Vitals
bluesmoon
9
610
It's Worth the Effort
3n
187
28k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
Transcript
CBL in Swift Shota Nakagami
Talking about "CBL"
!
CBL Code-Based layout
I ! Code-Based Layout
How to layout ? 4 StoryBoard 4 XIB 4 Code-BasedʢProgrammaticallyʣ
Storyboard & XIB features 4 Ease of use ☺ 4
Segue ☺ 4 Visual (multi device screen size) 4 Constraint Checker ☺ 4 Non-Reusable " 4 Hard to Resolve Conflict " 4 Hard to review (XML) "
Testable? ! class ViewController: UIViewController { let dependency: Dependency //
Dependency Injection with Initializer init(dependency: Dependency) { self.dependency = dependency } } 4 NG: Storyboard ☠ no initializer... 4 OK: XIB " 4 OK: CBL "
CBL features 4 Reusable ☺ 4 Speedy ☺ 4 Easy
to Resolve Conflict ☺ 4 Easy to Review ☺ 4 Cost of Learning " 4 Non-Visual "
StoryBoard XIB Codebased ! Segue ✅ # Visual ✅ ✅
$ Compiler Check ✅ ✅ % Testable (DI) ✅ ✅ ♻ Reusable ✅ ' Less Conflict ✅ ( Reviewable ✅
6 Tips for CBL
1. Initialization Closure 2. "Then" 3. Custom View Class 4.
lazy var 5. "SnapKit" 6. UIStackView
class ViewController: UIViewController { let priceLabel = UILabel() let imageView
= UIImageView() override func viewDidLoad() { super.viewDidLoad() priceLabel.numberOfLines = 2 priceLabel.textColor = .red priceLabel.font = .boldSystemFont(ofSize: 14) imageView.contentMode = .scaleAspectFill imageView.clipsToBounds = true imageView.layer.cornerRadius = 4 // addSubview, AutoLayout... } }
messy viewDidLoad...
1. Initialization Closure
class ViewController: UIViewController { let priceLabel: UILabel = { let
label = UILabel() label.numberOfLines = 2 label.textColor = .red label.font = .boldSystemFont(ofSize: 14) return label }() let imageView: UIImageView = { let view = UIImageView() view.contentMode = .scaleAspectFill view.clipsToBounds = true view.layer.cornerRadius = 4 return view }() override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }
viewDidLoad is clean, but...
class ViewController: UIViewController { let priceLabel: UILabel = { //
type annotation let label = UILabel() // renaming label.numberOfLines = 2 label.textColor = .red label.font = .boldSystemFont(ofSize: 14) return label // return }() let imageView: UIImageView = { // type annotation let view = UIImageView() // renaming view.contentMode = .scaleAspectFill view.clipsToBounds = true view.layer.cornerRadius = 4 return view // return }() override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }
2. "Then" https://github.com/devxoul/Then
class ViewController: UIViewController { let priceLabel = UILabel().then { $0.numberOfLines
= 2 $0.textColor = .red $0.font = .boldSystemFont(ofSize: 14) } let imageView = UIImageView().then { $0.contentMode = .scaleAspectFill $0.clipsToBounds = true $0.layer.cornerRadius = 4 } override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }
3. Custom View Class
class ViewController: UIViewController { let priceLabel = PriceLabel() let imageView
= ItemImageView() override func viewDidLoad() { super.viewDidLoad() } }
private let captureButton = CaptureButton().then { $0.onTapped = { [weak
self] in self?.camera.capture() } }
private let captureButton = CaptureButton().then { $0.onTapped = { [weak
self] in // Compile Error self?.camera.capture() // Compile Error } }
4. lazy var
private lazy var captureButton = CaptureButton().then { $0.onTapped = {
[weak self] in self?.camera.capture() // OK } }
Codebased AutoLayout
NSLayoutAnchor ? // addSubview, AutoLayout... view.addSubview(button) button.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true button.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active
= true button.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true button.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true
!
5. "SnapKit" https://github.com/SnapKit/SnapKit
view.addSubview(button) // button.leadingAnchor.constraintEqualToAnchor(view.leadingAnchor).active = true // button.trailingAnchor.constraintEqualToAnchor(view.trailingAnchor).active = true //
button.topAnchor.constraintEqualToAnchor(view.topAnchor).active = true // button.bottomAnchor.constraintEqualToAnchor(view.bottomAnchor).active = true button.snp.makeConstraints { $0.edges.equalToSuperview() }
// readable button.snp.makeConstraints { $0.center.equalToSuperview() $0.size.equalTo(CGSize(width: 64, height: 64)) }
// Support Safe Area tableView.snp.makeConstraints { $0.top.bottom.equalTo(view.safeAreaLayoutGuide) $0.leading.trailing.equalToSuperview() }
6. UIStackView
UIStackView = Stack "Layouted" View Less Constraints ! stackView.addArrangedSubview(label) stackView.addArrangedSubview(imageView)
stackView.addArrangedSubview(button) label.snp.makeConstraints { $0.height.equalTo(20) } button.snp.makeConstraints { $0.height.equalTo(60) }
Summary
CBL: Code-Based layout 4 Testable, Speedy, and Reusable 4 Use
"6 Tips" to clean code When to Use 4 Use CBL for simple layout 4 Use XIB for complicated layout 4 Use StoryBoard for segue