SlideShare une entreprise Scribd logo
1  sur  14
Auto-Layout in iOS 7
Layout 
Layout Consist of four things: 
· Center 
· Bounds 
· Auto-resizing mask 
· Transform
Basic Concept 
Expression of the form y = m*x + b, where: 
y and x are attributes of views. 
m and b are floating point values. 
An attribute is one of left, right, top, bottom, 
leading, trailing, width, height, centerX, centerY, 
and baseline.
constraints 
Layout NSLayoutConstraint 
Content NSContentSizeLayoutConstraint 
AutosizingNSAutoresizingMaskLayoutConstraint
Constraints Attribute 
view1.attribute1 RELATION multiplier * view2.attribute2 + constant 
NSLayoutAttributeLeft 
NSLayoutAttributeRight 
NSLayoutAttributeTop 
NSLayoutAttributeBottom 
NSLayoutAttributeLeading 
NSLayoutAttributeTrailing 
NSLayoutAttributeWidth 
NSLayoutAttributeHeight 
NSLayoutAttributeCenterX 
NSLayoutAttributeCenterY 
NSLayoutAttributeBaseline 
NSLayoutRelationEqual 
NSLayoutRelationGreaterThanOrEqual 
NSLayoutRelationLessThanOrEqual 
NSLayoutAttributeNotAnAttribute
Constraints Code 
view1.attribute1 RELATION multiplier * view2.attribute2 + constant 
constraint = [NSLayoutConstraint 
constraintWithItem: view 
attribute: NSLayoutAttributeWidth 
relatedBy: NSLayoutRelationEqual 
toItem: nil 
attribute: NSLayoutAttributeNotAnAttribute 
multiplier: 1.0 
constant:100.0]; 
[view addConstraint: constraint]; 
constraint = [NSLayoutConstraint 
constraintWithItem: view 
attribute: NSLayoutAttributeWidth 
relatedBy: NSLayoutRelationEqual 
toItem: nil 
attribute: NSLayoutAttributeNotAnAttribute 
multiplier: 1.0 
Constant: 80.0]; 
[view addConstraint: constraint];
Check For Ambiguous Layout 
view.hasAmbiguousLayout 
view.exerciseAmbiguityInLayout 
for (UIView *view in self.subviews) { 
if ([view hasAmbiguousLayout]){ 
NSLog(@"<%@:0x%0x>", view.description, (int)self); 
} 
}
Intrinsic ContentSize 
Suggested size for the view. 
- (CGSize) intrinsicContentSize { 
return mySize; 
} 
[self invalidateIntrinsicContentSize]; 
UIImage *img = UIImage imageNamed:@"Icon.png"]; 
UIImageView *iv = [[UIImageView alloc] initWithImage:img]; 
NSLog(@"%@", NSStringFromCGSize(iv.intrinsicContentSize));
Visual Format Language 
[NSLayoutConstraint 
! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 
! metrics:nil 
! views:@{@"buttonA":buttonA}];
UIView 
Opting in to Constraint-Based Layout 
+ requiresConstraintBasedLayout 
– translatesAutoresizingMaskIntoConstraints 
– setTranslatesAutoresizingMaskIntoConstraints: 
Managing Constraints 
– constraints 
– addConstraint: 
– addConstraints: 
– removeConstraint: 
– removeConstraints: 
Measuring in Constraint-Based Layout 
– systemLayoutSizeFittingSize 
– intrinsicContentSize 
– invalidateIntrinsicContentSize 
– contentCompressionResistancePriorityForAxis: 
– setContentCompressionResistancePriority:forAxis: 
– contentHuggingPriorityForAxis: 
– setContentHuggingPriority:forAxis:
UIView 
Aligning Views with Constraint-Based Layout 
– alignmentRectForFrame: 
– frameForAlignmentRect: 
– alignmentRectInsets 
– viewForBaselineLayout 
Triggering Constraint-Based Layout 
– needsUpdateConstraints 
– setNeedsUpdateConstraints 
– updateConstraints 
– updateConstraintsIfNeeded 
Debugging Constraint-Based Layout 
– constraintsAffectingLayoutForAxis: 
– hasAmbiguousLayout 
– exerciseAmbiguityInLayout
Queries
Autolayout in iOS

Contenu connexe

Similaire à Autolayout in iOS

Cocoa Heads Tricity - Design Patterns
Cocoa Heads Tricity - Design PatternsCocoa Heads Tricity - Design Patterns
Cocoa Heads Tricity - Design Patterns
Maciej Burda
 
Making it fit - DroidCon Paris 18 june 2013
Making it fit - DroidCon Paris 18 june 2013Making it fit - DroidCon Paris 18 june 2013
Making it fit - DroidCon Paris 18 june 2013
Paris Android User Group
 
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
Johan Nilsson
 
iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來
Jeff Lin
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Bin Shao
 
View groups containers
View groups containersView groups containers
View groups containers
Mani Selvaraj
 

Similaire à Autolayout in iOS (20)

Auto-Layout in iOS 7
Auto-Layout in iOS 7Auto-Layout in iOS 7
Auto-Layout in iOS 7
 
Autolayout
AutolayoutAutolayout
Autolayout
 
Manual Layout Revisited
Manual Layout RevisitedManual Layout Revisited
Manual Layout Revisited
 
CocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIViewCocoaHeads Toulouse - Guillaume Cerquant - UIView
CocoaHeads Toulouse - Guillaume Cerquant - UIView
 
Cocoa Heads Tricity - Design Patterns
Cocoa Heads Tricity - Design PatternsCocoa Heads Tricity - Design Patterns
Cocoa Heads Tricity - Design Patterns
 
IOS APPs Revision
IOS APPs RevisionIOS APPs Revision
IOS APPs Revision
 
Making it fit - DroidCon Paris 18 june 2013
Making it fit - DroidCon Paris 18 june 2013Making it fit - DroidCon Paris 18 june 2013
Making it fit - DroidCon Paris 18 june 2013
 
Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011Custom UI Components at Android Only 2011
Custom UI Components at Android Only 2011
 
iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來iOS 上 self-sizing cell 的過去、現在、與未來
iOS 上 self-sizing cell 的過去、現在、與未來
 
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficientTh 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
Th 0230 turbo_chargeyourui-howtomakeyourandroidu_ifastandefficient
 
MOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app developmentMOPCON 2014 - Best software architecture in app development
MOPCON 2014 - Best software architecture in app development
 
I os 04
I os 04I os 04
I os 04
 
A Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind SidebarA Guide to Creating a Great Custom Tailwind Sidebar
A Guide to Creating a Great Custom Tailwind Sidebar
 
View groups containers
View groups containersView groups containers
View groups containers
 
Opening iOS App 開發者交流會
Opening iOS App 開發者交流會Opening iOS App 開發者交流會
Opening iOS App 開發者交流會
 
Session 15 - Working with Image, Scroll, Collection, Picker, and Web View
Session 15  - Working with Image, Scroll, Collection, Picker, and Web ViewSession 15  - Working with Image, Scroll, Collection, Picker, and Web View
Session 15 - Working with Image, Scroll, Collection, Picker, and Web View
 
Ui perfomance
Ui perfomanceUi perfomance
Ui perfomance
 
Collection view layout
Collection view layoutCollection view layout
Collection view layout
 
Visualization of Big Data in Web Apps
Visualization of Big Data in Web AppsVisualization of Big Data in Web Apps
Visualization of Big Data in Web Apps
 
Android UI
Android UI Android UI
Android UI
 

Dernier

Kuwait City MTP kit ((+919101817206)) Buy Abortion Pills Kuwait
Kuwait City MTP kit ((+919101817206)) Buy Abortion Pills KuwaitKuwait City MTP kit ((+919101817206)) Buy Abortion Pills Kuwait
Kuwait City MTP kit ((+919101817206)) Buy Abortion Pills Kuwait
jaanualu31
 
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
Health
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
HenryBriggs2
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
MayuraD1
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Kandungan 087776558899
 

Dernier (20)

Kuwait City MTP kit ((+919101817206)) Buy Abortion Pills Kuwait
Kuwait City MTP kit ((+919101817206)) Buy Abortion Pills KuwaitKuwait City MTP kit ((+919101817206)) Buy Abortion Pills Kuwait
Kuwait City MTP kit ((+919101817206)) Buy Abortion Pills Kuwait
 
A Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna MunicipalityA Study of Urban Area Plan for Pabna Municipality
A Study of Urban Area Plan for Pabna Municipality
 
Engineering Drawing focus on projection of planes
Engineering Drawing focus on projection of planesEngineering Drawing focus on projection of planes
Engineering Drawing focus on projection of planes
 
Hostel management system project report..pdf
Hostel management system project report..pdfHostel management system project report..pdf
Hostel management system project report..pdf
 
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
+97470301568>> buy weed in qatar,buy thc oil qatar,buy weed and vape oil in d...
 
Bridge Jacking Design Sample Calculation.pptx
Bridge Jacking Design Sample Calculation.pptxBridge Jacking Design Sample Calculation.pptx
Bridge Jacking Design Sample Calculation.pptx
 
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
Call Girls in South Ex (delhi) call me [🔝9953056974🔝] escort service 24X7
 
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
scipt v1.pptxcxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx...
 
Double Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torqueDouble Revolving field theory-how the rotor develops torque
Double Revolving field theory-how the rotor develops torque
 
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptxS1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
S1S2 B.Arch MGU - HOA1&2 Module 3 -Temple Architecture of Kerala.pptx
 
Computer Networks Basics of Network Devices
Computer Networks  Basics of Network DevicesComputer Networks  Basics of Network Devices
Computer Networks Basics of Network Devices
 
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced LoadsFEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
FEA Based Level 3 Assessment of Deformed Tanks with Fluid Induced Loads
 
Thermal Engineering Unit - I & II . ppt
Thermal Engineering  Unit - I & II . pptThermal Engineering  Unit - I & II . ppt
Thermal Engineering Unit - I & II . ppt
 
A CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptx
A CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptxA CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptx
A CASE STUDY ON CERAMIC INDUSTRY OF BANGLADESH.pptx
 
DeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakesDeepFakes presentation : brief idea of DeepFakes
DeepFakes presentation : brief idea of DeepFakes
 
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak HamilCara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
Cara Menggugurkan Sperma Yang Masuk Rahim Biyar Tidak Hamil
 
Rums floating Omkareshwar FSPV IM_16112021.pdf
Rums floating Omkareshwar FSPV IM_16112021.pdfRums floating Omkareshwar FSPV IM_16112021.pdf
Rums floating Omkareshwar FSPV IM_16112021.pdf
 
AIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech studentsAIRCANVAS[1].pdf mini project for btech students
AIRCANVAS[1].pdf mini project for btech students
 
COST-EFFETIVE and Energy Efficient BUILDINGS ptx
COST-EFFETIVE  and Energy Efficient BUILDINGS ptxCOST-EFFETIVE  and Energy Efficient BUILDINGS ptx
COST-EFFETIVE and Energy Efficient BUILDINGS ptx
 
Online food ordering system project report.pdf
Online food ordering system project report.pdfOnline food ordering system project report.pdf
Online food ordering system project report.pdf
 

Autolayout in iOS

  • 2. Layout Layout Consist of four things: · Center · Bounds · Auto-resizing mask · Transform
  • 3. Basic Concept Expression of the form y = m*x + b, where: y and x are attributes of views. m and b are floating point values. An attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline.
  • 4. constraints Layout NSLayoutConstraint Content NSContentSizeLayoutConstraint AutosizingNSAutoresizingMaskLayoutConstraint
  • 5. Constraints Attribute view1.attribute1 RELATION multiplier * view2.attribute2 + constant NSLayoutAttributeLeft NSLayoutAttributeRight NSLayoutAttributeTop NSLayoutAttributeBottom NSLayoutAttributeLeading NSLayoutAttributeTrailing NSLayoutAttributeWidth NSLayoutAttributeHeight NSLayoutAttributeCenterX NSLayoutAttributeCenterY NSLayoutAttributeBaseline NSLayoutRelationEqual NSLayoutRelationGreaterThanOrEqual NSLayoutRelationLessThanOrEqual NSLayoutAttributeNotAnAttribute
  • 6.
  • 7. Constraints Code view1.attribute1 RELATION multiplier * view2.attribute2 + constant constraint = [NSLayoutConstraint constraintWithItem: view attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: nil attribute: NSLayoutAttributeNotAnAttribute multiplier: 1.0 constant:100.0]; [view addConstraint: constraint]; constraint = [NSLayoutConstraint constraintWithItem: view attribute: NSLayoutAttributeWidth relatedBy: NSLayoutRelationEqual toItem: nil attribute: NSLayoutAttributeNotAnAttribute multiplier: 1.0 Constant: 80.0]; [view addConstraint: constraint];
  • 8. Check For Ambiguous Layout view.hasAmbiguousLayout view.exerciseAmbiguityInLayout for (UIView *view in self.subviews) { if ([view hasAmbiguousLayout]){ NSLog(@"<%@:0x%0x>", view.description, (int)self); } }
  • 9. Intrinsic ContentSize Suggested size for the view. - (CGSize) intrinsicContentSize { return mySize; } [self invalidateIntrinsicContentSize]; UIImage *img = UIImage imageNamed:@"Icon.png"]; UIImageView *iv = [[UIImageView alloc] initWithImage:img]; NSLog(@"%@", NSStringFromCGSize(iv.intrinsicContentSize));
  • 10. Visual Format Language [NSLayoutConstraint ! constraintsWithVisualFormat:@"H:|-[buttonA]-|" ! options:0 ! metrics:nil ! views:@{@"buttonA":buttonA}];
  • 11. UIView Opting in to Constraint-Based Layout + requiresConstraintBasedLayout – translatesAutoresizingMaskIntoConstraints – setTranslatesAutoresizingMaskIntoConstraints: Managing Constraints – constraints – addConstraint: – addConstraints: – removeConstraint: – removeConstraints: Measuring in Constraint-Based Layout – systemLayoutSizeFittingSize – intrinsicContentSize – invalidateIntrinsicContentSize – contentCompressionResistancePriorityForAxis: – setContentCompressionResistancePriority:forAxis: – contentHuggingPriorityForAxis: – setContentHuggingPriority:forAxis:
  • 12. UIView Aligning Views with Constraint-Based Layout – alignmentRectForFrame: – frameForAlignmentRect: – alignmentRectInsets – viewForBaselineLayout Triggering Constraint-Based Layout – needsUpdateConstraints – setNeedsUpdateConstraints – updateConstraints – updateConstraintsIfNeeded Debugging Constraint-Based Layout – constraintsAffectingLayoutForAxis: – hasAmbiguousLayout – exerciseAmbiguityInLayout