9

I have two labels in a horizontal UIStackView. Label 1 is a large font (the alarm time), Label 2 is a small font (AM/PM indicator) and I want to align the bottoms of each label.

enter image description here

I have the alignment of the stack view set to Bottom, but it seems like it's just aligning the bottoms of the labels' total area and not the actual text. The result is that the smaller font's bottom edge is about 3 or 4 pixels above the bottom edge of the large label. How do I fix this?

Austin Berenyi
  • 1,013
  • 2
  • 13
  • 25

3 Answers3

11

You need check BaseLine Relative attribute in VERTICAL Stack view

enter image description here

For Horizontal stackview

You need to change alignment from fill mode to either First baseline or Last baseline

enter image description here

If you want to know about baseline here isa great explanation https://stackoverflow.com/a/24541992/4601900

Hope it is helpful to you

Prashant Tukadiya
  • 15,838
  • 4
  • 62
  • 98
  • 1
    Do "Baseline Relative" have anything to do with Horizontal Stack view? According to Apple doc, this is "A Boolean value that determines whether the vertical spacing between views is measured from their baselines." and " it is used only in Vertical Stack view". Correct me if am wrong? Apple doc link : https://developer.apple.com/documentation/uikit/uistackview/1616224-isbaselinerelativearrangement – Anand Jan 03 '18 at 07:39
2

In UIStackView,

bottom alignment: it aligns the component's bottom, i.e. the box of a UILabel, UITextField etc.

baseline aligmnent: to align the text's bottom you need to use baseline.

For more clarity on bottom and baseline refer to: https://stackoverflow.com/a/24541992/5716829

UIStackView provides 2 options to align the baseline,

  1. First baseline
  2. Last baseline

You can find a good explanation of both options here: https://stackoverflow.com/a/33934323/5716829

Now since your UILabels contain only single line text, both first and last baseline will work same.

In case you have multiline labels, and you want to align their text's bottom use Last Baseline.

Here is a screenshot of the view hierarchy:

enter image description here

PGDev
  • 23,751
  • 6
  • 34
  • 88
1

change the alignment of your stackView to "Last BaseLine", to achieve the same.

enter image description here

Madhur
  • 1,056
  • 9
  • 14
  • We can achieve the same thing without "Baseline Relative" option. "Baseline Relative" is applicable only for vertical stack view. Apple doc : "https://developer.apple.com/documentation/uikit/uistackview/1616224-isbaselinerelativearrangement" – Anand Jan 03 '18 at 07:42
  • Yes, we can achieve the desired output without using the "Baseline Relative" option. – Madhur Jan 03 '18 at 07:46