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
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
Avatar for Hiroyuki Moriya gekko0114
2
420
Vibe Coding - AI 驅動的軟體開發
Avatar for Micky Li mickyp100
0
170
CSC307 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
490
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
770
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
710
コントリビューターによるDenoのすゝめ / Deno Recommendations by a Contributor
Avatar for petamoriken / 森建 petamoriken
0
200
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
フルサイクルエンジニアリングをAI Agentで全自動化したい 〜構想と現在地〜
Avatar for Kaito Minatoya kamina_zzz
0
400
副作用をどこに置くか問題：オブジェクト指向で整理する設計判断ツリー
Avatar for Koya Masuda koxya
1
590
Architectural Extensions
Avatar for Denys Poltorak denyspoltorak
0
280
CSC307 Lecture 08
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
670
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
170

Featured

See All Featured
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.3k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
190
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
52
3.6k
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
130
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
140k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
5
35k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
ラッコキーワード サービス紹介資料
Avatar for ラッコ株式会社 rakko
1
2.2M
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
680

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!