CODEWITHSUNDEEP
iosautolayout
Jamie
Jamie

Reputation: 10906

Autolayout constraint left

I'm just getting started with iOS development, and I'm following a series for making a game.

I want to align the circle (see screenshot) but there is no constraint for left

How can I make sure it aligns left for example on the iPhone 4 (see screenshot).

enter image description here

Xcode version (7.3.1 (7D1014))

Upvotes: 1

Views: 201

Answers (3)

Gil Sand
Gil Sand

Reputation: 6038

First step, the most important one :

Remove that circle, and make sure your view has no constraint exception (look at the debugger) and that everything is where it should, on all phones. Ff that is correct, move on to the next steps.

Technically you should just be using Left or Leading, they're almost identical. (Leading is actually different, it'll align to the right in Arabic localized phones for example).

So what you wanna do is make sure your view has all its constraints set correctly, obviously, and for what I'm looking at you just need Top, Bottom Left and Right (or Leading and Trailing).

Just drag & drop from the circle to the view that is supposed to be the "anchor". For example, I'm guessing your top left circle will have its Left constraint going against the border of the view, and Top/Right/Bottom will be against the black bars. Easy.

For the left, drag & drop between the circle and the superview (the uppermost view in the hierarchy) and select Left/Leading. Then select the constraint and look at the properties.

Look at the image I have as an example. If you see the constraint properties on the right, I'm saying :

  • First item = "The leading side of my message box"
  • Relation = Should be equal (in distance)
  • Second Item = To the leading side of the Header label

Its plain english, the left side should align to the left side.

Your case is similar, you want the left side of your Image to be aligned with the left side of the View !

Now the 3 others constraints are sliiiiightly different, because you don't want Right-on-Right, Top-on-Top and Bottom-on-Bottom.

You actually need the Bottom of your circle to be aligned with the Top of the view under it, the Right of your circle to be aligned with the Left of the view on its right, and the top of the circle to be aligned with the bottom of the top bar.

Following?

Now you can adjust these constraints, you have a "Constant". This is the distance that the "Equal" refers to. If you say "the distance between this and that should be equal to zero", the two views will be sticking together. So usually you can add some margin.

Important note ! If you use the drop down for each Item (first and Second), you will see you can tick/untick margins ! This is important, it automatically adds Apple-advised margins, which is a value of 8, that is counted on top of the Constant value. So if you HAVE a margin and a constant of 0, you actually have a spacing of 8. This is to make your life easier because you'll usually have many margins and its easier to count from zero.

Any question?

Upvotes: 1

Idan
Idan

Reputation: 5450

Option 1: Hold control button, drag to the left and select `Leading spaces to container. The object that you are defining the space from should be highlighted. You should get the following menu:

menu

Option 2: 1. Select the object 2. Press the pin button 3. Set the distance from the frame 4. Pressed the red button 5. Select Add constraints

add constrains

Upvotes: 1

hawkstrider
hawkstrider

Reputation: 4341

Leading is left, and Trailing is right

Upvotes: 1

Related Questions