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
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
Oxlintはいいぞ
Avatar for Yuji Yamaguchi yug1224
5
1.3k
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
2026年 エンジニアリング自己学習法
Avatar for yumechi(Motoki Hirao) yumechi
0
140
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.2k
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
360° Signals in Angular: Signal Forms with SignalStore & Resources @ngLondon 01/2026
Avatar for Manfred Steyer manfredsteyer
PRO
0
130
MDN Web Docs に日本語翻訳でコントリビュート
Avatar for uutan1108 ohmori_yusuke
0
650
0→1 フロントエンド開発 Tips🚀 #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
0
570
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
100
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
200
Raku Raku Notion 20260128
Avatar for hareyaka hareyakayuruyaka
0
220

Featured

See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
31
3.1k
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
Docker and Python
Avatar for Tania Allard trallard
47
3.7k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.5k
Public Speaking Without Barfing On Your Shoes - THAT 2023
Avatar for David Neal reverentgeek
1
310
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
275
41k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
56
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.3k
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
53

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