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

Taming AutoLayout

Avatar for Sergio Utama Sergio Utama
March 21, 2016
Programming
0
43

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
63
Migrating to Swift 3
Avatar for Sergio Utama sergioutama
0
51
10 Things I learned while freelancing
Avatar for Sergio Utama sergioutama
0
57
iOS Video Player
Avatar for Sergio Utama sergioutama
0
79
Tribute to Mantle
Avatar for Sergio Utama sergioutama
0
29
Mobile Analytics
Avatar for Sergio Utama sergioutama
0
44

Other Decks in Programming

See All in Programming
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
730
Node-RED を（HTTP で）つなげる MCP サーバーを作ってみた
Avatar for High U highu
0
120
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
Avatar for Ahmed EBEN HASSINE ahmedbhs123
0
130
Kotlin エンジニアへ送る：Swift 案件に参加させられる日に備えて～似てるけど色々違う Swift の仕様 / from Kotlin to Swift
Avatar for Elvis Shi lovee
1
260
Systèmes distribués, pour le meilleur et pour le pire - BreizhCamp 2025 - Conférence
Avatar for Sébastien LECACHEUR slecache
0
120
システム成長を止めない！本番無停止テーブル移行の全貌
Avatar for さかうぇ sakawe_ee
1
160
なんとなくわかった気になるブロックテーマ入門/contents.nagoya 2025 6.28
Avatar for Chiaki Okamoto chiilog
1
260
Modern Angular with Signals and Signal Store: New Rules for Your Architecture @enterJS Advanced Angular Day 2025
Avatar for Manfred Steyer manfredsteyer
PRO
0
180
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
Avatar for panda_program panda_program
6
1.9k
Google Agent Development Kit でLINE Botを作ってみた
Avatar for Kento.Yamada ymd65536
2
220
すべてのコンテキストを、 ユーザー価値に変える
Avatar for Michiru Kato applism118
3
1.1k
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
Avatar for Hiromi Hishida 77web
2
500

Featured

See All Featured
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
15
1.5k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
299
21k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
48
5.4k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
400
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
51
8.5k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k

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