IOS: how to align the center of the view from the bottom of another view using AutoLayout

Question

I want to make the center of the head of the imageView with the bottom of the blue header of the imageView to maintain alignment.

How to do this using Autolayout?

screen 4.0inches 4.7inches screen

Answer 1

There are many ways to do this. I will just show one of the ways.

OK, do it 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 call the Container View .

This kind of container will have ff attributes:

• transparent background color
• width equals screen width
• the height will be twice the height of the rectangular view (later you
  will know why).

For restrictions on the type of container:

• The leader is equal to the super-view, the leader
• top superview space - 0
• It is centered horizontally in super-view mode.
• set the aspect ratio to yourself.

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

Step 2

Now, to represent a rectangular image, the restrictions will be:

• Guide value matches container view
• The top space for the container view is 0
• Trailing is equal to the completion of the container view.

• Set aspect ratio with oval image

  • By setting the image format with an oval image. Resizing this rectangular view will be proportional to resizing the oval.

It will look like this:

Step 3

This time the contours are oval:

• horizontally in the form of a container
• vertically also in the form of a container

• set aspect ratio to self

  • Setting up an aspect using self ensures that when you increase the size of a rectangular representation, resizing the oval representation will not cause distortion.

This will be the result:

Step 4

There is one very important look at the addition. This representation ensures that the rectangular view will always be half the size of the container, so that the center of the oval view will always be aligned with the bottom of the rectangular view. So, we call this opinion that we will add, a dummy view.

The dummy representation will have ff attributes:

• transparent background color
• Width and height must be 1

Items of fictitious representation:

• vertically in the container view
• horizontally in the form of a container
• width and height are fixed.
• assign a vertical distance with a rectangular view

Here's how it should be done:

Well, if you took the steps above, you will achieve the effect.

This will be an overview of the limitations:

Hope this helps. :)

Proof that it works!

I ran it in a simulator ...: D

iPhone 4:

iPhone 5:

iPhone 6:

iPhone 6 Plus:

Answer 2

Step 1. Create your views as shown below.

Step 2: Set the background representation limits for all three edges.

Step 3: Set your own ratio. Since you mentioned that you do not know the height.

Step 4. Select the center view and add the width and height restrictions as you want.

Step 5: Set the center view as a horizontal center in supervisor mode, as shown below.

Step 6: Now select the background and view in the center. Set the alignment constraint to Vertical Centers.

Step 7: Now you can see the warning constraint with the wrong constant, as shown below. Choose this restriction

Step 8: In the Connection Inspector, select the “second item” and change it to “bottom”

Step 9: This. If there is a warning, update your restrictions. You can check out various simulators with any screen size.

You do not need supervisors or a new brother for this. Easy way to make any view in the center and save it as bottom / top of another view.

Answer 3

This can help you. Completely based on AutoLayout, additional viewing is not required.

• First, set some restrictions on the height and width and location of the cover image. (blue)

This is 0.4 of the total height equal to the width of the width, you can see its limitations.

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

Then select the cover image and avatar image, make them align the bottom edge.

Now he is turning it.

• In the last step, select "Align from bottom to cover" and make the constant equal to half the height of the Avatar image. Done!

This is the easiest way I've found now.

Answer 4

you need to apply autodetection restrictions to your image not with your appearance. For more information https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints

Answer 5

First I would place the background image and first WHILE HODLING SHIFT manually drag it until it becomes the correct size. THEN touch | o | in the lower right corner of the screen I would uncheck the box and leave 0, top 0, right 0, and then the bottom should be a large number (should automatically generate for you)

now place the second UIImage ... place it and size it as you like ... now on the same icon | o | touch this and give it a height and width ... add restrictions ... now go to the 2nd last on the left (for example, two laid out rectangles) .. tap this and tap "horizontally in the container ... NOW click the small image and hold control and drag to larger image and release ... click vertical distance ...

LAST .... icon on the right that looks like | o | but has a triangle ... while one of the images is selected ... tap the lower "refresh frames"

Answer 6

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