Written by Alex Gibson, on March 27, 2017


I love to see in Stack Overflow, Twitter, or Facebook when someone new to iOS development asks a question and a seasoned developer responds “just use autolayout”.  Sometimes I even wonder if that seasoned developer understands autolayout themselves.  I remember that I was pretty good with iOS and I was still relying on Springs & Struts(also known as AutoResizing Masks) because autolayout  made absolutely zero sense to me.  It also seemed like all the resources were just pin this view to that view and it will work.  The problem is that most designs do not just have 3 views pinned together. I was having serious trouble with Auto Layout. I finally bought the book Practical Guide to Autolayout. I would say per dollar spent it is the best material/tool that I have paid for in all of my iOS learning. There may be a newer version on iTunes if you plan on buying I would check.  I would highly recommend you drop under $10 and buy the book. It sincerely changed my life with autolayout and with practice I have become an auto layout ninja.  I will preface that material alone will not teach you but instead repetition and practice .

I am going to show you how to use the tools available in autolayout as well as show you some video examples of different layouts. First, it should be explained that some views have what is called an intrinsic size.  For example, a UILabel can size itself if it knows either the width or height, font, and how many lines it is allowed to be.  It does not need both width and height but you can constrain it if you need to do so. UIImageView, UITextView(scrolling disabled), and other controls with text can do this self sizing as well.  Conversely, a blank empty view cannot do this if you add it to the screen.  It has no clue how big it should be.  A blank view has no instrinsic size.  If this does not make sense goBack() else proceed().

Now to the way I add constaints to views and this is important.  There are four ways that I add constraints to views and each have different reasons to use the particular method. That’s right. I do not usually choose just with the flip of a coin but with purpose.

  1. Programmatically I generally use this for adding custom views at run time and will not be the focus in this short explaination.
  2. The pin menu See image below.  This is best used for quickly pinning views together and or setting fixed height or widths on a view.  The benefit is you can quickly add multiple constraints.  See the image below.
  3. Control dragging in storyboard  See image below.  There are a couple of use cases that this is best.  First and one of the most important and least understood is if views are overlapping in the storyboard but the design calls for them to not overlap you can control drag and set spacing and change to the correct space. This is easier sometimes than resizing all the views manually in storyboard.  Using the pin menu in this instance might pin top to top when control dragging will create bottom to top.  I hope this makes sense as it is very important.  The other two great constraint options we get when we control drag are equal widths/equal heights constraints and align vertically/align horizontally constraints.  These are perhaps the most important constraints to understand.  When you ask the question “How do I scale my view proportionately for all screen sizes?” the answer is equal widths/equal heights constraints.  Relative position?  Vertical and Horizontal Centering.                               .
  4. Control dragging in the view navigator in Xcode  This does the same thing as step 3 but it is great when views are small or underneath other views in our storyboard and access to dragging in storyboard is limited.  See image below.

 

Obviously there are many different constraints you can use. Pinning sets a constant between views and is the most widely known and covered in tutorials. Vertical and Horizontal centering although understood for the most part can be used with multipliers to control the relative position of a view on all screen sizes.  Aspect Ratios constraints can be used a variety of ways but we will stick with the obvious that they will help maintain the aspect ratio of a view.  Aspect Ratio constraints are one of the few times I ever directly set the frame of a view in the inspector before I create the constraint.  Finally, my personal favorites, Equal Heights and Equal Widths constraints. Equal Heights and Equal Widths are great because you can scale the view to fit any screen size using the multiplier. You can use only equal heights and equal widths to have every view in a container size according to how they can equally fit.  Think grid or textfield layouts.  You can also use these to give views the information that UIScrollview needs to determine content size and they can do much more.  Super powerful.

Now knowing this information I have put together a couple of videos that combine techniques to achieve desired layouts. I think the longest video is about 3:45 minutes. I tried to go slow so you will be able to replicate the layout on your own.

Video 1)  Demonstrates how to use equal widths/equal heights to achieve scaling and relative position on all screen sizes.  Give it a go.

 
 

Video 2) Demonstates how to leverage UIStackView, Equal Heights and Equal Widths, and vary layout by traits.  We are altering the view from video 1 while giving it a different layout for landscape than portrait so I recommend doing video 1 first.

 
 

Video 3) Shows how to add a perfectly square view that will scale with a specific aspect ratio. This is important if you are trying to make it circular or if it is an image and you want it to be a specific aspect ratio.

 
 

Video 4) From a clean start I show you even more power of equal heights and equal widths letting all views calculate size to fit with all equal heights.

 

 

Video 5) Positioning and Scaling Text with Auto Layout
 

Video 6) More positioning and scaling text for all devices.
I hope you enjoyed these videos.  There are probably some extras we could cover but overall if you can master these items then you can build anything you want in autolayout.  One other thing to think about when you are using AL is to place views inside of views to get the desired layout. Sometimes that does not make the most sense in the beginning but you will realize like in the first two examples that this is key. Enjoy and happy constraining.

 

  • Mark Beaty

    Good stuff. In your VaryByTrait example (video 2), any thoughts on how best to achieve the horizontal stack view variation for landscape, but for all devices (including iPad?). I changed your example to use (w)Any (h)Compact and that takes care of all the iPhones (ignoring iPhone X for now, since there are other issues there), but not sure how to achieve that variation on iPads, since both orientations are (w)Regular (h)Regular.