SlideShare une entreprise Scribd logo
1  sur  68
Adjusting to Auto Layout 
iOS Meetup Tokyo 
September 2014 
derek lee
Your Presenter 
• 15 yrs IT experience 
• 2+ yrs iOS 
• Transitioned to full-time iOS 
Freelance in July (2014)
Yoga Sensei 
Released Feb 2014
CURRENTLY! 
IN PROGRESS 
Groove Freedom 
Release Planned Oct / Nov 2014
So why are we talking about Auto Layout today? 
?
Adjusting to Auto Layout (Tutorial / Tips for iOS Auto Layout)
Auto Layout is… 
A constraint-based descriptive layout system
Auto Layout is also… 
Capable of giving you the desire to 
toss your Mac out the window
Auto Layout is also… 
was? 
Capable of giving you the desire to 
toss your Mac out the window
Auto Layout 
Not a topic that can be fully covered 
within a 30 minute timeframe
When this presentation is 
over, you should understand: 
• Why Auto Layout is important and why you need to 
adopt it in your projects 
• The basic steps and workflow required to start 
applying auto layout to your projects 
• How to add, edit & remove constraints to satisfy 
basic conditions
When this presentation is 
over, you should understand: 
• How to approach debugging Auto Layout issues 
• How size classes further improve upon Auto Layout 
challenges in iOS8 
• Some tips and tricks to help you work with Auto 
Layout in Xcode 
* Note that pretty much all screenshots and explanations have been 
created with the latest beta of Xcode 6.1.
Auto Layout 
• Overview 
• Basics: Working with Constraints 
• Debugging: Resolving Issues with Constraints 
• iOS8 Impacts: Size Classes 
• References
Overview 
• First introduced in 2011 for the Mac 
• Brought over to iOS in 2012 with iOS6 / Xcode 4 
• IB improvements in iOS7 / Xcode 5 
• Further developed for iOS8 / Xcode 6
Why Auto Layout? 
• Describe how views should be laid out in a 
relational manner to their superview & sibling views 
• Dynamically respond to application changes 
• User provides constraints; system calculates the 
frames 
• More power and control over springs and struts
Why Auto Layout? 
• Multiple iOS versions (6, 7, 8… 9? 10?) 
• Rotation: Portrait vs Landscape 
• Dynamic Content 
• Localization 
• Screen sizes 
• Before: iPhone & iPad 
• Now: iPhone 4, 4S, 5, 5S, 6, 6 Plus & iPad Variations
Before we begin… 
A couple of important concepts… 
• Phases of Display 
• Intrinsic Content Size
Phases of Display 
• Update Constraints - Bottom up, leaf to root 
• Layout - Apply the layout top-down 
• Display - Display also from the top-down
Intrinsic Content Size 
• Size of the control based on the content it contains 
• Two constants per direction (height, width) 
• Content Hugging 
• Compression Resistance 
• At run time, infer size based on content; grow and resize 
dynamically 
• Generally you do not want to add explicit width and height 
constraints to a view that has an intrinsic content size
Intrinsic Content Size 
• Content Hugging Priority 
• High value matches a view’s frame to the natural 
size of its content, limiting the view from growing 
larger than it’s content 
• Compression Resistance Priority 
• High value fights clipping/shrinking, maintaining 
its intrinsic content size 
• Both Horizontal and Vertical priorities
Working with Constraints 
Standard Workflow Steps! 
1. Enable Auto Layout 
2. Initial layout of objects 
3. Add constraints (Interface Builder or Code/VFL) 
4. Debug & resolve issues
Enabling Auto Layout 
• Storyboard 
• File Inspector 
• “Use Auto Layout” checkbox 
• Set at Storyboard or NIB level 
Enable Initial Layout Constraints Debug
Initial Layout 
• Placing views and objects in 
their approximate position 
• Not yet considering device 
orientation, other screen sizes 
• If no constraints, the default is 
fixed position and fixed size 
• Build & Run >> Views laid out 
as expected 
• Rotate >> Position/size fixed 
Enable Initial Layout Constraints Debug
Adding Constraints 
• Constraints must be sufficient 
• Constraints must not conflict 
Enable Initial Layout Constraints Debug
Adding Constraints 
In order of Apple’s recommendation: 
• Interface Builder 
• Visual Format Language (VFL) 
• Base API (NSLayoutConstraint) 
Enable Initial Layout Constraints Debug
Visual Format Language 
Enable Initial Layout Constraints Debug
How to Add Constraints 
1. Control + Drag 
2. Align Menu 
3. Pin Menu 
4. Resolve Auto Layout Issues Menu 
Enable Initial Layout Constraints Debug
Control + Drag 
• Hold “control” key + drag to 
destination 
• Destination can be superview 
or other object 
• Control + click in source 
object, drag to destination and 
release 
• The direction you drag in 
dictates the options that are 
presented 
Enable Initial Layout Constraints Debug
Xcode IB Tip 
• Add multiple constraints at 
one time: 
Control + Drag, then: 
Shift or Command + Click 
! 
• A white dot next to a 
constraint means that it 
already exists
Align Menu 
• Select the view or object 
whose constraints you want to 
modify 
• Click on the Align Menu 
• Select constraints as needed 
Enable Initial Layout Constraints Debug
Pin Menu 
• Select the view or object 
whose constraints you want to 
modify 
• Click on the Pin Menu 
• Select constraints as needed 
Enable Initial Layout Constraints Debug
Resolve Auto Layout 
Issues Menu (iOS8) 
• Select the view or object 
whose constraints you want to 
modify 
• Click on the Pin Menu 
• Select constraints as needed 
Enable Initial Layout Constraints Debug
Resolve Auto Layout 
Issues Menu (iOS8) 
• Selected Views -OR- All Views 
• Update Frames 
• Update Constraints 
• Add Missing Constraints 
• Reset to Suggested Constraints 
• Clear Constraints 
Enable Initial Layout Constraints Debug
Select Constraints 
• Select the object whose 
constraints you want to edit 
! 
• Hover over the constraint 
until a shadow is displayed 
behind it! 
! 
• Click the constraint 
Enable Initial Layout Constraints Debug
Edit Constraints 
• Double click the constraint 
! 
! 
• Select the view/object, then 
select Size Inspector >> 
Constraints 
Enable Initial Layout Constraints Debug
Delete Constraints 
• Select the constraint 
• Hit delete 
Enable Initial Layout Constraints Debug
Constraint Details / Edit 
• Size Inspector 
• Constraints View 
• Can edit, delete directly from 
here 
Enable Initial Layout Constraints Debug
Debugging Constraints 
Enable Initial Layout Constraints Debug
Debugging Constraints 
Issue Navigator! 
• Lists all Auto Layout issues in 
addition to compilation, linking 
issues 
Enable Initial Layout Constraints Debug
Debugging Constraints 
Document Outline! 
• Hover your mouse over the 
bold heading (for example, 
“Content Priority Ambiguity”). 
• An “i” icon in a circle should 
appear (iOS8) 
Enable Initial Layout Constraints Debug
Debugging Constraints 
Document Outline! 
• Clicking the “i” icon will 
explain the problem. 
• The second paragraph gives 
suggestions for how to resolve 
the issue that has been 
encountered. 
Enable Initial Layout Constraints Debug
Debugging Constraints 
Auto Layout Issue Navigator! 
• Top-right hand corner 
• Lists all current Auto Layout 
issues with the current scene 
Enable Initial Layout Constraints Debug
Debugging Constraints 
• Even if IB does not indicate any issues, it is still possible to 
encounter these at run-time 
• Detailed information with be output to the console using VFL 
• Xcode will attempt to resolve issues by breaking constraint(s) 
Enable Initial Layout Constraints Debug
Debugging Constraints 
• BLUE = No problem 
• All constraints are valid 
Enable Initial Layout Constraints Debug
Debugging Constraints 
• ORANGE = Problem 
• Issues exist with constraints; 
likely not enough information 
to determine run-time location 
• Dashed box indicates run-time 
placement when different from 
design time 
Enable Initial Layout Constraints Debug
Debugging Constraints 
• RED = Problem 
• Unsatisfiable constraints, likely 
too many constraints exist that 
are in contention with each 
other 
Enable Initial Layout Constraints Debug
demo
iOS8 Size Classes 
• New for iOS8 / Xcode 6! 
• Compare to TPMultiLayoutViewController (Michael 
Tyson, “layout templating” for portrait/landscape) 
• https://github.com/michaeltyson/TPMultiLayoutViewController 
• Allows for multiple layouts for varying 
configurations
iOS8 Size Classes
iOS8 Size Classes 
• iOS7 and Prior (Deprecated in iOS8) 
• UIInterfaceOrientation and UIUserInterfaceIdiom 
• iOS8 Recommended Approach: 
• Size Classes: Compact + Regular 
• Horizontal & Vertical
iOS8 Size Classes 
Regular Compact 
Regular 
Compact 
HORIZONTAL 
V! 
E! 
R! 
T! 
I! 
C! 
A! 
L
iOS8 Size Classes
iOS8 Size Classes
iOS8 Size Classes 
Traits / Trait Collection: 
• Horizontal Size Class 
• Vertical Size Class 
• User Interface Idiom 
• Display Scale 
Compact 
or 
Regular
Turn On Size Classes 
• File Inspector 
• “Use Size Classes” checkbox
Applying Size Classes 
• Choose desired size class 
• Modify constraints as you 
would normally
Applying Size Classes 
• What if I don’t want a view in 
this size class? 
• Uninstall it using the 
“Installed” checkbox
iOS8 Trait Collections 
• willTransitionToTraitCollection:withTransitionCoordin 
ator notifies of rotation events. Use this to get ready 
for the change that is about to occur. 
• traitCollectionDidChange: for Views and View 
Controllers to show visual changes
iOS8 Trait Collections 
• What objects have a trait collection? 
• UIScreen, UIWindow, UIViewController, UIView 
• What can you do with trait collections? 
• Compare - Does one contain another? 
• Add together
iOS8 UIImageAsset 
• iOS7 and Prior: 1x, 2x images 
• iOS8 >> Image Assets that correspond to Trait 
Collections 
• Chooses the appropriate image for the current Trait 
Collection + updates intrinsic content size
Xcode 6 Resizable Simulator
Localization Tips 
• Double all localized strings 
• NSDoubleLocalizedStrings YES 
• Simulate Right-to-Left 
• AppleTextDirection YES 
• NSForceRightToLeftWritingDirection YES 
• Draw view alignment rects 
• UIViewShowAlignmentRects YES
Xcode IB Tip #1 
• Duplicate an object using: 
Option + Drag
Xcode IB Tip #2 
• Too many views/objects 
stacked on top of each other 
that it’s hard to select the one 
you need? 
• You can show all views/ 
objects under the mouse 
cursor using: 
Shift + Right Click
Further Topics 
• Connect outlets to constraints to modify them in 
code 
• Animating layout changes using Auto Layout: 
• Adjust your constraints 
• Within an animation block call: 
[view layoutIfNeeded]; 
• Trait Environments, Trait Collections
References 
• WWDC 2012 
• 202 Introduction to Auto Layout for iOS and OS X 
• 228 Best Practices for Mastering Auto Layout 
• 232 Auto Layout by Example 
• WWDC 2013 
• 405 Interface Builder Core Concepts 
• 406 Taking Control of Auto Layout in Xcode 5 
• 213 Best Practices for Cocoa Animation 
• WWDC 2014 
• 216 Building Adaptive Apps with UIKit 
• 411 What’s new in Interface Builder
Questions? 
?
Thank you! 
derek lee 
dereklee@downtothis.com 
@derekleerock 
http://drums.dereklee.name

Contenu connexe

En vedette

Writing Clean Code in Swift
Writing Clean Code in SwiftWriting Clean Code in Swift
Writing Clean Code in SwiftDerek Lee Boire
 
Secrets of e marketing success 2016 presentation
Secrets of e marketing success 2016 presentationSecrets of e marketing success 2016 presentation
Secrets of e marketing success 2016 presentationMartha Lord
 
Creating Value in Health through Big Data
Creating Value in Health through Big DataCreating Value in Health through Big Data
Creating Value in Health through Big DataBooz Allen Hamilton
 
Google analytics 2-dagers kurs mai 2011
Google analytics 2-dagers kurs mai 2011Google analytics 2-dagers kurs mai 2011
Google analytics 2-dagers kurs mai 2011Kenneth Eriksen
 
Atlassian User Group, AUG Wiesbaden, 25 October 2012
Atlassian User Group, AUG Wiesbaden, 25 October 2012Atlassian User Group, AUG Wiesbaden, 25 October 2012
Atlassian User Group, AUG Wiesbaden, 25 October 2012Sarah Maddox
 
Helsinki book launch jenn lim delivering happiness_45_16.9
Helsinki book launch jenn lim delivering happiness_45_16.9Helsinki book launch jenn lim delivering happiness_45_16.9
Helsinki book launch jenn lim delivering happiness_45_16.9Delivering Happiness
 
Локальная_система_позиционирования
Локальная_система_позиционированияЛокальная_система_позиционирования
Локальная_система_позиционированияOleg Dubinin
 
How to Deal with an Overbearing Mother w/o Audio
How to Deal with an Overbearing Mother w/o AudioHow to Deal with an Overbearing Mother w/o Audio
How to Deal with an Overbearing Mother w/o Audiosheppar1
 
Dung Cho Den Ngay Mai
Dung Cho Den Ngay MaiDung Cho Den Ngay Mai
Dung Cho Den Ngay Maithuyvu75
 
Physics of Trust OOP 2016
Physics of Trust OOP 2016Physics of Trust OOP 2016
Physics of Trust OOP 2016Olaf Lewitz
 
Resume milind patil
Resume milind patilResume milind patil
Resume milind patilMilind Patil
 
iDRUG - intelligent drug discovery
iDRUG - intelligent drug discoveryiDRUG - intelligent drug discovery
iDRUG - intelligent drug discoverySean Ekins
 
Slides for burroughs wellcome foundation ajw100611 sefinal
Slides for burroughs wellcome foundation ajw100611 sefinalSlides for burroughs wellcome foundation ajw100611 sefinal
Slides for burroughs wellcome foundation ajw100611 sefinalSean Ekins
 

En vedette (18)

Writing Clean Code in Swift
Writing Clean Code in SwiftWriting Clean Code in Swift
Writing Clean Code in Swift
 
Secrets of e marketing success 2016 presentation
Secrets of e marketing success 2016 presentationSecrets of e marketing success 2016 presentation
Secrets of e marketing success 2016 presentation
 
Presentation1
Presentation1Presentation1
Presentation1
 
Creating Value in Health through Big Data
Creating Value in Health through Big DataCreating Value in Health through Big Data
Creating Value in Health through Big Data
 
Google analytics 2-dagers kurs mai 2011
Google analytics 2-dagers kurs mai 2011Google analytics 2-dagers kurs mai 2011
Google analytics 2-dagers kurs mai 2011
 
Atlassian User Group, AUG Wiesbaden, 25 October 2012
Atlassian User Group, AUG Wiesbaden, 25 October 2012Atlassian User Group, AUG Wiesbaden, 25 October 2012
Atlassian User Group, AUG Wiesbaden, 25 October 2012
 
Helsinki book launch jenn lim delivering happiness_45_16.9
Helsinki book launch jenn lim delivering happiness_45_16.9Helsinki book launch jenn lim delivering happiness_45_16.9
Helsinki book launch jenn lim delivering happiness_45_16.9
 
Локальная_система_позиционирования
Локальная_система_позиционированияЛокальная_система_позиционирования
Локальная_система_позиционирования
 
How to Deal with an Overbearing Mother w/o Audio
How to Deal with an Overbearing Mother w/o AudioHow to Deal with an Overbearing Mother w/o Audio
How to Deal with an Overbearing Mother w/o Audio
 
CV_akansh doc
CV_akansh docCV_akansh doc
CV_akansh doc
 
Dung Cho Den Ngay Mai
Dung Cho Den Ngay MaiDung Cho Den Ngay Mai
Dung Cho Den Ngay Mai
 
Physics of Trust OOP 2016
Physics of Trust OOP 2016Physics of Trust OOP 2016
Physics of Trust OOP 2016
 
Evaluation question 1res
Evaluation question 1resEvaluation question 1res
Evaluation question 1res
 
Resume milind patil
Resume milind patilResume milind patil
Resume milind patil
 
MEC / CES - January 6, 2015
MEC / CES - January 6, 2015MEC / CES - January 6, 2015
MEC / CES - January 6, 2015
 
iDRUG - intelligent drug discovery
iDRUG - intelligent drug discoveryiDRUG - intelligent drug discovery
iDRUG - intelligent drug discovery
 
Slides for burroughs wellcome foundation ajw100611 sefinal
Slides for burroughs wellcome foundation ajw100611 sefinalSlides for burroughs wellcome foundation ajw100611 sefinal
Slides for burroughs wellcome foundation ajw100611 sefinal
 
Absolut Vodka (V M )
Absolut Vodka (V M )Absolut Vodka (V M )
Absolut Vodka (V M )
 

Similaire à Adjusting to Auto Layout (Tutorial / Tips for iOS Auto Layout)

iOS Programming 101
iOS Programming 101iOS Programming 101
iOS Programming 101rwenderlich
 
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Fwdays
 
Cross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazineCross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazinePrabhakaran Mani
 
Android Development - ConstraintLayout
Android Development - ConstraintLayoutAndroid Development - ConstraintLayout
Android Development - ConstraintLayoutManuel Vicente Vivo
 
Build Your First Android App Session #1
Build Your First Android App Session #1Build Your First Android App Session #1
Build Your First Android App Session #1Troy Miles
 
(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects
(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects
(SPOT205) 5 Lessons for Managing Massive IT Transformation ProjectsAmazon Web Services
 
Building your first iOS app using Xamarin
Building your first iOS app using XamarinBuilding your first iOS app using Xamarin
Building your first iOS app using XamarinGill Cleeren
 
iOS Development: What's New
iOS Development: What's NewiOS Development: What's New
iOS Development: What's NewNascentDigital
 
Staging and Deployment
Staging and DeploymentStaging and Deployment
Staging and Deploymentheyrocker
 
Session 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationSession 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationVu Tran Lam
 
tvOS, The Focus Engine, and Swift
tvOS, The Focus Engine, and SwifttvOS, The Focus Engine, and Swift
tvOS, The Focus Engine, and SwiftEvan Maloney
 
Ios-training-institute-in-mumbai
Ios-training-institute-in-mumbaiIos-training-institute-in-mumbai
Ios-training-institute-in-mumbaivibrantuser
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook ApplicationsWO Community
 
Ios-training-institute-in-mumbai
Ios-training-institute-in-mumbaiIos-training-institute-in-mumbai
Ios-training-institute-in-mumbaivibrantuser
 
Session 16 - Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhoneSession 16  -  Designing universal interface which used for iPad and iPhone
Session 16 - Designing universal interface which used for iPad and iPhoneVu Tran Lam
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentMediacurrent
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyPaul Hunt
 

Similaire à Adjusting to Auto Layout (Tutorial / Tips for iOS Auto Layout) (20)

iOS Programming 101
iOS Programming 101iOS Programming 101
iOS Programming 101
 
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
Алексей Ященко и Ярослав Волощук "False simplicity of front-end applications"
 
Cross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazineCross Browser Issues - few solutions inspired by smashing magazine
Cross Browser Issues - few solutions inspired by smashing magazine
 
Android Development - ConstraintLayout
Android Development - ConstraintLayoutAndroid Development - ConstraintLayout
Android Development - ConstraintLayout
 
Build Your First Android App Session #1
Build Your First Android App Session #1Build Your First Android App Session #1
Build Your First Android App Session #1
 
(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects
(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects
(SPOT205) 5 Lessons for Managing Massive IT Transformation Projects
 
Building your first iOS app using Xamarin
Building your first iOS app using XamarinBuilding your first iOS app using Xamarin
Building your first iOS app using Xamarin
 
Ios - Intorduction to view controller
Ios - Intorduction to view controllerIos - Intorduction to view controller
Ios - Intorduction to view controller
 
iOS Development: What's New
iOS Development: What's NewiOS Development: What's New
iOS Development: What's New
 
Staging and Deployment
Staging and DeploymentStaging and Deployment
Staging and Deployment
 
Session 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 applicationSession 8 - Xcode 5 and interface builder for iOS 7 application
Session 8 - Xcode 5 and interface builder for iOS 7 application
 
Android bootcamp-day1
Android bootcamp-day1Android bootcamp-day1
Android bootcamp-day1
 
tvOS, The Focus Engine, and Swift
tvOS, The Focus Engine, and SwifttvOS, The Focus Engine, and Swift
tvOS, The Focus Engine, and Swift
 
Obiee training
Obiee trainingObiee training
Obiee training
 
Ios-training-institute-in-mumbai
Ios-training-institute-in-mumbaiIos-training-institute-in-mumbai
Ios-training-institute-in-mumbai
 
Customizing ERModernLook Applications
Customizing ERModernLook ApplicationsCustomizing ERModernLook Applications
Customizing ERModernLook Applications
 
Ios-training-institute-in-mumbai
Ios-training-institute-in-mumbaiIos-training-institute-in-mumbai
Ios-training-institute-in-mumbai
 
Session 16 - Designing universal interface which used for iPad and iPhone
Session 16  -  Designing universal interface which used for iPad and iPhoneSession 16  -  Designing universal interface which used for iPad and iPhone
Session 16 - Designing universal interface which used for iPad and iPhone
 
Drupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven DevelopmentDrupal Presentation for CapitalCamp 2011: Features Driven Development
Drupal Presentation for CapitalCamp 2011: Features Driven Development
 
JSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday JerseyJSLink for ITPros - SharePoint Saturday Jersey
JSLink for ITPros - SharePoint Saturday Jersey
 

Dernier

Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houstonjennysmithusa549
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tipsmichealwillson701
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developersmichealwillson701
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startMaxim Salnikov
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridMathew Thomas
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityRandy Shoup
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevpmgdscunsri
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleShane Coughlan
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easymichealwillson701
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptxAGATSoftware
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxBarakaMuyengi
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckNaval Singh
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsconfluent
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energyjeyasrig
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdfOffsiteNOC
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial FrontiersRaphaël Semeteys
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeKaylee Miller
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...Maxim Salnikov
 

Dernier (20)

Mobile App Development company Houston
Mobile  App  Development  company HoustonMobile  App  Development  company Houston
Mobile App Development company Houston
 
Mobile App Development process | Expert Tips
Mobile App Development process | Expert TipsMobile App Development process | Expert Tips
Mobile App Development process | Expert Tips
 
Steps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic DevelopersSteps to Successfully Hire Ionic Developers
Steps to Successfully Hire Ionic Developers
 
Building Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to startBuilding Generative AI-infused apps: what's possible and how to start
Building Generative AI-infused apps: what's possible and how to start
 
Revolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM GridRevolutionize Your Field Service Management with FSM Grid
Revolutionize Your Field Service Management with FSM Grid
 
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of SimplicityLarge Scale Architecture -- The Unreasonable Effectiveness of Simplicity
Large Scale Architecture -- The Unreasonable Effectiveness of Simplicity
 
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDevLeveling Up your Branding and Mastering MERN: Fullstack WebDev
Leveling Up your Branding and Mastering MERN: Fullstack WebDev
 
openEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scaleopenEuler Community Overview - a presentation showing the current scale
openEuler Community Overview - a presentation showing the current scale
 
Boost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made EasyBoost Efficiency: Sabre API Integration Made Easy
Boost Efficiency: Sabre API Integration Made Easy
 
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
BusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptxBusinessGPT  - SECURITY AND GOVERNANCE  FOR GENERATIVE AI.pptx
BusinessGPT - SECURITY AND GOVERNANCE FOR GENERATIVE AI.pptx
 
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptxCYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
CYBER SECURITY AND CYBER CRIME COMPLETE GUIDE.pLptx
 
VuNet software organisation powerpoint deck
VuNet software organisation powerpoint deckVuNet software organisation powerpoint deck
VuNet software organisation powerpoint deck
 
Unlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insightsUnlocking the Power of IoT: A comprehensive approach to real-time insights
Unlocking the Power of IoT: A comprehensive approach to real-time insights
 
20140812 - OBD2 Solution
20140812 - OBD2 Solution20140812 - OBD2 Solution
20140812 - OBD2 Solution
 
renewable energy renewable energy renewable energy renewable energy
renewable energy renewable energy renewable energy  renewable energyrenewable energy renewable energy renewable energy  renewable energy
renewable energy renewable energy renewable energy renewable energy
 
BATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data MeshBATbern52 Swisscom's Journey into Data Mesh
BATbern52 Swisscom's Journey into Data Mesh
 
8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf8 key point on optimizing web hosting services in your business.pdf
8 key point on optimizing web hosting services in your business.pdf
 
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
Unlocking AI:Navigating Open Source vs. Commercial FrontiersUnlocking AI:Navigating Open Source vs. Commercial Frontiers
Unlocking AI: Navigating Open Source vs. Commercial Frontiers
 
User Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller ResumeUser Experience Designer | Kaylee Miller Resume
User Experience Designer | Kaylee Miller Resume
 
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
If your code could speak, what would it tell you? Let GitHub Copilot Chat hel...
 

Adjusting to Auto Layout (Tutorial / Tips for iOS Auto Layout)

  • 1. Adjusting to Auto Layout iOS Meetup Tokyo September 2014 derek lee
  • 2. Your Presenter • 15 yrs IT experience • 2+ yrs iOS • Transitioned to full-time iOS Freelance in July (2014)
  • 4. CURRENTLY! IN PROGRESS Groove Freedom Release Planned Oct / Nov 2014
  • 5. So why are we talking about Auto Layout today? ?
  • 7. Auto Layout is… A constraint-based descriptive layout system
  • 8. Auto Layout is also… Capable of giving you the desire to toss your Mac out the window
  • 9. Auto Layout is also… was? Capable of giving you the desire to toss your Mac out the window
  • 10. Auto Layout Not a topic that can be fully covered within a 30 minute timeframe
  • 11. When this presentation is over, you should understand: • Why Auto Layout is important and why you need to adopt it in your projects • The basic steps and workflow required to start applying auto layout to your projects • How to add, edit & remove constraints to satisfy basic conditions
  • 12. When this presentation is over, you should understand: • How to approach debugging Auto Layout issues • How size classes further improve upon Auto Layout challenges in iOS8 • Some tips and tricks to help you work with Auto Layout in Xcode * Note that pretty much all screenshots and explanations have been created with the latest beta of Xcode 6.1.
  • 13. Auto Layout • Overview • Basics: Working with Constraints • Debugging: Resolving Issues with Constraints • iOS8 Impacts: Size Classes • References
  • 14. Overview • First introduced in 2011 for the Mac • Brought over to iOS in 2012 with iOS6 / Xcode 4 • IB improvements in iOS7 / Xcode 5 • Further developed for iOS8 / Xcode 6
  • 15. Why Auto Layout? • Describe how views should be laid out in a relational manner to their superview & sibling views • Dynamically respond to application changes • User provides constraints; system calculates the frames • More power and control over springs and struts
  • 16. Why Auto Layout? • Multiple iOS versions (6, 7, 8… 9? 10?) • Rotation: Portrait vs Landscape • Dynamic Content • Localization • Screen sizes • Before: iPhone & iPad • Now: iPhone 4, 4S, 5, 5S, 6, 6 Plus & iPad Variations
  • 17. Before we begin… A couple of important concepts… • Phases of Display • Intrinsic Content Size
  • 18. Phases of Display • Update Constraints - Bottom up, leaf to root • Layout - Apply the layout top-down • Display - Display also from the top-down
  • 19. Intrinsic Content Size • Size of the control based on the content it contains • Two constants per direction (height, width) • Content Hugging • Compression Resistance • At run time, infer size based on content; grow and resize dynamically • Generally you do not want to add explicit width and height constraints to a view that has an intrinsic content size
  • 20. Intrinsic Content Size • Content Hugging Priority • High value matches a view’s frame to the natural size of its content, limiting the view from growing larger than it’s content • Compression Resistance Priority • High value fights clipping/shrinking, maintaining its intrinsic content size • Both Horizontal and Vertical priorities
  • 21. Working with Constraints Standard Workflow Steps! 1. Enable Auto Layout 2. Initial layout of objects 3. Add constraints (Interface Builder or Code/VFL) 4. Debug & resolve issues
  • 22. Enabling Auto Layout • Storyboard • File Inspector • “Use Auto Layout” checkbox • Set at Storyboard or NIB level Enable Initial Layout Constraints Debug
  • 23. Initial Layout • Placing views and objects in their approximate position • Not yet considering device orientation, other screen sizes • If no constraints, the default is fixed position and fixed size • Build & Run >> Views laid out as expected • Rotate >> Position/size fixed Enable Initial Layout Constraints Debug
  • 24. Adding Constraints • Constraints must be sufficient • Constraints must not conflict Enable Initial Layout Constraints Debug
  • 25. Adding Constraints In order of Apple’s recommendation: • Interface Builder • Visual Format Language (VFL) • Base API (NSLayoutConstraint) Enable Initial Layout Constraints Debug
  • 26. Visual Format Language Enable Initial Layout Constraints Debug
  • 27. How to Add Constraints 1. Control + Drag 2. Align Menu 3. Pin Menu 4. Resolve Auto Layout Issues Menu Enable Initial Layout Constraints Debug
  • 28. Control + Drag • Hold “control” key + drag to destination • Destination can be superview or other object • Control + click in source object, drag to destination and release • The direction you drag in dictates the options that are presented Enable Initial Layout Constraints Debug
  • 29. Xcode IB Tip • Add multiple constraints at one time: Control + Drag, then: Shift or Command + Click ! • A white dot next to a constraint means that it already exists
  • 30. Align Menu • Select the view or object whose constraints you want to modify • Click on the Align Menu • Select constraints as needed Enable Initial Layout Constraints Debug
  • 31. Pin Menu • Select the view or object whose constraints you want to modify • Click on the Pin Menu • Select constraints as needed Enable Initial Layout Constraints Debug
  • 32. Resolve Auto Layout Issues Menu (iOS8) • Select the view or object whose constraints you want to modify • Click on the Pin Menu • Select constraints as needed Enable Initial Layout Constraints Debug
  • 33. Resolve Auto Layout Issues Menu (iOS8) • Selected Views -OR- All Views • Update Frames • Update Constraints • Add Missing Constraints • Reset to Suggested Constraints • Clear Constraints Enable Initial Layout Constraints Debug
  • 34. Select Constraints • Select the object whose constraints you want to edit ! • Hover over the constraint until a shadow is displayed behind it! ! • Click the constraint Enable Initial Layout Constraints Debug
  • 35. Edit Constraints • Double click the constraint ! ! • Select the view/object, then select Size Inspector >> Constraints Enable Initial Layout Constraints Debug
  • 36. Delete Constraints • Select the constraint • Hit delete Enable Initial Layout Constraints Debug
  • 37. Constraint Details / Edit • Size Inspector • Constraints View • Can edit, delete directly from here Enable Initial Layout Constraints Debug
  • 38. Debugging Constraints Enable Initial Layout Constraints Debug
  • 39. Debugging Constraints Issue Navigator! • Lists all Auto Layout issues in addition to compilation, linking issues Enable Initial Layout Constraints Debug
  • 40. Debugging Constraints Document Outline! • Hover your mouse over the bold heading (for example, “Content Priority Ambiguity”). • An “i” icon in a circle should appear (iOS8) Enable Initial Layout Constraints Debug
  • 41. Debugging Constraints Document Outline! • Clicking the “i” icon will explain the problem. • The second paragraph gives suggestions for how to resolve the issue that has been encountered. Enable Initial Layout Constraints Debug
  • 42. Debugging Constraints Auto Layout Issue Navigator! • Top-right hand corner • Lists all current Auto Layout issues with the current scene Enable Initial Layout Constraints Debug
  • 43. Debugging Constraints • Even if IB does not indicate any issues, it is still possible to encounter these at run-time • Detailed information with be output to the console using VFL • Xcode will attempt to resolve issues by breaking constraint(s) Enable Initial Layout Constraints Debug
  • 44. Debugging Constraints • BLUE = No problem • All constraints are valid Enable Initial Layout Constraints Debug
  • 45. Debugging Constraints • ORANGE = Problem • Issues exist with constraints; likely not enough information to determine run-time location • Dashed box indicates run-time placement when different from design time Enable Initial Layout Constraints Debug
  • 46. Debugging Constraints • RED = Problem • Unsatisfiable constraints, likely too many constraints exist that are in contention with each other Enable Initial Layout Constraints Debug
  • 47. demo
  • 48. iOS8 Size Classes • New for iOS8 / Xcode 6! • Compare to TPMultiLayoutViewController (Michael Tyson, “layout templating” for portrait/landscape) • https://github.com/michaeltyson/TPMultiLayoutViewController • Allows for multiple layouts for varying configurations
  • 50. iOS8 Size Classes • iOS7 and Prior (Deprecated in iOS8) • UIInterfaceOrientation and UIUserInterfaceIdiom • iOS8 Recommended Approach: • Size Classes: Compact + Regular • Horizontal & Vertical
  • 51. iOS8 Size Classes Regular Compact Regular Compact HORIZONTAL V! E! R! T! I! C! A! L
  • 54. iOS8 Size Classes Traits / Trait Collection: • Horizontal Size Class • Vertical Size Class • User Interface Idiom • Display Scale Compact or Regular
  • 55. Turn On Size Classes • File Inspector • “Use Size Classes” checkbox
  • 56. Applying Size Classes • Choose desired size class • Modify constraints as you would normally
  • 57. Applying Size Classes • What if I don’t want a view in this size class? • Uninstall it using the “Installed” checkbox
  • 58. iOS8 Trait Collections • willTransitionToTraitCollection:withTransitionCoordin ator notifies of rotation events. Use this to get ready for the change that is about to occur. • traitCollectionDidChange: for Views and View Controllers to show visual changes
  • 59. iOS8 Trait Collections • What objects have a trait collection? • UIScreen, UIWindow, UIViewController, UIView • What can you do with trait collections? • Compare - Does one contain another? • Add together
  • 60. iOS8 UIImageAsset • iOS7 and Prior: 1x, 2x images • iOS8 >> Image Assets that correspond to Trait Collections • Chooses the appropriate image for the current Trait Collection + updates intrinsic content size
  • 61. Xcode 6 Resizable Simulator
  • 62. Localization Tips • Double all localized strings • NSDoubleLocalizedStrings YES • Simulate Right-to-Left • AppleTextDirection YES • NSForceRightToLeftWritingDirection YES • Draw view alignment rects • UIViewShowAlignmentRects YES
  • 63. Xcode IB Tip #1 • Duplicate an object using: Option + Drag
  • 64. Xcode IB Tip #2 • Too many views/objects stacked on top of each other that it’s hard to select the one you need? • You can show all views/ objects under the mouse cursor using: Shift + Right Click
  • 65. Further Topics • Connect outlets to constraints to modify them in code • Animating layout changes using Auto Layout: • Adjust your constraints • Within an animation block call: [view layoutIfNeeded]; • Trait Environments, Trait Collections
  • 66. References • WWDC 2012 • 202 Introduction to Auto Layout for iOS and OS X • 228 Best Practices for Mastering Auto Layout • 232 Auto Layout by Example • WWDC 2013 • 405 Interface Builder Core Concepts • 406 Taking Control of Auto Layout in Xcode 5 • 213 Best Practices for Cocoa Animation • WWDC 2014 • 216 Building Adaptive Apps with UIKit • 411 What’s new in Interface Builder
  • 68. Thank you! derek lee dereklee@downtothis.com @derekleerock http://drums.dereklee.name