Hi guys… 🙂 I know it’s been a long time since I write a blog post. Anyway, today I am going to write my first blog post about iOS AutoLayout. Guys looking out for coding, this is not for you, but as I think all the iOS developers should have a good knowledge about how to use constraints on Xcode Storyboards.
Today I’m going to show you a very basic thing on AutoLayout which I self studied. Furthermore I have experienced there are very little resources to learn about AutoLayout in the Internet.
To begin with I will explain what I am going to achieve at the end of this post. You are going to place an UIImageView inside your UIViewController and it will satisfy below constraints.
- UIImageView is vertically centre with UIViewController
- UIImageView is always keep a 3.33 ratio value with UIViewController centre Y axis
- UIImageView height is 6 times smaller than UIViewController height
- UIImageView has a width to height ratio of 1:1 with it’s own
From the first two constraints you will be able to place the UIImageView in the correct X and Y coordinate that you expect. Next two constraints tell the compiler about the width and height values of the UIImageView that you need. That’s all you want to complete fully constrained UI element inside UIViewController.
I can write above four constraints in another format. People who are familiar with
Y = mX + C
equation, this is for you. In the following equations, Superview means the UIViewController because UIImageView locate inside that and X stands for X axis while Y stands for Y axis just like in mathematical graphs.
- Superview.Center X = 1 * UIImageView.Center X + 0
- Superview.Center Y = 3.33 * UIImageView.Center Y + 0
- SuperView.Height = 6 * UIImageView.Height + 0
- UIImageView.Width = 1 * UIImageView.Height + 0
Okay… now you understand the theory behind that and now you need to do this in practically. Don’t worry, I’ll show you the screenshots related to each and every constraints that you need to create.
Lets start with the first constraint.
UIImageView is vertically centre with UIViewController
As I heard an image speaks thousands words hence not going to explain this further 😉
UIImageView is always keep a 3.33 ratio value with UIViewController centre Y axis
UIImageView has a width to height ratio of 1:1 with it’s own
UIImageView height is 6 times smaller than UIViewController height
Okay guys… in conclusion, by doing all above things you will be able to have a UI that fixed in any screen size and both orientation.
That’s all about today’s lesson. As I hope to extend this AutoLayout series till complete a simple log in view, I will update the source to GitHub at the end of this series. Till then have a creative design with Xcode storyboards 🙂