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.5k
IBとUIの適度な階層化の提案
IB上でUIの適度な階層化をすることによって、標準の仕組みでより簡単に扱えるような設計を目指しました。
naru-jpn
March 28, 2018
Tweet
Share
More Decks by naru-jpn
See All by naru-jpn
配信アプリのためのリアルタイムプッシュ通知ぼかしの夢
narujpn
3
900
PiPを応用した配信コメントバー機能の開発秘話と技術の詳解 / pip_streaming_comment_bar
narujpn
3
4.2k
Updating an App to Use Swift Concurrency 解説
narujpn
2
340
PiP で実現するミラティブの配信コメントバー / pip-streaming-comment-bar
narujpn
0
1.2k
App Extension のスタックトレース情報からクラッシュを解析/集計する / Analyzing app extension's stack trace
narujpn
3
1.5k
ミラティブとWebRTC - WebRTC framework の中身を覗いてみよう / WebRTC framework AudioUnit Processing
narujpn
1
2.2k
CoreML3のオンデバイストレーニングでつくる母音推定
narujpn
0
440
AltConfと周辺の歩き方
narujpn
0
2k
エンジニア経験を活かしたスクラムマスターとして 開発チームとプロダクトを成長させる
narujpn
1
410
Other Decks in Technology
See All in Technology
今日からあなたもGeminiを好きになる
subaruhello
1
640
怖くない!GritQLでBiomeプラグインを作ろうよ
pal4de
1
130
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.5k
2025-07-25 NOT A HOTEL TECH TALK ━ スマートホーム開発の最前線 ━ SOFTWARE
wakinchan
0
160
Building GoReleaser - from shell script to paid product
caarlos0
0
290
2025/07/22_家族アルバム みてねのCRE における生成AI活用事例
masartz
2
130
Expertise as a Service via MCP
yodakeisuke
1
150
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
100
PHPでResult型やってみよう
higaki_program
0
200
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
180
AI人生苦節10年で会得したAIがやること_人間がやること.pdf
shibuiwilliam
1
120
AWS表彰プログラムとキャリアについて
naoki_0531
1
130
Featured
See All Featured
Embracing the Ebb and Flow
colly
86
4.8k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Visualization
eitanlees
146
16k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.6k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Git: the NoSQL Database
bkeepers
PRO
431
65k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
Speed Design
sergeychernyshev
32
1k
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ͷదͳ֊ԽͷఏҊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !