iOS: 如何使用 AutoLayout 将一个视图的中心与另一个视图的底部对齐
iOS: How to Align The Center of a View With The Bottom of Another View With AutoLayout
我想让头部imageView的中心和蓝色title imageView的底部保持对齐。
如何使用自动布局来实现？
屏幕4.0英寸
屏幕4.7英寸
首先，我会放置背景图片，然后在按住 SHIFT 的同时手动拖动它，直到尺寸合适，然后点击 |o|查看屏幕右下角的图标我会取消选中边距选项并执行左 0、上 0、右 0 然后底部应该是一个更大的数字（应该为你自动生成）
现在放置第二个 UIImage...放置它并根据您的喜好调整大小...现在在同一个图标上 |o|点击它并给它一个高度和宽度...添加约束...现在转到左边的倒数第二个（它就像两个堆叠的矩形）..点击它并点击“水平在容器中......现在点击较小的图像并按住控制键并拖动到较大的图像并松开...点击垂直间距...
最后....最右边的图标看起来像|o|但是有一个三角形...选择其中一张图像时...点击底部 "updtate frames"
你必须对你的图像而不是你的视图应用自动布局约束。
获取更多详情
https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints
有很多方法可以做到这一点。我只展示其中一种方法。
好的，让我们一步一步来。
步骤 1
首先，为了将椭圆形图像的中心与矩形图像的底部对齐，我们需要将矩形视图嵌入另一个视图中，我们可以将其命名为 Container View.
此容器视图将具有 ff 属性：
- t运行透明背景色
- 宽度等于屏幕宽度
- 高度将是矩形视图高度的两倍（稍后你
会知道为什么的）。
对于容器视图的约束：
- leading 等于 super view 的leading
- top space到超级view是0
- 在超级视图中水平居中。
- 自己设置纵横比
完成后，约束将如下所示。
步骤 2
现在对于矩形图像视图，约束为：
- 行距等于容器视图的行距
- 顶部space到容器视图是0
- 尾随等于容器视图的尾随。
设置椭圆图像视图的纵横比
- 通过设置椭圆图像视图的纵横比。此矩形视图的大小变化将与椭圆形视图的大小变化成正比。
它将看起来像这样：
步骤 3
这次椭圆视图的约束：
- 在容器视图中水平居中
- 在容器视图中也垂直居中
自己设置宽高比
• 设置纵横比为self，保证当矩形视图尺寸扩大时，椭圆视图尺寸变化不会造成变形。
这将是结果：
步骤 4
有一个非常重要的观点要补充。此视图将确保矩形视图始终是容器视图大小的一半，以便椭圆形视图的中心始终与矩形视图的底部对齐。因此，我们将要添加的这个视图称为虚拟视图。
虚拟视图将具有 ff 属性：
- t运行透明背景色
- 宽度和高度值只能为 1
虚拟视图的限制：
- 在容器视图中垂直居中
- 在容器视图中水平居中
- 宽度和高度是固定的。
- 为矩形视图分配垂直间距
应该这样做：
好了，按照上面的步骤就可以达到效果了。
这将是约束的概述：
希望对您有所帮助。 :)
证明这是可行的！
我运行它在模拟器中...:D
iPhone 4:
iPhone 5:
iPhone 6:
iPhone 6 加上：
这可能对您有所帮助。完全基于 AutoLayout，不需要额外的视图。
- 首先对封面图片的高宽和位置进行一些限制。 （蓝一）
它是总高的0.4，宽度等于宽度，你可以看到它的约束。
- 然后我固定头像（绿色）图像的高度和宽度，使其在宽度上水平居中。
然后选择封面图和头像，让它们对齐底边。
现在变成这样了。
- 最后一步，选择'Align Bottom to Cover Image'，常量为头像高度的一半。完成！
这是我目前找到的最简单的方法。
第 1 步：创建您的视图，如下所示。
第 2 步：为所有三个边设置背景视图约束。
第 3 步：设置您自己的比例。因为，你提到你不知道身高。
第 4 步：Select 您的中心视图并根据需要添加宽度和高度限制。
第五步：在superview中设置center view为水平居中，如下图
第 6 步：现在 select 背景视图和中心视图。将对齐约束设置为 "Vertical centers".
第 7 步：现在，您可以看到一个带有错误常量警告的约束，如下所示。 Select那个约束
第 8 步：在连接检查器中，select 将 "second item" 更改为 "bottom"
第 9 步：就是这样。如果出现警告，请更新您的约束。您可以签入任何屏幕尺寸的不同模拟器。
您不需要任何超级视图或新兄弟来完成此操作。使任何视图居中并将其保持为另一个视图的 bottom/top 的简单方法。
如果您有 2 个视图（固定视图和浮动视图）并且浮动高度固定，您可以将 vertical-space 从浮动设置为固定，并设置 -height/2 值。
示例：如果您的按钮高度为 20，则将 vertical-space 设置为 fixed-view，值为 -10
我想让头部imageView的中心和蓝色title imageView的底部保持对齐。
如何使用自动布局来实现？
屏幕4.0英寸
首先，我会放置背景图片，然后在按住 SHIFT 的同时手动拖动它，直到尺寸合适，然后点击 |o|查看屏幕右下角的图标我会取消选中边距选项并执行左 0、上 0、右 0 然后底部应该是一个更大的数字（应该为你自动生成）
现在放置第二个 UIImage...放置它并根据您的喜好调整大小...现在在同一个图标上 |o|点击它并给它一个高度和宽度...添加约束...现在转到左边的倒数第二个（它就像两个堆叠的矩形）..点击它并点击“水平在容器中......现在点击较小的图像并按住控制键并拖动到较大的图像并松开...点击垂直间距...
最后....最右边的图标看起来像|o|但是有一个三角形...选择其中一张图像时...点击底部 "updtate frames"
你必须对你的图像而不是你的视图应用自动布局约束。 获取更多详情 https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints
有很多方法可以做到这一点。我只展示其中一种方法。
好的，让我们一步一步来。
步骤 1
首先，为了将椭圆形图像的中心与矩形图像的底部对齐，我们需要将矩形视图嵌入另一个视图中，我们可以将其命名为 Container View.
此容器视图将具有 ff 属性：
- t运行透明背景色
- 宽度等于屏幕宽度
- 高度将是矩形视图高度的两倍（稍后你
会知道为什么的）。
对于容器视图的约束：
- leading 等于 super view 的leading
- top space到超级view是0
- 在超级视图中水平居中。
- 自己设置纵横比
完成后，约束将如下所示。
步骤 2
现在对于矩形图像视图，约束为：
- 行距等于容器视图的行距
- 顶部space到容器视图是0
- 尾随等于容器视图的尾随。
设置椭圆图像视图的纵横比
- 通过设置椭圆图像视图的纵横比。此矩形视图的大小变化将与椭圆形视图的大小变化成正比。
它将看起来像这样：
步骤 3
这次椭圆视图的约束：
- 在容器视图中水平居中
- 在容器视图中也垂直居中
自己设置宽高比
• 设置纵横比为self，保证当矩形视图尺寸扩大时，椭圆视图尺寸变化不会造成变形。
这将是结果：
步骤 4
有一个非常重要的观点要补充。此视图将确保矩形视图始终是容器视图大小的一半，以便椭圆形视图的中心始终与矩形视图的底部对齐。因此，我们将要添加的这个视图称为虚拟视图。
虚拟视图将具有 ff 属性：
- t运行透明背景色
- 宽度和高度值只能为 1
虚拟视图的限制：
- 在容器视图中垂直居中
- 在容器视图中水平居中
- 宽度和高度是固定的。
- 为矩形视图分配垂直间距
应该这样做：
好了，按照上面的步骤就可以达到效果了。
这将是约束的概述：
希望对您有所帮助。 :)
证明这是可行的！
我运行它在模拟器中...:D
iPhone 4:
iPhone 5:
iPhone 6:
iPhone 6 加上：
这可能对您有所帮助。完全基于 AutoLayout，不需要额外的视图。
- 首先对封面图片的高宽和位置进行一些限制。 （蓝一）
它是总高的0.4，宽度等于宽度，你可以看到它的约束。
- 然后我固定头像（绿色）图像的高度和宽度，使其在宽度上水平居中。
然后选择封面图和头像，让它们对齐底边。
现在变成这样了。
- 最后一步，选择'Align Bottom to Cover Image'，常量为头像高度的一半。完成！
这是我目前找到的最简单的方法。
第 1 步：创建您的视图，如下所示。
第 2 步：为所有三个边设置背景视图约束。
第 3 步：设置您自己的比例。因为，你提到你不知道身高。
第 4 步：Select 您的中心视图并根据需要添加宽度和高度限制。
第五步：在superview中设置center view为水平居中，如下图
第 6 步：现在 select 背景视图和中心视图。将对齐约束设置为 "Vertical centers".
第 7 步：现在，您可以看到一个带有错误常量警告的约束，如下所示。 Select那个约束
第 8 步：在连接检查器中，select 将 "second item" 更改为 "bottom"
第 9 步：就是这样。如果出现警告，请更新您的约束。您可以签入任何屏幕尺寸的不同模拟器。
您不需要任何超级视图或新兄弟来完成此操作。使任何视图居中并将其保持为另一个视图的 bottom/top 的简单方法。
如果您有 2 个视图（固定视图和浮动视图）并且浮动高度固定，您可以将 vertical-space 从浮动设置为固定，并设置 -height/2 值。
示例：如果您的按钮高度为 20，则将 vertical-space 设置为 fixed-view，值为 -10