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.0inc
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"
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.
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:
For the constraints of the Container View:
Once you are done, the constraints will look like this.
Step 2
Now for the rectangular image view, the constraints would be:
Set aspect ratio with oval image view
It will look like this:
Step 3
This time, the contraints of the oval 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:
The dummy view's contraints:
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:
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
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
This may help you. Totally based on AutoLayout, no extra view needed.
It is 0.4 of total height, equal width of the width, you can see its constrains.
Then choose both the cover image and avatar image, make them Align bottom edge.
Now it turns this.
This is the simplest way I've found now.