SlideShare ist ein Scribd-Unternehmen logo
1 von 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

Weitere ähnliche Inhalte

Ähnlich wie 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
 

Ähnlich wie 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
 

Kürzlich hochgeladen

Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Dr.Costas Sachpazis
 
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
9953056974 Low Rate Call Girls In Saket, Delhi NCR
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
dollysharma2066
 
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Christo Ananth
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
ankushspencer015
 
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Christo Ananth
 

Kürzlich hochgeladen (20)

Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
Call Girls Pimpri Chinchwad Call Me 7737669865 Budget Friendly No Advance Boo...
 
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
(INDIRA) Call Girl Bhosari Call Now 8617697112 Bhosari Escorts 24x7
 
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
Structural Analysis and Design of Foundations: A Comprehensive Handbook for S...
 
Extrusion Processes and Their Limitations
Extrusion Processes and Their LimitationsExtrusion Processes and Their Limitations
Extrusion Processes and Their Limitations
 
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdfONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
ONLINE FOOD ORDER SYSTEM PROJECT REPORT.pdf
 
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar  ≼🔝 Delhi door step de...
Call Now ≽ 9953056974 ≼🔝 Call Girls In New Ashok Nagar ≼🔝 Delhi door step de...
 
The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...
The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...
The Most Attractive Pune Call Girls Manchar 8250192130 Will You Miss This Cha...
 
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
FULL ENJOY Call Girls In Mahipalpur Delhi Contact Us 8377877756
 
UNIT-III FMM. DIMENSIONAL ANALYSIS
UNIT-III FMM.        DIMENSIONAL ANALYSISUNIT-III FMM.        DIMENSIONAL ANALYSIS
UNIT-III FMM. DIMENSIONAL ANALYSIS
 
Coefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptxCoefficient of Thermal Expansion and their Importance.pptx
Coefficient of Thermal Expansion and their Importance.pptx
 
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...Top Rated  Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
Top Rated Pune Call Girls Budhwar Peth ⟟ 6297143586 ⟟ Call Me For Genuine Se...
 
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
Call for Papers - African Journal of Biological Sciences, E-ISSN: 2663-2187, ...
 
AKTU Computer Networks notes --- Unit 3.pdf
AKTU Computer Networks notes ---  Unit 3.pdfAKTU Computer Networks notes ---  Unit 3.pdf
AKTU Computer Networks notes --- Unit 3.pdf
 
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
Call for Papers - Educational Administration: Theory and Practice, E-ISSN: 21...
 
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...Booking open Available Pune Call Girls Pargaon  6297143586 Call Hot Indian Gi...
Booking open Available Pune Call Girls Pargaon 6297143586 Call Hot Indian Gi...
 
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank  Design by Working Stress - IS Method.pdfIntze Overhead Water Tank  Design by Working Stress - IS Method.pdf
Intze Overhead Water Tank Design by Working Stress - IS Method.pdf
 
BSides Seattle 2024 - Stopping Ethan Hunt From Taking Your Data.pptx
BSides Seattle 2024 - Stopping Ethan Hunt From Taking Your Data.pptxBSides Seattle 2024 - Stopping Ethan Hunt From Taking Your Data.pptx
BSides Seattle 2024 - Stopping Ethan Hunt From Taking Your Data.pptx
 
data_management_and _data_science_cheat_sheet.pdf
data_management_and _data_science_cheat_sheet.pdfdata_management_and _data_science_cheat_sheet.pdf
data_management_and _data_science_cheat_sheet.pdf
 
Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01Double rodded leveling 1 pdf activity 01
Double rodded leveling 1 pdf activity 01
 
Generative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPTGenerative AI or GenAI technology based PPT
Generative AI or GenAI technology based PPT
 

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