iOS AutoLayout with UITextFields and UIButtons

Hi there… 🙂 How are you today? Shall we continue the next part of the iOS AutoLayout tutorial. Yes, I am going to improve the last post by adding two UITextFields and two UIButtons which finally looks like a login form. 

Okay… if you can remember, we completed last post by adding an UIImageView inside the UIViewController. What we going to accomplish today is;

  • Add an UITextField in the centre of UIViewController to provide username with having constant gaps from leading and trailing
  • Add another UITextField below to the username field with default gap and equal width as username field to provide password
  • Add an UIButton in the position of one fourth of the horizontal axis and having a constant value from the bottom to the UIViewController as SignIn button
  • Add another UIButton in the same horizontal level but three quarters of the horizontal axis as Register button

As you have already understood, to place a UI element inside the UIViewController, accurately, there are four things that you need.

  1. X position to the parent view
  2. Y position to the parent view
  3. Width of the UI element
  4. Height of the UI element

Some UI widgets like UIButtons and UITextFields have default heights. Therefore, if you have not explicitly declare height value, the compiler will take the default value and create the constraint by itself. Without talking much let us see how to add username field

Add an UITextField in the centre of UIViewController to provide username with having constant gaps from leading and trailing

Figure 1

Figure 1

Figure 2

Figure 2

If we write above constraint in the Y = mX + C format;

Superview.Center Y = 1 * UITexiField_Username.Center Y + 0

where Superview is the UIViewController.

Figure 3

Figure 3

It is a good practice to rename the UI element before you add constraints to them. Otherwise you may messed up when you look back at the constraints and identify them in the storyboard. That is why I used the format of UIElementBasicName_MainFunctionOfIt

Ex: UITextField_Username and UITextField_Password

You can have your own format and there is no hard and fast rule for that.

Figure 4

Figure 4

Figure 5

Figure 5

I am not going to write each and every constraint in Y = mX + C format if there is not something new. Here we have value for the C for first time.

UITextField_Username.Leading = 1 * Superview.Leading Margin + 40

What that means is, in any orientation and in any screen size, there will be a gap of 40 units between the UITextField_Username and UIViewController leading margin.

Let’s look at how to give trailing space.

Figure 6

Figure 6

Figure 7

Figure 7

That is how we complete adding all the constraints to UITextField_Username. As I mentioned you earlier, we no need to provide height value for UITextField if we do not have specific requirement, because it has a default value. Then you may wonder why there are four constraints even we have not given height constraint. That is because, both last constraints related to width of the UITextField. We have not given a constant value to it because we want it to adjust the width according to the device screen size and orientation. This is where AutoLayout constraint act handy in iOS development 🙂

UITextField below to the username field with default gap and equal width as username field to provide password

Figure 8

Figure 8

Figure 9

Figure 9

The speciality of this constraint is that you do not provide any value for the constant and  keep it as Standard value. Other than that you guys can understand the rest.

Add an UIButton in the position of one fourth of the horizontal axis and having a constant value from the bottom to the UIViewController as SignIn button

Figure 10

Figure 10

Figure 11

Figure 11

Following is the trickiest part, which add the constraint of one fourth scenario. Take a look and try to understand how I accomplished the task 😉

Figure 12

Figure 12

Figure 13

Figure 13

For UIButtons, you no need to provide width constraints as well. Then the final result will be, it takes the width of the text that the button has itself. But I think it is always good to have add constraint to UIButton width, because otherwise it looks shrink by the time we run the application. With the following constraint for the UIButton, you can have a width depend on the screen width. Which means if the device screen size or orientation changes, the button width also adjust.

Figure 14

Figure 14

Figure 15

Figure 15

I think you can add Register button by yourself now. Only challenge you have is to provide three quarters constraint. Don’t worry, it is just like adding one fourth constraint.

To conclude, that is all for the today’s lesson. For designers perspective, this is complete, but you get some issues when you are going to implement the backend. To give a clue, just think what happens when you tap on the username text field to provide user name in landscape mode. The keyboard will cover your writing space. There are two ways to solve that issue. One using programatically and the other using UIScrollView. Anyway, that is for another post 🙂

Till then, have a great coding ahead. Bye and take care… 😉

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.

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