iOS:如何使用自动版式将视图的中心与另一个视图的底部对齐 [英] iOS: How to Align The Center of a View With The Bottom of Another View With AutoLayout
问题描述
我想使头部imageView的中心与蓝色标题imageView的底部保持对齐.
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?
屏幕4.0英寸 屏幕4.7英寸
screen 4.0inches screen 4.7inches
推荐答案
有很多方法可以做到这一点.我将展示其中一种方法.
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.
第1步
Step 1
首先，为了使椭圆形图像的中心与矩形图像的底部对齐，我们需要将矩形视图嵌入另一个可以命名为 Container View 的视图中.
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.
此容器视图将具有ff属性:
This container view will have the ff attributes:
- 透明背景色
- width等于屏幕宽度
- 高度将是矩形视图的高度的两倍(以后您
会知道为什么).
- 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).
对于容器视图的约束:
- 领导等于超级视图的领导
- 超级视图的顶部空间为0
- 在超级视图中水平居中.
- 通过自我设置长宽比.
完成后，约束将如下所示.
Once you are done, the constraints will look like this.
第2步
Step 2
现在对于矩形图像视图，约束将为:
Now for the rectangular image view, the constraints would be:
- 领先地位等于容器视图的领先地位
- 容器视图的顶部空间为0
- 尾随等于容器视图的尾随.
-
使用椭圆形图像视图设置长宽比
- 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
- 通过使用椭圆形图像视图设置长宽比.此矩形视图的尺寸变化将与椭圆形视图的尺寸变化成比例.
它看起来像这样:
第3步
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.
这将是结果:
第4步
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.
虚拟视图将具有ff属性:
The dummy view will have the ff attributes:
- 透明背景色
- 宽度和高度值只能为1
虚拟视图的矛盾之处:
- 在容器视图中垂直居中
- 在容器视图中水平居中
- 宽度和高度是固定的.
- 使用矩形视图分配垂直间距
这是应该怎么做:
好的，如果您按照上述步骤进行操作，那么您将获得效果.
Alright, if you did the steps above you will achieve the effect.
这是约束的概述:
我希望这会有所帮助. :)
I hope this helps. :)
证明有效！
我在模拟器中运行了...:D
I ran it in the simulator... :D
iPhone 4:
iPhone 5:
iPhone 6:
iPhone 6 Plus:
iPhone 6 Plus:
这篇关于iOS:如何使用自动版式将视图的中心与另一个视图的底部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
