Introduction to Auto-layout : iOS/Mac

Introduction to Auto-layout : iOS/Mac

• 1.
  1 Auto Layout Presenter: WaseemAhmad, Mindfire Solutions Date: 04/03/2015
• 2.
  Today Presenter: Waseem Ahmad,Mindfire Solutions What is Autolayout? Why do we need Autolayout? Autolayout via StoryBoard. Intrinsic Content Size. Content Hugging & Content Resistance Priority. Auto Layout Demo.
• 3.
  What is Autolayout? •Setting UIView frames using rules rather than numbers. i.e No use of auto resizing mask. • We need to put some rules on the views in their place no matter what bounds are available. We call these rules “constraints”. • There is a very powerful API (NSLayoutConstraint) for doing this using code, but We almost set up these rules in Xcode graphically i.e storyboard or xib. • Today, we will discuss these rules using storyboard. Presenter: Waseem Ahmad, Mindfire Solutions
• 4.
  Why do weneed Autolayout? Because many things affect the size of the area available to put views •Multiple iOS versions (6, 7, 8, 9?) •Screen sizes, iPhone 4, 4S, 5, 5S, 6, 6 Plus & iPad Variations •To support autorotation (Portrait vs Landscape) •Dynamic Content •Localization Presenter: Waseem Ahmad, Mindfire Solutions
• 5.
  Autolayout via storyboard? Thefundamental building block in Auto Layout is the constraint (rules). Constraints express rules for the layout of elements in your interface and apply attributes “left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline” etc. Presenter: Waseem Ahmad, Mindfire Solutions
• 6.
  How to applyRules? •Adding Constraints with Control-Drag •Adding Constraints with Align and Pin Menus Presenter: Waseem Ahmad, Mindfire Solutions
• 7.
  Intrinsic Content Size Thesize of the view based on the content it display. •For example, UILabel has a preferred height based on the font, and a preferred width based on the font and the text it displays. •A UIProgressView only has a preferred height based on its artwork, but no preferred width. •A plain UIView has neither a preferred width nor a preferred height. Presenter: Waseem Ahmad, Mindfire Solutions
• 8.
  Intrinsic Content Size •Wedo not want to add explicit width and hight constraints to a view that has an intrinsic content size. •At run time, infer size based on content, grow and resize dynamically. •It depends on two constants per direction (horizontally, vertically) • Content Hugging • Content Resistance Presenter: Waseem Ahmad, Mindfire Solutions
• 9.
  Content Hugging &Content Resistance Priority Content Hugging Priority • High Value, don’t want to grow. Content Resistance Priority • High value fight to shrink, maintaining it’s intrinsic content size. Presenter: Waseem Ahmad, Mindfire Solutions
• 10.
  Content Hugging &Content Resistance Priority •Both horizontal and vertical priorities (between 0 to 1000). •Value doesn’t matter, you need to decide the priority between 2 items. Presenter: Waseem Ahmad, Mindfire Solutions
• 11.
  Demo • Login Screen Presenter:Waseem Ahmad, Mindfire Solutions
• 12.
  Key principles forAuto Layout •Think and define relationship between views and superview. •Constraints must be sufficient and not conflict. • Less try to use less magic numbers. •Don’t over-specify constraints. Just say as little as possible to communicate the layout and no more. •Avoid letting IB define constraints for you. Unless your view is very simple, IB will probably get it wrong. •Mastering Autolayout is depend on experience and practice. Presenter: Waseem Ahmad, Mindfire Solutions
• 13.
  References - Apple WWDC2013 - Apple WWDC 2014 - Apple Inc. “Autolayout Guide”. - Standford Autolayout Demo “http://www.stanford.edu" Presenter: Waseem Ahmad, Mindfire Solutions
• 14.
  Presenter: Waseem Ahmad,Mindfire Solutions Question and Answer
• 15.
  Thank you Presenter: WaseemAhmad, Mindfire Solutions