CODEWITHSUNDEEP
iosxcodeautolayoutconstraints
Alessandro Giovagnoli
Alessandro Giovagnoli

Reputation: 47

Xcode adding constraints so an ImageView

I'm making an app in Xcode where there is a trunk in the middle of the screen and a branch on the right as you can see in the image (I've put two buttons which represent the trunk and the branch. The blue button is the trunk while the red one is the branch).

Using the constraints I managed to resize the trunk properly in every iPhone device, but I am not able to do the same with the branch.

Can you tell me how to keep this configuration of the trunk and the branch using constraints?

I've tried adding: -Align horizontally in container, using the "Current canvas value" -Aspect ratio -Aspect ratio in proportion with the Trunk but it doesn't work

Here is the image of the buttons which represents the trunk and the branch:

Tree and branch in emulator

Upvotes: 0

Views: 3428

Answers (2)

vacawama
vacawama

Reputation: 154533

You can do this with 8 constraints:

  1. BlueButton.Top = Superview.Top.Margin
  2. BlueButton.Bottom = BottomLayoutGuide.Top
  3. BlueButton.Width = Superview.Width with multiplier 3:10
  4. BlueButton.CenterX = Superview.CenterX
  5. RedButton.Leading = BlueButton.Trailing
  6. RedButton.Trailing = Superview.Trailing.Margin
  7. RedButton.Width = RedButton.Height with multiplier 10:3
  8. RedButton.Bottom = Superview.Bottom with multiplier 0.4 (to make branch 60% of way up the tree)

To create constraints 1 and 2:

Click on the blue button to select it. Click on the Pin [-[]-] icon. Turn on the top and bottom orange I-beams and click [Add 2 Constraints].

To create constraint 3:

control-drag from blue button to white background. Choose Equal Widths from the pop-up. To set the multiplier, click again on the blue button and find the Equal width to superview constraint in the Size Inspector on the right. Click on Edit and set the multiplier to 3:10.

To create constraint 4:

control-drag from blue button to white background. Choose Center Horizontally in Container from the pop-up.

To create constraint 5:

control-drag from blue button to red button. Choose Horizontal Spacing from the pop-up.

To create constraint 6:

control-drag upwards at a 45 degree angle from center of the red button to the right edge of the background. Choose Trailing Space to Container Margin from the pop-up.

To create constraint 7:

Completely inside the red button, control-drag up and to the right. Choose Aspect Ratio from the pop-up. Find the Ratio constraint in the Size Inspector, click on Edit and set the multiplier to 10:3.

To create constraint 8:

This last one is the hardest, but you can do it! Click on the red button. Now, in the Document Outline to the left of the Storyboard you'll see that the button is highlighted in gray. Hold down the command key and click on the View that contains the button. It should look like this when both the view and the button are highlighted:

enter image description here

Now, click on the Align Icon (to the left of Pin [-[]-]), click the checkbox for Bottom Edges, and click [Add 1 Constraint].

Now, click on your red button again, and find the Bottom Space to: Superview constraint in the Size Inspector. Double click on it to open it up:

Bottom Space to: Superview constraint

This is what we want it to look like. You'll probably have to change 2 things. If your first item is Superview.Bottom then you'll need to swap the first and second items. To do that, click on Superview.Bottom and choose Reverse first and second items.

Next, change the multiplier to 0.4 This means that the red button's bottom is 40% of the way from the top as the Superview's bottom, which makes the red button 60% up from the bottom of the screen.

Whew! And that's it!

iPhone6s Plus

iPhone 6s

iPhone 5s

iPhone 4s

Upvotes: 1

Kiran eldho
Kiran eldho

Reputation: 214

  1. First give a height to your branch button.
  2. Then give leading space to trunc button zero and trailing space to superview zero.

Now only one more information is required for xcode to function autolayout properly.i.e.the y postion of branch button. if you want your branch position to be vertically centre

  1. Give vertically centre in container constaint to branch button

Upvotes: 1

Related Questions