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
890
PiPを応用した配信コメントバー機能の開発秘話と技術の詳解 / pip_streaming_comment_bar
narujpn
3
4.1k
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
データプラットフォーム技術におけるメダリオンアーキテクチャという考え方/DataPlatformWithMedallionArchitecture
smdmts
5
640
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
570
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
230
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
280
"サービスチーム" での技術選定 / Making Technology Decisions for the Service Team
kaminashi
1
150
フィンテック養成勉強会#54
finengine
0
180
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
400
AIの最新技術&テーマをつまんで紹介&フリートークするシリーズ #1 量子機械学習の入門
tkhresk
0
140
“社内”だけで完結していた私が、AWS Community Builder になるまで
nagisa53
1
400
OpenHands🤲にContributeしてみた
kotauchisunsun
1
460
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
190
Featured
See All Featured
Scaling GitHub
holman
459
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.7k
The Language of Interfaces
destraynor
158
25k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
A better future with KSS
kneath
239
17k
The Cult of Friendly URLs
andyhume
79
6.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
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ͷదͳ֊ԽͷఏҊ ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ !