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

Adaptive Layout Workshop

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
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
530
iOS Views & Animations: Learning by stealing
Avatar for sammyd sammyd
1
180
Machine Learning on Mobile—a primer
Avatar for sammyd sammyd
0
120
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
160
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
15年目のiOSアプリを1から作り直す技術
Avatar for TAKEDA Yuki teakun
1
610
エージェント開発初心者の僕が エージェントを作った話と今後やりたいこと
Avatar for ta-hasunuma thasu0123
0
230
PJのドキュメントを全部Git管理にしたら、一番喜んだのはAIだった
Avatar for oga_aiichiro nanaism
0
240
Railsの気持ちを考えながらコントローラとビューを整頓する/tidying-rails-controllers-and-views-as-rails-think
Avatar for MOROHASHI Kyosuke moro
4
380
The Ralph Wiggum Loop: First Principles of Autonomous Development
Avatar for Ryuichiro Semba sembayui
0
3.7k
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
110
CSC307 Lecture 14
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
450
encoding/json/v2のUnmarshalはこう変わった：内部実装で見る設計改善
Avatar for Hiroki Kurasawa kurakura0916
0
350
猫の手も借りたい！ので AIエージェント猫を作って社内に放した話 Claude Code × Container Lambda の Slack Bot "DevNeko"
Avatar for naramomi7 naramomi7
0
250
AI活用のコスパを最大化する方法
Avatar for Ochtum ochtum
0
120
オブザーバビリティ駆動開発って実際どうなの？
Avatar for yohfee yohfee
3
740
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.6k

Featured

See All Featured
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.8k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
69
Accessibility Awareness
Avatar for Sarah Abderemane sabderemane
0
73
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
Avatar for Sophie Logan marketingsoph
0
99
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
140
Agile Leadership in an Agile Organization
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
100
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
250
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.6k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k

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!