Working with constraints in various situations Working properly with Auto Layout is really important if you want to become a good 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 . I am aware that there are tons of different situations, but I will cover a few common ones. iOS constraints First of all, make sure that you have read my previous story on "Understanding Auto Layout". 👇👇👇 _All you need to know about Auto Layout_hackernoon.com Understanding Auto Layout in Xcode 9 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. , and . 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. Leading Trailing Top 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 to be 0.44. The defines how much percentage should the First Item take from the Second Item. If you are using proportional size, always make sure to leave 0 and 1000. multiplier multiplier Constant Priority 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. to Superview constraint with a multiplier of 44%. Proportional Width 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 before Auto Layout came out, will understand the pain. It was required a lot of effort to create a cell with a dynamic height. 😃 Xcode 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 , you should add Leading, Trailing and Top constraints. top label On the , you should add Leading, Trailing, Top and Bottom constraints. bottom label 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 in delegate method, and also add a height that you expect the cells to start within . I always add the current cell height that is set in the Interface Builder. 😃 UITableViewAutomaticDimension heightForRowAt estimatedHeightForRowAt Done! 4Doing constraint animations in AutoLayout with the help of . NSLayoutConstraints Start by connecting an outlet for the constraint that you want to animate. For example, let's say you need to animate the position of some view. NSLayoutConstraint @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 That’s it from this tutorial and if it helped you please 👏 or share this story so others like you can find it. Thank you for your attention! 🚀 Check out my latest project: _‎HOT ODDS Each day, we generate a list of the hottest odds in the world. These are odds that have dropped the most…_apple.co ‎1x2 BET - Soccer Tips & Odds Read more of my writing on Medium: _Forget MVC, now!_hackernoon.com Introducing Clean Swift Architecture (VIP) _Many iOS apps use Google Maps. This is a very common feature, so I have decided to prepare an ultimate guide on the…_medium.freecodecamp.org Your ultimate guide to the Google Maps SDK on iOS, using Swift 4 _Custom UIView with XIB file is a very common practice in iOS Development. Custom UIView classes don’t contain XIB files…_medium.com SWIFT — Custom UIView with XIB file _A Swift tutorial that will make your app available in Spotlight search_hackernoon.com How to add Spotlight support to your iOS app _Understanding One-to-One and One-To-Many relationships_hackernoon.com Core Data Relationships _All you need to know about Auto Layout_hackernoon.com Understanding Auto Layout in Xcode 9 Subscribe to my Newsletter:

Chain

Apple

Auto Layout UI Examples

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Reactive Programming and Binding in Swift

iOS Adaptive Layouts

SwifWeb and How to Center the Div!

Understanding Auto Layout in Xcode 9

105 Stories To Learn About Ios App Development

10 Things You Didn't Know You Could Do With Google Keep

Reactive Programming and Binding in Swift

iOS Adaptive Layouts

SwifWeb and How to Center the Div!

Understanding Auto Layout in Xcode 9

105 Stories To Learn About Ios App Development

10 Things You Didn't Know You Could Do With Google Keep

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps