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
84
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
280
Property Wrappers
shtnkgm
0
330
Saliency Detection
shtnkgm
0
41
パフォーマンス改善とユニットテスト
shtnkgm
4
1.6k
iOSのコードベースレイアウト
shtnkgm
2
760
SwiftとFunctional Reactive Programming
shtnkgm
0
170
20180710_iOSLT_iOSでDarkModeを実装する
shtnkgm
0
85
20180410_iOSLT_SwiftとProtocol-OrientedProgramming
shtnkgm
0
100
20180220_iOSLT_Swiftとオブジェクト間の通知のパターン
shtnkgm
0
120
Other Decks in Programming
See All in Programming
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
33k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
200
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
420
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
1
15k
技術同人誌をMCP Serverにしてみた
74th
1
630
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
690
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
510
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
NPOでのDevinの活用
codeforeveryone
0
790
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
230
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
750
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Site-Speed That Sticks
csswizardry
10
680
Statistics for Hackers
jakevdp
799
220k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
52k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Unsuck your backbone
ammeep
671
58k
We Have a Design System, Now What?
morganepeng
53
7.7k
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