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

Adaptive Layout Workshop

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
AI Agent Tool のためのバックエンドアーキテクチャを考える #encraft
Avatar for izumin5210 izumin5210
6
1.8k
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
170
React 19でつくる「気持ちいいUI」- 楽観的UIのすすめ
Avatar for Hiroshi Morishige himorishige
11
7.3k
Honoを使ったリモートMCPサーバでAIツールとの連携を加速させる！
Avatar for とすり tosuri13
1
170
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
530
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
600
Spinner 軸ズレ現象を調べたらレンダリング深淵に飲まれた #レバテックMeetup
Avatar for 弁護士ドットコム bengo4com
1
230
Smart Handoff/Pickup ガイド - Claude Code セッション管理
Avatar for rasshii yukiigarashi
0
130
AI Schema Enrichment for your Oracle AI Database
Avatar for thatjeffsmith thatjeffsmith
0
260
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k

Featured

See All Featured
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
320
Beyond borders and beyond the search box: How to win the global "messy middle" with AI-driven SEO
Avatar for David Carrasco davidcarrasco
1
49
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
630
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
2.7k
Highjacked: Video Game Concept Design
Avatar for Ryan Kendrick rkendrick25
PRO
1
280
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
It's Worth the Effort
Avatar for 3n 3n
188
29k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
Measuring Dark Social's Impact On Conversion and Attribution
Avatar for Stephen Akadiri stephenakadiri
1
120

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!