In this article, I will talk about Auto Layout in iOS (Swift 3). It is a basic skill for iOS development nowadays. This article will be not very complicated, but very easy to understand. I will give you the code at the end of this article. Besides, you will know how to use storyboard to make Auto Layout.
This constraint states that the red view’s leading edge must be 8.0 points after the blue view’s trailing edge.
Auto Layout for a Calculator
Today, I will implement this kind of user interface which showed on below. It is a Calculator, I will focus on how to make constraints for this UI, instead of how to calculate. I will show this code sample at the end of this article.
Step 1 Put all needed buttons into Storyboard
Just put all of this buttons and a label into storyboard.
Step 2 Enbed In to Stack View
There is a great video to talk about why we should use the Stack View: Mysteries of Auto Layout, Part 1.
- 4 buttons as a line and choose them, then click
Editor --> Enbed In --> Stack View(or you can just click right bottom’s
Embed In Stack View).
- Click the
Show the Attributes inspectorand selecte
- Do the same thing with others buttons to the stack view.
Finally, we will get this the last picture showed on the screen. It’s not finished. All of these steps showed on the below picture.
Step 3 Continue to Enbed In
Combine all of views into stack views
- Select these five buttons lines (
±.0=) and Embed In to a Stack View, set it’s attributes to:
Spacing: 10.(Picture 1, 2)
- Continue to select to both label and buttons’ stack view and Embed In to a Stack View, set the same attributes with above. (Picture 3)
Steps instructions show on the blow:
Make the outside stack view match to the screen
In this step, we will set our calculator fit into our any devices.
- Click the
Add New Constraints, which located in the right-side bottom of Storyboard, then choose all four directions line to hightlight and set the vaule to
Add 4 Constraints.(Picture 1)
Show the Size inspector, we can see what’s kind of constraints we already set:
- But we got a problem, The first line buttons (
+-÷×) is not the same with our expection. Select all buttons stack view(including all buttons stack view but not include label), and then set the
Fill Equally, which can solve this problem.
Fianlly, we have got this kind of view. It already match our requirements, which can showing on all devices.
Make it more easier to use
In following steps, we will talk about how to make it to fit different orientation, both height compact and width compact.
Step 4 Height compact style
OK, that’s fine for above code, but if users want to change some buttons position when they rotate their screen, how to achieve this? (Just like this article mentioned at start) It means this calculator will become five columns instead of four columns when I rotate the screen.
Do some pre-work for Height Compact style
Firstly, I want to introduce some attributes for every view. On the below (Picture 1), there is a plus mark for
Background. It means when
Compact, the background color we set it to green,
Height compact means height’s value less than width’s value (Screen’s orientation is horizontal).
Then, we continue to our steps:
- Make top’s stack view
Unembed, which means remove this stack view (Picture 2)
- Select both label and buttons’s stack view, click
Clear Constraints(Picture 3)
- Select label, and press control keyboard and drag mouse to the left-top corner, press shift to select both
Vertical Spacing.(Picture 4)
- Select buttons stack view, make the constraints to left-bottom corner and values are
- Drag out first line buttons from buttons stack view, and Command+X to Cut it.(Picture 6)
Height Compact style set 1
Vary for Traits, then select the
introduce variations. This step is for setting our view to Horizontal model, so that it will be different with vertical model.(Picture 1)
- Command+V to paste the buttons(
+-÷×), set its
Axis: Vertical, and put it into this side.(Picture 2)
- Select both two button’s stack view and then click
Add New Alignment Constraintsto set the
Bottom Edges.(Picture 3)
- Then you will see a error tips:
Need constraints for: X position or width, because there is no constraints for the stack view(
- Select this stack view(
+-÷×), add a new constraint for it.(Picture 5)
- Drag one of the stack view’s button to the right buttons’ stack view and set its attribute to
Equal Widths.(Picture 6)
Height Compact style set 2
- Select right-side buttons’ stack view, and add new constraints to
Top Space to 0.(Picture 1)
- Select left-side buttons’ stack view(
+-÷×), and add new constraints to
Leading Space to SuperView.(Picture 2)
Done Varying.(Picture 3)
Step 5 Width compact style
I wound not tell you how to do it when the user interface style is width compact, because the steps is almost same with above. But there are some things, you need to know:
- When you click
Orientationback to the
vertiacal, (Picture 1) shows some unusable attributes, which means they are not used in this orientation.
- Set style for
width compact, you need to set
Vary for Traitsto
You also need to know the stack view(
+-÷×) is not exist on this orientation, because it is unusable, so you need to copy that unusable stack view to this orientation, be careful, there is some little tricks. :)
Code Sample: Calculator-demo-Swift