4

I started iOS development a week ago and I'm currently learning AutoLayout. and sadly I can't wrap my head around the Leading & Trailing constraints and when to use them, I don't even understand them at all. I have done some research and I'm just actually more confused now. Can someone give some examples?

This definition is form the Apple website:

The values increase as you move towards the trailing edge. For a left-to-right layout directions, the values increase as you move to the right. For a right-to-left layout direction, the values increase as you move left.

https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html

Thanks

piet.t
  • 11,718
  • 21
  • 43
  • 52
John
  • 141
  • 4
  • 12
  • If you look at the WWDC videos over the last few years (free) there are various videos on Autolayout. These explain trailing / leading and the switching between left-to-right and right-to-left layouts. – Robotic Cat Dec 24 '16 at 18:33

4 Answers4

10

TL;DR

They couldn't just name it left and right because it had to make sense in both layout orientations: left-to-right and right-to-left. Hence Trailing and Leading.

Longer Answer

I think the question you're asking yourself is why the heck Apple is not just naming it left and right. What's with the trailing and leading.

The reason behind this is that there might be 2 different layouts. Starting with iOS 9, the UI layout for left-to-right languages (like English) is.. well left-to-right. But in case of Arabic for example, it's right-to-left.

However Autolayout is smart enough that you don't need to setup your layout twice for these 2 types of layouts. You just set it up once and the system auto-inverts it in case your app supports right-to-left languages.

Sergey Katranuk
  • 1,162
  • 1
  • 13
  • 23
  • I'm just not sure when to use it actually. – John Dec 24 '16 at 18:50
  • 3
    For the most part, especially in the beginning of your learning, you can just think of Leading as Left and Trailing as Right. So for example if you want to attach the left side of a view to the left side of it's super view. You will create a constraint that connects the leading side of your subview to the leading side of it's super view – Sergey Katranuk Dec 24 '16 at 18:55
4

For this answer, ignore languages like Arabic and Hebrew that flow right to left. I'm going to answer for the majority of languages that flow left to right.

For those languages, the "leading" constraint determines the space on the left of an object, and the "trailing" constraint determines the space on the right side. (A good mnemonic for this is that left and leading both start with "L".)

For languages that flow the opposite way, the sides are switched, but the "leading" still pins an object to the leading edge (The side where you start reading.)

Duncan C
  • 128,072
  • 22
  • 173
  • 272
0

Leading means the starting point of the view and trailing means the ending point of the view.

For example, if a view has a frame (x: 0, y: 0, width: 100, height: 100) its leading will me 0 and trailing will be 100.

So if you move right from the leading the distance between the leading and the point moved will increase and similarly this happens in case of trailing.

Aakash
  • 2,239
  • 15
  • 23
0

This was covered (briefly) in one of the WWDC 2015 videos on the Mysteries of Autolayout (I think it was part 1 but both are worth watching).

Left and Right constraints are absolute, they will always refer to the left/right of the screen or the control. Leading and trailing constraints are affected by the device locale; In locales where the reading direction is left to right (English, French, Spanish and so on) leading & left (and trailing & right) can be used interchangeably. In locales where the reading direction is right to left (e.g Hebrew) then 'leading' will be the right side and 'trailing' will be the left side.

The advice in the video was you should almost always use leading/trailing rather than left/right unless you have a specific requirement for absolute left/right.

Consider the typical 'form' of a label and a text field. If you use leading/trailing constraints then you will get the label on the left and text field on the right for an English locale and label on the right, text field on the left for a Hebrew locale.

If you made a children's app where you were teaching left from right and you always wanted the 'left' button on the left of the screen then left/right constraints would be appropriate.

Check the original answer here: Difference between leftAnchor and leadingAnchor?

Carlos Ughini
  • 41
  • 6