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
IBとUIの適度な階層化の提案
Search
naru-jpn
March 28, 2018
Technology
3
1.4k
IBとUIの適度な階層化の提案
IB上でUIの適度な階層化をすることによって、標準の仕組みでより簡単に扱えるような設計を目指しました。
naru-jpn
March 28, 2018
Tweet
Share
More Decks by naru-jpn
See All by naru-jpn
配信アプリのためのリアルタイムプッシュ通知ぼかしの夢
narujpn
3
840
PiPを応用した配信コメントバー機能の開発秘話と技術の詳解 / pip_streaming_comment_bar
narujpn
3
3.9k
Updating an App to Use Swift Concurrency 解説
narujpn
2
300
PiP で実現するミラティブの配信コメントバー / pip-streaming-comment-bar
narujpn
0
1.1k
App Extension のスタックトレース情報からクラッシュを解析/集計する / Analyzing app extension's stack trace
narujpn
3
1.4k
ミラティブとWebRTC - WebRTC framework の中身を覗いてみよう / WebRTC framework AudioUnit Processing
narujpn
1
2.1k
CoreML3のオンデバイストレーニングでつくる母音推定
narujpn
0
410
AltConfと周辺の歩き方
narujpn
0
1.9k
エンジニア経験を活かしたスクラムマスターとして 開発チームとプロダクトを成長させる
narujpn
1
390
Other Decks in Technology
See All in Technology
ABWG2024採択者が語るエンジニアとしての自分自身の見つけ方〜発信して、つながって、世界を広げていく〜
maimyyym
1
210
AWS Well-Architected Frameworkで学ぶAmazon ECSのセキュリティ対策
umekou
2
150
2/18 Making Security Scale: メルカリが考えるセキュリティ戦略 - Coincheck x LayerX x Mercari
jsonf
0
250
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
550
実は強い 非ViTな画像認識モデル
tattaka
3
1.4k
AIエージェント入門
minorun365
PRO
33
19k
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
410
手を動かしてレベルアップしよう!
maruto
0
250
AIエージェント時代のエンジニアになろう #jawsug #jawsdays2025 / 20250301 Agentic AI Engineering
yoshidashingo
9
4k
E2Eテスト自動化入門
devops_vtj
1
120
【内製開発Summit 2025】イオンスマートテクノロジーの内製化組織の作り方/In-house-development-summit-AST
aeonpeople
2
1.1k
4th place solution Eedi - Mining Misconceptions in Mathematics
rist
0
150
Featured
See All Featured
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Large-scale JavaScript Application Architecture
addyosmani
511
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
129
19k
Six Lessons from altMBA
skipperchong
27
3.6k
Rails Girls Zürich Keynote
gr2m
94
13k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Adopting Sorbet at Scale
ufuk
75
9.2k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Building Adaptive Systems
keathley
40
2.4k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Transcript
IBͱUIͷదͳ֊ԽͷఏҊ 2018.3.28 AKIBA.swift × ΤϨΧ ίʔυϨΠΞτษڧձ Naruki Chigira @timers-inc.
Lib arXiv arxiv.org ʹߘ͞ΕΔจΛӾཡɾอଘɾڞ༗͢ΔͨΊͷΞϓϦ
No Interface Builder No Auto Layout iPhone & iPad (&
iPhoneX) Portrait & Landscape
class ApplicationStyle { static let isiPhone = UIDevice.current.userInterfaceIdiom == .phone
class Category { static func TableViewCellRowHeight() -> CGFloat { if isiPhone { return 50.0 } else { return 60.0 } } …
https://github.com/naru-jpn/LayoutXML LayoutXML Android styled XML template engine for iOS written
in Swift.
https://github.com/naru-jpn/LayoutXML
https://github.com/naru-jpn/LayoutXML
https://github.com/naru-jpn/LayoutXML
https://github.com/naru-jpn/LayoutXML $ pod try LayoutXML
XML͔Βੜ͞ΕΔϏϡʔͷ֊ߏ
http://grepcode.com/.../LinearLayout.java grepcode.com LinearLayout View Λܧঝ͍ͯ͠Δ
None
֊ߏ͕͔Ε͍ͯΔͷͰ ֤ʑͷ෦ͷϨΠΞτಠཱʹܭࢉ͕Ͱ͖Δ ᶃ ᶄ ᶅ
લఏ͓ΘΓ
ຊ
ϏϡʔίϯτϩʔϥʹԿΛ͍͔ͤͨ͞ʁ
ϏϡʔͷίϯτϩʔϧΛ͍ͤͨ͞
Ͱ͖ΕϏϡʔͷίϯτϩʔϧʮ͚ͩʯ͍ͤͨ͞
͖ͬ͞ͷxmlͷྫΛࢥ͍ग़ͯ͠ΈΔ
https://github.com/naru-jpn/LayoutXML
https://github.com/naru-jpn/LayoutXML
ಡΈࠐΈ3ߦɺ෦ใͷߋ৽4ߦʂ
Ͱո͍͠ϥΠϒϥϦ͍ͨ͘ͳ͍
ʮ֊ߏʯ͕ΩʔʹͳΔͷͰ…!
Ծʹɺ࣍ͷΑ͏ͳ࣮Λߟ͑ͯΈ·͠ΐ͏
ίʔυϨΠΞτ ҎԼͷจষΛ֬͝ೝ͍ͩ͘͞ ͋ͳͨInterface BuilderΛ ͍͚ͬͯ·ͤΜ ͍ɺΘ͔Γ·ͨ͠ ҙࣄ߲
ίʔυϨΠΞτ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ҙࣄ߲
ίʔυϨΠΞτ ҎԼͷจষΛ֬͝ೝ͍ͩ͘͞ ͋ͳͨInterface BuilderΛ ͍͚ͬͯ·ͤΜ ͍ɺΘ͔Γ·ͨ͠ ҙࣄ߲ ίʔυϨΠΞτ ͋Γ͕ͱ͏͍͟͝·ͨ͠ ҙࣄ߲
Ͳ͏࡞Γ·͔͢ʁ
·ͣϑϥοτʹ࡞ͬͯΈ·͠ΐ͏
FlattenViewController
class FlattenViewController: UIViewController, Instantiatable { @IBOutlet weak var titleLabel: UILabel!
@IBOutlet weak var messageLabel: UILabel! @IBOutlet weak var confirmLabel: UILabel! @IBOutlet weak var confirmButton: UIButton! @IBOutlet weak var notesButton: UIButton! @IBAction func onAcceptButtonClicked(sender: Any) { messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠" // ϨΠΞτͷߋ৽... } }
ϨΠΞτͷߋ৽͕େม
ಈతͳ༷͕͞Βʹ૿͑ͨΒ…?
֊ԽΛͯ͠ΈΑ͏
LayeredViewController
LayeredViewController LayeredHeaderView LayeredBodyView LayeredFooterView
class LayeredViewController: UIViewController, Instantiatable { @IBOutlet weak var header: LayeredHeaderView!
@IBOutlet weak var body: LayeredBodyView! @IBOutlet weak var footer: LayeredFooterView! } ֤ΧελϜϏϡʔͷ࡞Γํɺ͍ํΛΈ͍͖ͯ·͠ΐ͏
class LayeredHeaderView: UIView { @IBOutlet weak var titleLabel: UILabel! @IBOutlet
weak var messageLabel: UILabel! /// ঝ͞Εͨ func accept() { messageLabel.text = "͋Γ͕ͱ͏͍͟͝·ͨ͠" } }
UIViewΛՃɺCustom Class ʹఆٛͨ͠ϏϡʔͷΫϥεΛࢦఆ͢Δ Tips1 ΧελϜϏϡʔͷࢦఆ
Outlets ʹΧελϜϏϡʔͷϓϩύςΟ͕ݟ͑ΔͷͰɺܨ͙ Tips1 ΧελϜϏϡʔͷࢦఆ
class LayeredBodyView: UIView { @IBOutlet weak var messageLabel: UILabel! @IBOutlet
weak var button: UIButton! @IBOutlet weak var zeroHeightConstraint: NSLayoutConstraint! /// ։ด var isOpen: Bool = true { didSet { zeroHeightConstraint.isActive = !isOpen } } }
0 A B C Priority: A, B < C ੍CͷΞΫςΟϒɾඇΞΫςΟϒͷΓସ͑ʹΑͬͯදࣔɾඇද͕ࣔͰ͖Δ
100 100 Tips2 ੍ͷߏԽ
class LayeredFooterView: UIView { @IBOutlet weak var notesButon: UIButton! }
class LayeredViewController: UIViewController, Instantiatable { @IBOutlet weak var header: LayeredHeaderView!
@IBOutlet weak var body: LayeredBodyView! @IBOutlet weak var footer: LayeredFooterView! @IBAction func onAcceptButtonClicked(sender: Any) { header.accept() body.isOpen = false } } 13ߦʂ
ಈతͳ༷͕૿͑ͯฏؾͳؾ͕͠·ͤΜ͔ʁ
·ͱΊ ʮదͳ֊ԽʯʹΑͬͯ ɾ໌֬ͳػೳΛ࣋ͬͨΧελϜϏϡʔ͕࡞͘͢͠ͳΔ ɾ੍͕ߏԽ͞Εͯར༻͘͢͠ͳΔ ɾϏϡʔίϯτϩʔϥͰͷॲཧΛநԽ͘͢͠ͳΔ
IBͱUIͷదͳ֊ԽͷఏҊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !