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.

change ios device orientation from portrait to landscape then fixed size ui component look ugly

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.

swift auto layout button when change screen orientation example

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

swift use constraints to implement auto layout example

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.

ios ui component constraints modifier menu bar with ios device simulator

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.

ios ui component constraints modifier menu bar with ios device simulator

2.1 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. Select above button, click Add New Constraints icon ( auto layout add new constraints ) at above auto layout menu bar.
  3. Then it will popup Add New Constraints dialog where you can specify the button constraints value in it.
    change swift button constraints popup dialog
  4. 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.
  5. 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.
  6. If you want the button to full file the screen width, just input 0 in the left and right space constraints value input box.
    display t-bars after change swift button constraints constant value
  7. 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.
    change swift button's orientation from portrait to landscape
  8. 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.
    4 constraints has been added under constraints in view controller scene
  9. 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.
    edit swift constraint value in xcode project attributes inspector pane
  10. 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.
    add swift constraints when there are buttons between button one and safe area edge
  11. 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.
    add constraints to swift button width and height
  12. 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
    add swift button height constraint value
  13. 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.
    swift direction space constraints priority is higher than size constraints
READ :   How To Add Resource Files Into Xcode Project And iOS App

2.2 Make Multiple Swift UI Components Equal Width & Height.

  1. Add two swift button, and set constraints to each button as below picture.add two swift button and set space constraints to each button
  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.
    select all constrained swift button and click add new constraints icon and select equal width equal height checkbox
  3. After click Add 2 Constraints button, you will see the two buttons has same width and height like below.
    button one and button two has same width and height after constraints

2.3 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 ( auto layout resolve issues ) in the auto layout menu bar. It will popup a dialog, you can choose the menu item to update, reset or clear error constraints.

resolve auto layout issues menu list

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 ( auto layout constraints align ). Below is an example.

  1. Select the two buttons in above example, then click Align button ( auto layout constraints align ) , it will popup a dialog, check Leading Edges or Trailing Edges checkbox, and input the leading edge or trailing edge value.
    select swift buttons and align them
  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.
    after align swift buttons result
  3. Remove constraint Button Two.leading = Button One.leading + 10, then select the two buttons, and click Align icon ( auto layout constraints align ), 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.
    swift buttons is aligned by center horizontally

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.