How To Add Constraints In Xcode 10 To Implement Auto Layout

When you develop iOS app use swift, you can make ui component fixed size. But iOS devices has different screen size, so fixed size UI component will render differently on different iOS devices. Even when you change same iOS device’s orientation from portrait to landscape, fixed size UI design will make the app appear ugly like below picture, when you change the screen orientation, the three button’s width will not full fill the screen width, this is not user friendly.

To fix this issue, swift provide UI constraints for you to make UI component auto layout responsively to the iOS device screen size change. After setting UI component constraints, you can make the UI component automatically change layout to match different iOS screen size or when the screen orientation is changed.

Below picture is the result after change the three button’s constraints to make it auto layout responsively. You can see when the screen orientation is changed from portrait to landscape, the three button’s width will full fill the screen width responsively.

1. How To Choose Different iOS Device Simulator Or Change Screen Orientation In Xcode.

Click the Main.storyboard file in Xcode swift project, then you can see all the iOS device simulator icon at the center bottom of View Controller Scene. You can choose one iOS device simulator to preview the screen. You can also change the iOS device orientation by click the Portrait and Landscape icon.

If you can not see above iOS device simulator list, you can close both the left and right side panel in Xcode project, then you can see it.

2. How To Use Swift Constraints To Constrain UI Component.

There is an auto layout menu bar at right side of the View as device simulator icon list, it provide five buttons for you to constrain UI component or align multiple UI components. Below is the steps about how to use it.

2.1 Add Layout Constraints To UI Component By Drag & Drop In Main Storyboard View Controller Scene.

1. Click the Xcode project’s Main.storyboard file to open and edit it.
2. Add one or two UI components into the View Controller Scene from ui component library. I add one Button and one Activity Indicator in it.
3. Press Control key and drag the Activity Indicator object to the iPhone top area at the same time use mouse key, it will display a blue line between the Activity Indicator and iPhone’s top area.
   
4. When you release the mouse key, it will popup a dialog which contains multiple item to let you define layout constraints. You can select any item to add top, bottom, leading or trail layout constraints etc between the activity indicator and the iOS device screen safe area. You can also add center layout constraint to the activity indicator to make it layout center both in horizontal or vertical direction.
   
5. If you want to add constraints to the Upload button below the activity indicator, you can press Control key and drag & drop the Upload button to the activity indicator use mouse key.
   
6. When you see the blue line, you should release the mouse key, then it will popup a dialog that let you add layout constraints between the button and the activity indicator. You can click different menu item to add different layout constraints between the button and the activity indicator.
   

2.2 How To Pin A UI Component On The Scene Use Swift Constraints.

1. Add a UI component ( a button ) to the Main.storyboard scene. Change button background color to green and button text color to red, also change the button text font.
2. You have two methods to add constraints to it.
3. Select above button, click Add New Constraints icon ( ) at above auto layout menu bar.
4. Then it will popup Add New Constraints dialog where you can specify the button constraints value in it.
   
5. You can specify 4 space constraint constant value for the button in 4 direction. If you change the space constraint constant value like above dialog, this means the distance between the button and it’s nearest left and right UI component are both 100, and the distance between the button and it’s nearest top UI component is 10, the distance between the button and it’s nearest bottom UI component is 50.
6. Click the Add 4 Constraints button in Add New Constraints dialog, you will see the button has been moved and the button size has been changed also to match the screen, and there are 4 t-bars( the line between the button and screen safe area edge ) which connect the button to the nearest UI component. If there are no UI component between the button and the screen safe area edge, then the space distance value is between the button and the safe area edge.
7. If you want the button to full file the screen width, just input 0 in the left and right space constraints value input box.
   
8. When you change the screen orientation, you can see the button change it’s layout and size automatically to responsive match the screen orientation change.
   
9. Now you can see above 4 constraints has been added under View Controller Scene —> View Controller —> View —> Constraints item. You can understand their meaning directly. If you want to remove one constraint, just select it and press delete key in keyboard.
   
10. If you want to edit one constraint value, just select it, and then edit it in Attributes Inspector pane ( How To Display Xcode Library, Assistant Editor, Inspectors Window ) at Xcode project right side. You can change the First Item, Relation and Second Item in the drop down list, the Constant input text box value is the constraint value.
    
11. Now delete all above constraints, and add three button around Button One like below. Add above constraints to Button One again, you will see below picture. You can see now the constraints is applied between Button One and the three buttons, because there are no button above Button One, so the top constraints do not change.
    
12. Besides 4 direction nearest UI component space constraints, you can also add constraints to the button’s width and height by select the checkbox before Width and Height, then select or input the width and height value from the drop down list after it.
    
13. When you click above Add 2 Constraints button, you can see the width and height constraints has been added for Button One in View Controller Scene —> View Controller —> View —> Button One —> Constraints. 
    
    
14. Please note direction space constraints priority is higher than UI component size ( width, height ) constraint. So that if you set both direction space constraints and component size constraints at same time, direction space constraints will take effect first. We can see this in below picture, although we set Button Three‘s width and height to 100, but the button’s real size is not 100 because there are also 4 direction space constraints.
    

2.3 Make Multiple Swift UI Components Equal Width & Height.

1. Add two swift button, and set constraints to each button as below picture.
2. Press Shift key and click the two buttons one by one to select then all, then click Add New Constraints icon in auto layout menu bar, check Equal Widths and Equal Heights checkbox, then click Add 2 Constraints button.
   
3. After click Add 2 Constraints button, you will see the two buttons has same width and height like below.
   

2.4 Fix Swift UI Component Constraints Issue.

If there are some constraints error or warning, the t-bars line will change to red or orange, to fix these issues or error, just click the Resolve Auto Layout Issues icon ( ) in the auto layout menu bar. It will popup a dialog, you can choose the menu item to update, reset or clear error constraints.

3. How To Use Swift Constraints To Align Multiple UI Components.

After add and pin swift UI components on view controller scene with constraints, you can also align them use swift constraints align button ( ). Below is an example.

1. Select the two buttons in above example, then click Align button ( ) , it will popup a dialog, check Leading Edges or Trailing Edges checkbox, and input the leading edge or trailing edge value.
   
2. I input 10 in leading edge, this will make Button Two’s left edge 10 point away from Button One’s left edge like below picture. To make this configuration take effect, you should remove the Button Two.leading = Safe Area.leading + 20 constraints first. Because this constraints will restrict Button Two moving from left to right.
   
3. Remove constraint Button Two.leading = Button One.leading + 10, then select the two buttons, and click Align icon ( ), select Horizontal Centers checkbox and click Add 1 Constraints button to add this constraint, then the two buttons will be aligned by screen center horizontally. If you want to align one button horizontally in the screen, just select one button and select checkbox Horizontally in Container.