iOS AutoLayout with a UIImageView

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

Figure 1

Figure 1

Figure 2

Figure 2

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

Figure 3

Figure 3

Figure 4

Figure 4

UIImageView has a width to height ratio of 1:1 with it’s own

Figure 5

Figure 5

UIImageView height is 6 times smaller than UIViewController height

Figure 6

Figure 6

Figure 7

Figure 7

Figure 8

Figure 8

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 ๐Ÿ™‚

About AnujAroshA

An undergraduate in the stream of ICT (Information & Communication Technology). A simple person :)
This entry was posted in iOS and tagged , , . Bookmark the permalink.

One Response to iOS AutoLayout with a UIImageView

  1. Badal says:

    I think you should Attach Example for this.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s