Dynamic text height using Adaptive Layout

Dynamic height with Adaptive Layout iOS

Lots of people question, what is the best way to make dynamic view size depending on the text height. From iOS 9 we have an approach called Adaptive Layout (available when working with AutoLayout and SizeClasses).

Let’s start…

 

  1. The first thing that I will do is create the labels with different frames and different text sizes and also set the leading and top constraints for both.Screen Shot 2016-05-29 at 19.41.32-min
  2. Next, I will continue with setting the width constraint to equal the super view and then change its multiplier. To explain more here, I will set the multiplier to 0.877 because the view takes 87.7% of its super view. That means in whatever screen size you run the app, that component will take 87.7% of the width of the screen (in our case).

 

Screen Shot 2016-05-29 at 19.44.05-min

 

Screen Shot 2016-05-29 at 19.44.18-min

3. Now the main thing is NOT to set the Height constraint. You can see a yellow warning if you aren’t using SizeClasses but ignore that. This tells the interface builder to adapt on its own.

 

Here is the final result: 

Simulator Screen Shot 29 May 2016 19.44.40-min

 

Leave a Reply

Your email address will not be published. Required fields are marked *