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 world and I'm trying to configure out how constraints work.

On document outline, I can see the added constraints:

I click on label UR and Size inspector show me following:

What is the difference between constraints aligned by first baseline to UL and aligned by baseline to UL? When I click on the size inspector on constraints button, it shows me the same line.

Solution 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

Solution 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.

Comments

[softshipper]

First of all, thanks very much for your answer. Where can I find good tutorials about constraints?

[Anurag Sharma]

@zero_coding I think in all the tutorials available on youtube and raywenderlich.com are good to follow. But you have to keep on practising the different-2 screens to learn them properly. Good luck!