iOS: How to Align The Center of a View With The Bottom of Another View With AutoLayout

Question

I want to make the center of the head imageView with the bottom of the blue title imageView's keep alignment.

How can I do it by using Autolayout?

screen 4.0inches screen 4.7inches

Swagger

Answer 1

There are a lot of ways to do this. I'll just show one of the ways.

OK, Let's do this step by step.

Step 1

First, in order to align the center of the oval image with the bottom of the rectangular image, we need to embed the rectangular view in another view in which we could name as the Container View.

This container view will have the ff attributes:

• transparent background color
• width is equal to the screen width
• height will be twice the height of the rectangular view(Later you
  will know why).

For the constraints of the Container View:

• Leading is equal to super view's leading
• top space to super view is 0
• Centered horizontally in super view.
• set aspect ratio with self.

Once you are done, the constraints will look like this.

Step 2

Now for the rectangular image view, the constraints would be:

• Leading is equal to the container view's leading
• Top space to container view is 0
• Trailing is equal to container view's trailing.

• Set aspect ratio with oval image view

  • By setting aspect ratio with the oval image view. The change in size of this rectangular view will be proportional with the change of size of the oval view.

It will look like this:

Step 3

This time, the contraints of the oval view:

• centered horizontally in container view
• centered vertically also in container view

• set aspect ratio with self

  • Setting aspect ration with self ensures that when the rectangular view expands in size, the change in size of the oval view will not cause distortion.

This will be the result:

Step 4

There one very important view to add. This view will ensure that the rectangular view will always be half the size of the container view so that the center of the oval view will always be aligned with the bottom of the rectangular view. So, we call this view that we will be adding, the dummy view.

The dummy view will have the ff attributes:

• transparent background color
• width and height value should only be 1

The dummy view's contraints:

• centered vertically in the container view
• centered horizontally in the container view
• width and height are fixed.
• assign vertical spacing with rectangular view

This is how it should be done:

Alright, if you did the steps above you will achieve the effect.

This will be the overview of the constraints:

I hope this helps. :)

Proof that this works!

I ran it in the simulator... :D

iPhone 4:

iPhone 5:

iPhone 6:

iPhone 6 Plus:

Ankylosis

Answer 2

Step 1: Create your views as shown below.

Step 2: Set background view constraints to all three edges.

Step 3: Set your own ratio. Since, you mentioned that you don't have known height.

Step 4: Select your center view and add width & height constraints as you want.

Step 5: Set center view as horizontal center in the superview as shown below

Step 6: Now select both background view & center view. Set align constraint to "Vertical centers".

Step 7: Now, you can see a constraint with a warning with wrong constant like below. Select that constraint

Step 8: In the Connections inspector, select the "second item" and change it to "bottom"

Step 9: That's it. If there is a warning, update your constraints. You can check in different simulator with any screen sizes.

You don't need any super views or new sibling to accomplish this. Easy way to make any view to center and keep it as bottom/top of another view.

Dagostino

Answer 3

This may help you. Totally based on AutoLayout, no extra view needed.

• First set some constraints on the height and width and the location of the Cover image. (blue one)

It is 0.4 of total height, equal width of the width, you can see its constrains.

• Then I fix the height and width of the Avatar (green) image, make it horizontally center in width.

Then choose both the cover image and avatar image, make them Align bottom edge.

Now it turns this.

• Last step, choose the 'Align Bottom to Cover Image', and make the constant to be half of the Avatar image's height. Done!

This is the simplest way I've found now.

Neilla

Answer 4

First I would place the background image and first WHILE HODLING SHIFT manually drag it until it is the right dimensions THEN tap the |o| looking icon at the bottom right of the screen I would uncheck the margins option and do left 0, top 0, right 0 and then bottom should be a larger number (should auto generate for you)

now place the 2nd UIImage...place it and size it how you like...now on the same icon |o| tap that and give it a height and width...add constraints...now go to the 2nd to last on the left (its like two stacked rectangles)..tap that and tap "horizontally in container...NOW tap the smaller image and hold control and drag to the larger image and let go...tap vertical spacing...

LASTLY....the far right icon which looks like a |o| but has a triangle...while one of the images is selected...tap the bottom "updtate frames"

Fanaticize

Thanks for your answer.Because the background image's height is not fixed, i can't set up a fixed vertical height(headImageView.frame.origin.y), but i want to the head image center keep alignment with the background image's bottom.How to implement？ – Swagger

i just recreated the scenario in about 2 minutes using my own instructions...and the result is how you want it...unless im misunderstanding you...why can't you set a fixed vertical height on the head? – Fanaticize

I want to fit different screen size.if size changed(for example 4.7 or 5.5), the head imageView's location is wrong. – Swagger

Answer 5

you have to apply autolayout Constraints with respect to your image not with your view. To get more details https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints

Bobbi

Explain how a stack view can help with views that need to overlap - currently this is a link only answer... – Switch

Answer 6

If you have 2 views (fixed one and float one) and your float has a fixed height, you can set vertical-space from float to fixed, with -height/2 value. example: if your button has height of 20, then set vertical-space to fixed-view with value -10

Phenol