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
950
PiPを応用した配信コメントバー機能の開発秘話と技術の詳解 / pip_streaming_comment_bar
narujpn
3
4.4k
Updating an App to Use Swift Concurrency 解説
narujpn
2
350
PiP で実現するミラティブの配信コメントバー / pip-streaming-comment-bar
narujpn
0
1.2k
App Extension のスタックトレース情報からクラッシュを解析/集計する / Analyzing app extension's stack trace
narujpn
3
1.6k
ミラティブとWebRTC - WebRTC framework の中身を覗いてみよう / WebRTC framework AudioUnit Processing
narujpn
1
2.2k
CoreML3のオンデバイストレーニングでつくる母音推定
narujpn
0
450
AltConfと周辺の歩き方
narujpn
0
2k
エンジニア経験を活かしたスクラムマスターとして 開発チームとプロダクトを成長させる
narujpn
1
420
Other Decks in Technology
See All in Technology
知覚とデザイン
rinchoku
1
600
20251027_マルチエージェントとは
almondo_event
1
460
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
3
540
Oracle Database@Google Cloud:サービス概要のご紹介
oracle4engineer
PRO
0
370
事業開発におけるDify活用事例
kentarofujii
5
1.5k
IoTLT@ストラタシスジャパン_20251021
norioikedo
0
140
OTEPsで知るOpenTelemetryの未来 / Observability Conference Tokyo 2025
arthur1
0
280
プロファイルとAIエージェントによる効率的なデバッグ / Effective debugging with profiler and AI assistant
ymotongpoo
1
320
re:Inventに行くまでにやっておきたいこと
nagisa53
0
540
20251029_Cursor Meetup Tokyo #02_MK_「あなたのAI、私のシェル」 - プロンプトインジェクションによるエージェントのハイジャック
mk0721
PRO
2
1.1k
AI連携の新常識! 話題のMCPをはじめて学ぶ!
makoakiba
0
120
[re:Inent2025事前勉強会(有志で開催)] re:Inventで見つけた人生をちょっと変えるコツ
sh_fk2
1
600
Featured
See All Featured
A better future with KSS
kneath
239
18k
Gamification - CAS2011
davidbonilla
81
5.5k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Docker and Python
trallard
46
3.6k
Done Done
chrislema
185
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Visualization
eitanlees
149
16k
Faster Mobile Websites
deanohume
310
31k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
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ͷదͳ֊ԽͷఏҊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !