Auto layout is a constraint based layout system; it permits developers to create a responsive and adaptive User Interface. Generally developers find it difficult to study and avoid using it. While developing an app today you won’t be able to manage to keep going without it.
Now we are going to start with the basic elements namely a logo, labels and button.
Let’s start with the logo. By using your graphic software, export logo in all three sizes 1x,2x and 3x
Export and add an Image Set in Assets.xcassets folder.
Once you have it ready drag out a UI image on Storyboard.
- set the logo in the right vertical and horizontal position
- Ensure top, leading and trailing margins using your graphics software.
- Allocate “Center Vertically in Container” with the storyboard View.
- Click on the constraint and go to the attribute inspector panel.
- It is time to calculate the multiplier. Till now Auto Layout has been using constraints with constant widths and heights, but there is also another way. This involves using multipliers.
- Setting width of the logo
- Allocate “Equal Widths” with the storyboard View.
- Currently logo’s width is equal to screen width. Let’s fix it.
- Click on the constraint and navigate to the attribute inspector panel, then it’s time to calculate the multiplier.
3.Logo is placed.
I hope, this blog is useful for you to add the basic elements in the app. If you have any queries, feel free to contact our expertise.
Last Update: September 7, 2018