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
87
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
340
Saliency Detection
shtnkgm
0
44
パフォーマンス改善とユニットテスト
shtnkgm
4
1.6k
iOSのコードベースレイアウト
shtnkgm
2
770
SwiftとFunctional Reactive Programming
shtnkgm
0
170
20180710_iOSLT_iOSでDarkModeを実装する
shtnkgm
0
87
20180410_iOSLT_SwiftとProtocol-OrientedProgramming
shtnkgm
0
110
20180220_iOSLT_Swiftとオブジェクト間の通知のパターン
shtnkgm
0
120
Other Decks in Programming
See All in Programming
新世界の理解
koriym
0
130
Vibe coding コードレビュー
kinopeee
0
400
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
390
DatadogのArchived LogsをSnowflakeで高速に検索する方法(Archive Searchでオワコンにならないことを祈って) / How to search Datadog Archived Logs quickly with Snowflake (hoping Datadog Archive Search doesn’t make this obsolete)
civitaspo
0
110
AIのメモリー
watany
12
1.2k
MCPで実現できる、Webサービス利用体験について
syumai
7
2.4k
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
280
Reactの歴史を振り返る
tutinoko
1
170
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
5
560
リッチエディターを安全に開発・運用するために
unachang113
1
350
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
11
2.8k
Featured
See All Featured
Code Review Best Practice
trishagee
69
19k
The Invisible Side of Design
smashingmag
301
51k
Rails Girls Zürich Keynote
gr2m
95
14k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
A designer walks into a library…
pauljervisheath
207
24k
Being A Developer After 40
akosma
90
590k
A Modern Web Designer's Workflow
chriscoyier
695
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
540
Building an army of robots
kneath
306
45k
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