$30 off During Our Annual Pro Sale. View Details »

Adaptive Layout Workshop

Avatar for sammyd sammyd
February 20, 2015
Programming
0
350

Adaptive Layout Workshop

The slides which accompany the adaptive layout workshop presented at (amongst others) MobOS 2015.

Avatar for sammyd

sammyd

February 20, 2015
Tweet

More Decks by sammyd

See All by sammyd
Core Image: Great when it works
Avatar for sammyd sammyd
1
520
iOS Views & Animations: Learning by stealing
Avatar for sammyd sammyd
1
180
Machine Learning on Mobile—a primer
Avatar for sammyd sammyd
0
110
Core ML: A whistlestop tour
Avatar for sammyd sammyd
1
170
DIY DI
Avatar for sammyd sammyd
2
120
iOSConfSG 2017: Decoding Codable
Avatar for sammyd sammyd
3
200
Machine Learning: deciphering the hype
Avatar for sammyd sammyd
0
150
Notify Me, Notify You. Aha!
Avatar for sammyd sammyd
1
180
SwiftConf 2016: Concurrency on iOS
Avatar for sammyd sammyd
1
180

Other Decks in Programming

See All in Programming
手軽に積ん読を増やすには？/読みたい本と付き合うには？
Avatar for hideki kinjyo o0h
PRO
1
170
ハイパーメディア駆動アプリケーションとIslandアーキテクチャ: htmxによるWebアプリケーション開発と動的UIの局所的適用
Avatar for Ryota Nakamura nowaki28
0
380
AI時代もSEOを頑張っている話
Avatar for しらはま shirahama_x
0
270
안드로이드 9년차 개발자, 프론트엔드 주니어로 커리어 리셋하기
Avatar for Seungmin 마량 maryang
1
110
DSPy Meetup Tokyo #1 - はじめてのDSPy
Avatar for Masahiro Nishimi masahiro_nishimi
1
160
手が足りない！兼業データエンジニアに必要だったアーキテクチャと立ち回り
Avatar for zinkosuke zinkosuke
0
580
Microservices rules: What good looks like
Avatar for Chris Richardson cer
PRO
0
1.1k
テストやOSS開発に役立つSetup PHP Action
Avatar for Atsushi Matsuo matsuo_atsushi
0
150
UIデザインに役立つ 2025年の最新CSS / The Latest CSS for UI Design 2025
Avatar for IKEDA Yasunobu clockmaker
18
7.2k
生成AIを利用するだけでなく、投資できる組織へ
Avatar for pospome pospome
0
160
非同期処理の迷宮を抜ける: 初学者がつまづく構造的な原因
Avatar for PADAone pd1xx
1
690
TypeScript 5.9 で使えるようになった import defer でパフォーマンス最適化を実現する
Avatar for おおいし bicstone
1
1.2k

Featured

See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
34k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.5k
Done Done
Avatar for chrislema chrislema
186
16k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.1k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
36
6.2k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.4k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
8.3k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.9k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k

Transcript

  1. Adaptive Layout Workshop Sam Davies @iwantmyrealname github.com/sammyd/adaptive-layout-workshop

  2. Requirements • Xcode 6.1 • AdaptiveWeaponry sample project

  3. Plan • AutoLayout refresher • Intro to size classes •

    Installable constraints • Handling rotation in a post-rotation world • Adaptive fonts • Configurable constraints • Installable Views

  4. Auto Layout Refresher

  5. Adaptive Layout

  6. In the beginning there was...

  7. In the beginning there was...

  8. In the beginning there was...

  9. In the beginning there was...

  10. In the beginning there was...

  11. In the beginning there was...

  12. In the beginning there was... ...a total of 10 different

    layouts

  13. in the past

  14. this doesn't scale

  15. introducing Adaptive Layout • Abstracts layout away from device specifics

    • Introducing concept of size classes • Available in iOS 8 • Fully supported in Xcode and IB

  16. "amount of space available for content"

  17. Size classes

  18. Size classes

  19. Size classes

  20. Approach to adaptive layout 1. Build base layout 2. Choose

    size class override 3. Uninstall irrelevant constraints 4. Add new constraints specific to size class 5. Rinse and repeat

  21. Let's Go!

  22. Useful Links sam ⁶ @iwantmyrealname code ⁶ github.com/sammyd/adaptive-layout-workshop free book

    ⁶ shinobicontrols.com/ios8 competition ⁶ shinobicontrols.com/giveaway Thanks!