How to set auto size text for different screens

Question

My task is to preserve the size and position of the elements inside my cell for different screen resolutions.

I did:

1. Established constraints for the red and green blocks (UILabels) to the outer container.
2. Set the constraint between them equal to 0. It is more priority than the limitation of the red block to the bottom and green to the top.
3. Set Lines = 0 for these labels.
4. Set Autoshrink.

As a result, the font size changes on different devices. But there are still a few problems:

1. How can I remove too large paddings above and below both labels?
2. How to make them resize evenly? Now one of the blocks has an advantage over the other, depending on what constraint to make a higher priority. If you make them equal - it also does not work.

(I would like to do everything through Interface Builder)

• Screenshot with differing priorities of constraints
• My constraints
• Paddings and Attributes

Answer 1

You can take advantage of equal height and equal width constraints.

Follow the below steps to make the UILabel spacing same on iPhone 8 and iPhone 4s. This will help you to make it proportional.

1) To achieve this simply select, your label(red), label (green) and the superview (which I think you're its a cell of UICollectionView)

2) We are interested here in keeping the height proportional. i.e Red Label (80%) and Green Label (20%)

Currently, all heights are equal to superview height i.e height of RedLabel and Greenlabel is equal to 100% of superview.

But the goal is to make it 80% and 20% for red and green label respectively.

So select Red Label height constraint. Here you set the constraint which says's "height of the red label should be 80% of the superviews height".

Similarly for Green Label, set "height of the greeen label such that it's 20% for the superview's height".

Red Label

Green Label

3) Now complete the x and y axis position constraint, which would be straight forward

a) Red Label Leading = Leading edge of superview

b) Red Label Trailing = Trailing edge of superview

c) Red Label Top = Top edge of superview

d) Red Label Bottom = not required (as it has all the required constraint's to justify it's position i.e height = 0.8 * superview and it is top aligned, ex: super view height is 100 , keep this view top aligned with height = 80 )

e) Green Label Leading = Red Label Leading (you have already set this in point "a" no need to set the constraint again for Green label)

f) Green Label Trailing = Red Label Leading (you have already set this in point "b" no need to set the constraint again for Green label)

g) Green label bottom = bottom of superview

h) Green label top = not required (as it has all the required constraint's to justify it's position i.e height = 0.2 * superview and it is bottom aligned, ex: super view height is 100 , keep this view bottom aligned with height = 20 )

This is the final constraint list and the storyboard preview for iPhone 8 and 4s.