10,009 reads

Auto Layout UI Examples

by Dejan AtanasovNovember 17th, 2017

Too Long; Didn't Read

Working properly with Auto Layout is really important if you want to become a good <a href="https://hackernoon.com/tagged/ios" target="_blank">iOS</a> Developer. That's why I want to write another story where I will show you some UI scenarios and how to handle them with the Auto Layout <em>constraints</em>. I am aware that there are tons of different situations, but I will cover a few common ones.

Companies Mentioned

Coin Mentioned

featured image - Auto Layout UI Examples

Working with constraints in various situations

Working properly with Auto Layout is really important if you want to become a good iOS Developer. That's why I want to write another story where I will show you some UI scenarios and how to handle them with the Auto Layout constraints. I am aware that there are tons of different situations, but I will cover a few common ones.

First of all, make sure that you have read my previous story on "Understanding Auto Layout". 👇👇👇

Understanding Auto Layout in Xcode 9_All you need to know about Auto Layout_hackernoon.com

UI Examples

1I will start simple. Let's say you need to create a UILabel with dynamic height that will follow the length of the text.

In order to achieve this scenario, we will need just 3 constraints. Leading, Trailing and Top. Also, don't forget to set the number of lines property to 0 if you want your UILabel to have unlimited lines. We don't need to set any height constraint to the component because that way we are telling it to define its own height based on its content.

2 How about having two view components next to each other with equal width and height?

In order to achieve this common scenario, I would like to introduce you first with proportional size.

Proportional Size

By defining proportional size, we are telling the component to take an exact percentage of the view we are targeting. For example, in our case, the Pink View will contain 44% width from the width of the Superview. That means, that view will always occupy 44% width (on any screen size). We can also apply proportional size on height.

To add a proportional size, press CTRL and drag from your custom view towards the superview. The following menu will appear, and you can add Equal Widths or Heights.

Upon selection, click on the created constraint and set the multiplier to be 0.44. The multiplier defines how much percentage should the First Item take from the Second Item. If you are using proportional size, always make sure to leave Constant 0 and Priority 1000.

Now when you know what proportional size is, let's get back to adding all the required constraints to the Pink and Blue View.

Pink View

Top and Leading constraints to define the position.
Static Height constraint.
Proportional Width to Superview constraint with a multiplier of 44%.

Blue View

Top and Trailing constraints to define the position.
Equal Height to Pink View
Equal Width to Pink View

On the Blue View, we are setting the size to be equal to the size of the Pink View. In this case, the multiplier should stay 1, because we want to get 100% exact width and height as the Pink View.

3Creating a dynamic height on UITableViewCell, based on the content in each cell.

I think this one is a really exciting example because, with the help of Auto Layout and almost no coding at all, you can tell the UITableView to calculate the height automatically.

Those of you who are working in Xcode before Auto Layout came out, will understand the pain. It was required a lot of effort to create a cell with a dynamic height. 😃

As I mentioned above, this is really simple to be achieved with Auto Layout. I have a UITableViewCell with 2 UILabels one below another, and they are both set to follow its content size.

On the top label, you should add Leading, Trailing and Top constraints.
On the bottom label, you should add Leading, Trailing, Top and Bottom constraints.

Always remember to connect each component with the one above it, and also add a Bottom constraint to the last component at the end of the cell. This components chain is really important because that's how the cell gets "pushed" by them and calculates the total height.

UITableViewDelegate

We should also write some code, that will trigger the UITableView to calculate cells height automatically.

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {

return UITableViewAutomaticDimension

}

func tableView(_ tableView: UITableView, estimatedHeightForRowAt indexPath: IndexPath) -> CGFloat {

return 75

}

Add UITableViewAutomaticDimension in heightForRowAt delegate method, and also add a height that you expect the cells to start within estimatedHeightForRowAt. I always add the current cell height that is set in the Interface Builder. Done! 😃

4Doing constraint animations in AutoLayout with the help of NSLayoutConstraints.

Start by connecting an NSLayoutConstraint outlet for the constraint that you want to animate. For example, let's say you need to animate the position of some view.

@IBOutlet fileprivate var topConstraint: NSLayoutConstraint!@IBOutlet fileprivate var customView: UIView!

Now, to animate the constraint we need to use the native UIView method animate().

UIView.animate(withDuration: 0.5) {

self.topConstraint.constant = 100self.customView.layoutIfNeeded()

}

What happens here is that we are assigning a new value to the constraint where we want it to go, and after that we are making the view reload its content by using layoutIfNeeded.