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
iOSのコードベースレイアウト
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
shtnkgm
January 31, 2019
Programming
2
800
iOSのコードベースレイアウト
Mobile Act TOKYO #5
https://mobileact.connpass.com/event/114398
shtnkgm
January 31, 2019
Tweet
Share
More Decks by shtnkgm
See All by shtnkgm
Combine入門
shtnkgm
2
300
Property Wrappers
shtnkgm
0
360
Saliency Detection
shtnkgm
0
73
パフォーマンス改善とユニットテスト
shtnkgm
4
1.7k
20190117_iOSLT_CBLinSwift.pdf
shtnkgm
0
110
SwiftとFunctional Reactive Programming
shtnkgm
0
190
20180710_iOSLT_iOSでDarkModeを実装する
shtnkgm
0
110
20180410_iOSLT_SwiftとProtocol-OrientedProgramming
shtnkgm
0
120
20180220_iOSLT_Swiftとオブジェクト間の通知のパターン
shtnkgm
0
150
Other Decks in Programming
See All in Programming
AIエージェント、”どう作るか”で差は出るか? / AI Agents: Does the "How" Make a Difference?
rkaga
4
2k
組織で育むオブザーバビリティ
ryota_hnk
0
180
インターン生でもAuth0で認証基盤刷新が出来るのか
taku271
0
190
ぼくの開発環境2026
yuzneri
0
240
AIによる高速開発をどう制御するか? ガードレール設置で開発速度と品質を両立させたチームの事例
tonkotsuboy_com
7
2.4k
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
petamoriken
0
200
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
310
Fluid Templating in TYPO3 14
s2b
0
130
izumin5210のプロポーザルのネタ探し #tskaigi_msup
izumin5210
1
130
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
manfredsteyer
PRO
0
130
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
mackey0225
3
380
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
Featured
See All Featured
For a Future-Friendly Web
brad_frost
182
10k
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
madoxten
57
50k
Being A Developer After 40
akosma
91
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.7k
Building a A Zero-Code AI SEO Workflow
portentint
PRO
0
320
Agile that works and the tools we love
rasmusluckow
331
21k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Writing Fast Ruby
sferik
630
62k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
katarinadahlin
PRO
0
3.4k
Impact Scores and Hybrid Strategies: The future of link building
tamaranovitovic
0
200
Ruling the World: When Life Gets Gamed
codingconduct
0
140
The Straight Up "How To Draw Better" Workshop
denniskardys
239
140k
Transcript
iOSͷίʔυϕʔεϨΠΞτ Mobile Act TOKYO #5 @shtnkgm
iOS Engineer Shota Nakagami @shtnkgm
͢͜ͱ • iOSͷUIϨΠΞτख๏ͷൺֱ • ίʔυϕʔεϨΠΞτ Tips
UIͷϨΠΞτख๏ • ϓϩάϥϜͰهड़ʢίʔυϕʔεʣ • Storyboard • Interface BuilderʢXIBʣ
ͦΕͧΕͷಛ
StoryboardͱXIBͷಛ
ྑ͍ͱ͜Ζ • ෳͷը໘αΠζͰذɺݟ͑ํνΣοΫʢSize Classesʣ • Ϗϧυલʹ੩తͳ੍ͷݕࠪ • Storyboardͷ߹Segue͕͑Δ
ΠϚΠνͳͱ͜Ζ • ίϐϖɺΧελϜΫϥεԽͳͲͷ࠶ར༻ɾमਖ਼͕ͮ͠Β͍ • XMLͳͷͰίϯϑϦΫτͷղফɺίʔυϨϏϡʔ͕͍͠ • GUIͰΆͪΆͪ͠ͳ͍ͱԿ͕ઃఆͯ͋͠Δͷ͔ٯʹΘ͔Βͳ͍
ίʔυϕʔεϨΠΞτͷಛ
ྑ͍ͱ͜Ζ • ίϐϖίʔυஔͳͲͰεϐʔσΟʹ࠶ར༻ɾमਖ਼͕Մೳ • ίϯϑϦΫτͷղফϨϏϡʔ͕͍͢͠ • Կ͕ઃఆͯ͋͠Δͷ͔Ұཡੑ͕͋Δ
ΠϚΠνͳͱ͜Ζ • UIKitͷϓϩύςΟϥΠϑαΠΫϧʹؔ͢Δ͕ࣝඞཁ • ࣮ߦ͢Δ·Ͱݟ͑ํ૾
Dependency Injectionͷҧ͍
Storyboard // NG: ίϯετϥΫλΠϯδΣΫγϣϯෆՄ let viewController = ViewController(dependency: Dependency()) //
OK: ϓϩύςΟΠϯδΣΫγϣϯʹͳΒՄ let storyboard = UIStoryboard(name: "ViewController", bundle: nil) let viewController = storyboard.instantiateInitialViewController() viewController.dependency = Dependency()
XIB / ίʔυϕʔε class ViewController: UIViewController { let dependency: Dependency
init(dependency: Dependency) { self.dependency = dependency super.init(nibName: nil, bundle: nil) } required init?(coder aDecoder: NSCoder) { fatalError("init(coder:) has not been implemented") } }
ൺֱ߲ Storyboard XIB ίʔυϕʔε ➡ Segue͕͑Δ ✅ # GUIͰݟͯΘ͔Δ ✅
✅ $ αΠζذ͕༰қ ✅ ✅ % ੩తνΣοΫ ✅ ✅ &ίϯετϥΫλDI ✅ ✅ ♻ ࠶ར༻ੑ ✅ ( ίϯϑϦΫτੑ ✅ ) ϨϏϡʔ͢͠͞ ✅
I ! Code-based Laout
ίʔυϕʔεϨΠΞτTipsʢ6ͭʣ
1. Initialization Closure
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... } }
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... } }
2. Then
class ViewController: UIViewController { let priceLabel: UILabel = { //
ܕΞϊςʔγϣϯ let label = UILabel() // ϩʔΧϧείʔϓͰͷ໋໊ label.numberOfLines = 2 // label label.textColor = .red // label label.font = .boldSystemFont(ofSize: 14) // label return label // ੜͨ͠Πϯελϯεͷreturn }() let imageView: UIImageView = { // ܕΞϊςʔγϣϯ let view = UIImageView() // ϩʔΧϧείʔϓͰͷ໋໊ view.contentMode = .scaleAspectFill // view view.clipsToBounds = true // view view.layer.cornerRadius = 4 // view return view // ੜͨ͠Πϯελϯεͷreturn }() override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }
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... } }
Thenͷ࣮ public protocol Then {} extension Then where Self: AnyObject
{ public func then(_ block: (Self) throws -> Void) rethrows -> Self { try block(self) return self } }
3. ΧελϜΫϥε
ΧελϜΫϥεͰ࠶ར༻ੑΛߴΊɺΑΓγϯϓϧʹ class ViewController: UIViewController { let priceLabel = PriceLabel() //
ΧελϜΫϥεԽ let imageView = ItemImageView() // ΧελϜΫϥεԽ override func viewDidLoad() { super.viewDidLoad() // addSubview, AutoLayout... } }
4. lazy var
private let captureButton = CaptureButton().then { $0.onTapped = { [weak
self] in // selfࢀর͍ͨ͠ self?.camera.capture() // selfࢀর͍ͨ͠ } }
private let captureButton = CaptureButton().then { $0.onTapped = { [weak
self] in // ίϯύΠϧΤϥʔ self?.camera.capture() // ίϯύΠϧΤϥʔ } }
lazy varͰॳظԽԆɺselfΛࢀরՄʹ private lazy var captureButton = CaptureButton().then { $0.onTapped
= { [weak self] in self?.camera.capture() // OK } }
5. SnapKit / PureLayout
NSLayoutAnchorʢiOS9ʙʣ 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
!
SnapKit / PureLayout // SnapKit button.snp.makeConstraints { $0.edges.equalToSuperview() } //
PureLaout button.autoPinEdgesToSuperviewEdges()
// ಡΈ͍͢ button.snp.makeConstraints { $0.center.equalToSuperview() // Ϗϡʔͷத৺ʹ $0.size.equalTo(CGSize(width: 64, height:
64)) // αΠζࢦఆ } // Safe AreaʹϨΠΞτΛషΓ͍͢ tableView.snp.makeConstraints { $0.top.bottom.equalTo(view.safeAreaLayoutGuide) // ্ԼSafe Areaʹ $0.leading.trailing.equalToSuperview() // ࠨӈϏϡʔʹ }
☺
6. UIStackView
UIStackViewͰϨΠΞτ͢Δ stackView.addArrangedSubview(label) stackView.addArrangedSubview(imageView) stackView.addArrangedSubview(button) label.snp.makeConstraints { $0.height.equalTo(20) } button.snp.makeConstraints {
$0.height.equalTo(60) }
·ͱΊ • ίʔυϕʔεϨΠΞτͰTipsΛ͑؆͔ܿͭεϐʔσΟ • Ͳͷख๏Ͱ͖ΔΑ͏ʹ͓͖ͯ͠ɺ͍͚͍ͨ
αϯϓϧίʔυ github.com/shtnkgm/ iOSUILayoutMethods
͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ