Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Taming AutoLayout

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Sergio Utama Sergio Utama
March 21, 2016
Programming
0
48

Taming AutoLayout

Initially presented during MyCocoaheads (https://www.facebook.com/groups/mycocoaheads/) meetup

Avatar for Sergio Utama

Sergio Utama

March 21, 2016
Tweet

More Decks by Sergio Utama

See All by Sergio Utama
Easy Way to Improve ReactNative
Avatar for Sergio Utama sergioutama
0
270
From try! Swift Tokyo 2017
Avatar for Sergio Utama sergioutama
0
64
Migrating to Swift 3
Avatar for Sergio Utama sergioutama
0
55
10 Things I learned while freelancing
Avatar for Sergio Utama sergioutama
0
59
iOS Video Player
Avatar for Sergio Utama sergioutama
0
90
Tribute to Mantle
Avatar for Sergio Utama sergioutama
0
30
Mobile Analytics
Avatar for Sergio Utama sergioutama
0
46

Other Decks in Programming

See All in Programming
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
580
Best-Practices-for-Cortex-Analyst-and-AI-Agent
Avatar for ryotaro.ikeda@finatext.com ryotaroikeda
1
110
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
SourceGeneratorのススメ
Avatar for tkym htkym
0
200
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
230
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
Oxlint JS plugins
Avatar for kazupon kazupon
1
960
今から始めるClaude Code超入門
Avatar for 448jp | OKI Yoshiya 448jp
8
8.8k
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390

Featured

See All Featured
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
120
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
5.8k
Done Done
Avatar for chrislema chrislema
186
16k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.1k
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
66
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
0
1.1k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k

Transcript

  1. Taming AutoLayout @sergioutama

  2. Thinking Constraint “ It’s relationship between one view with another

    “

  3. Center Y Center X height width baseline leading trailing top

    bottom A

  4. Autolayout Component Priority Hugging and Compression

  5. AutoLayout Frame ♥

  6. view.translatesAutoresizingMaskIntoConstraints Follow the rules setNeedsUpdateConstraints() layoutSubviews() viewdidLayoutSubviews() autoresize layout pass

    setNeedsLayout() => super.setNeedsLayout()

  7. Follow the rules “ superview only change it’s direct subviews

    “

  8. Debug Autolayout ensure x, y, & size ensure priority set

    constraint identifier set view accessibility identifier

  9. DEMO

  10. Reference wwdc2015/218 wwdc2015/219 Apple AutoLayout Programming Guide

  11. QA

  12. Thank you @sergioutama