Understanding “firstBaseLine” vs. “baseLine” AutoLayout Constraint

Question

I\'ve created the following view that looks as follow:

And used Add missing constraints t automatically add constraints. I am pretty new in iOS

Answer 1

From the Apple Docs:

NSLayoutAttributeBaseline
The object’s baseline.
Available in iOS 6.0 and later.

NSLayoutAttributeFirstBaseline
The object’s baseline. For objects with more than one line of text, this is the baseline for the topmost line of text.
Available in iOS 8.0 and later.

Here is also a screenshot of the difference when aligning to a three line label. The upper green label is using NSLayoutAttributeFirstBaseline and the lower green label is using NSLayoutAttributeBaseline. These are the only constraints on the two green labels besides they are both Horizontally pinned 40 from the Pink Label

Answer 2

I don't recommend ever using "Add Missing Constraints." It is a very unpredictable wizard that DWIW (does what it wants). Learn each constraint and add it by hand. Ctrl-drag between objects in the scene hierarchy; use the constraints inspector and edit numeric values; use 'Update Frames' from the triangle pop-up; delete constraints from the inspector; repeat until you get it.

firstBaseLine refers to the top baseline of a multi-line object: Storyboard warning : First baseline layout attribute before iOS 8.0

if the label or text field involved only has one line, it's a useless constraint.

When you want two side-by-side one-line blotches of text to align vertically, even though their font sizes, ascenders, and baseline descenders may differ, use baseLine alignment. It will look natural like the strings are on the same line.

Bottom, Top, and Center vertical alignments are also possible and more appropriate for non-text objects.