iOS：如何使用AutoLayout将视图的中心与另一个视图的底部对齐

时间：2016-05-22 06:21:53

标签： ios ios-autolayout

我想使用蓝色标题图像的底部来保持头部imageView的中心，并保持对齐。

如何使用Autolayout进行操作？

屏幕4.0英寸 [screen 4.7inches] 屏幕4.7英寸 screen 4.0inches [screen 4.7inches

6 个答案:

答案 0 :(得分：18)

第1步：创建您的视图，如下所示。

enter image description here

步骤2：将背景视图约束设置为所有三个边。

enter image description here

第3步：设置自己的比例。因为，你提到你不知道身高。

enter image description here

第4步：选择您的中心视图并添加宽度＆amp;你想要的高度限制。

enter image description here

步骤5：在超视图中将中心视图设置为水平中心，如下所示

enter image description here

步骤6：现在选择背景视图和中间视角。将对齐约束设置为＆＃34;垂直中心＆＃34;。

enter image description here

步骤7：现在，您可以看到带有错误常量警告的约束，如下所示。选择该约束

enter image description here

步骤8：在Connections检查器中，选择＆＃34;第二项＆＃34;并将其更改为＆＃34; bottom＆＃34;

enter image description here

第9步：那就是它。如果有警告，请更新约束。您可以使用任何屏幕尺寸登记不同的模拟器。

enter image description here

您不需要任何超级视图或新兄弟来完成此任务。轻松地使任何视图居中并将其保持为另一视图的底部/顶部。

答案 1 :(得分：12)

有很多方法可以做到这一点。我只是展示其中一种方式。

好的，让我们一步一步来做。

第1步

首先，为了将椭圆形图像的中心与矩形图像的底部对齐，我们需要将矩形视图嵌入到另一个视图中，我们可以将其命名为容器视图。

此容器视图将具有ff属性：

  • 透明背景色
  • 宽度等于屏幕宽度
  • 高度将是矩形视图高度的两倍（稍后你 会知道为什么）。

对于容器视图的约束：

  • 领先等于超级观点的领先
  • 超级视图的顶部空间为0
  • 以超级视图水平居中。
  • 设置自我宽高比。

完成后，约束将如下所示。

enter image description here

第2步

现在对于矩形图像视图，约束将是：

  • 前导等于容器视图的前导
  • 容器视图的顶部空间为0
  • 尾随等于容器视图的尾随。

  • 使用椭圆图像视图设置纵横比

    • 通过椭圆图像视图设置纵横比。此矩形视图的大小变化将与椭圆视图的大小变化成比例。

看起来像这样：

enter image description here

第3步

这次是椭圆形视图的约束：

  • 在容器视图中水平居中
  • 也在容器视图中垂直居中

  • 使用self设置纵横比

    •使用self设置纵横比可确保当矩形视图的大小扩大时，椭圆视图的大小变化不会导致失真。

这将是结果：

enter image description here

第4步

有一个非常重要的观点要补充。此视图将确保矩形视图始终是容器视图大小的一半，以便椭圆视图的中心始终与矩形视图的底部对齐。所以，我们称之为我们将添加虚拟视图的视图。

虚拟视图将具有ff属性：

  • 透明背景色
  • 宽度和高度值应仅为1

虚拟视图的约束：

  • 在容器视图中垂直居中
  • 在容器视图中水平居中
  • 宽度和高度是固定的。
  • 使用矩形视图指定垂直间距

这是应该做的：

enter image description here

好吧，如果你按照上面的步骤操作，你就会达到效果。

这将是约束的概述：

enter image description here

我希望这会有所帮助。 ：）

证明这是有效的！

我在模拟器中运行它......：D

iPhone 4：

enter image description here

iPhone 5：

enter image description here

iPhone 6：

enter image description here

iPhone 6 Plus：

enter image description here

答案 2 :(得分：7)

这可能会对你有所帮助。完全基于AutoLayout，不需要额外的视图。

  • 首先对封面图像的高度和宽度以及位置设置一些约束。 （蓝色）

它是总高度的0.4倍，宽度的宽度相等，你可以看到它的约束。

step1

  • 然后我修复了阿凡达（绿色）图像的高度和宽度，使其在宽度上水平居中。

然后选择封面图像和头像图像，使它们对齐底边。

step3

现在它变成了这个。

step4

  • 最后一步，选择“将底部对齐以覆盖图像”，并使常量变为“阿凡达”图像高度的一半。完成！

step5

这是我现在发现的最简单的方法。

答案 3 :(得分：1)

您必须对图像应用自动布局约束，而不是视图。 获取更多细节 https://www.raywenderlich.com/115444/auto-layout-tutorial-in-ios-9-part-2-constraints

答案 4 :(得分：0)

首先我会放置背景图像，然后手动拖动它，直到它是正确的尺寸然后点击| o |在屏幕右下方看图标我会取消选中边距选项并左边0，前0，右边0然后底部应该是一个更大的数字（应自动为你生成）

现在放置第二个UIImage ...放置它并按照你喜欢的方式调整大小...现在使用相同的图标| o |点击它并给它一个高度和宽度...添加约束...现在转到左边的第二个到最后一个（它像两个堆叠的矩形）..点击它并轻轻地在容器中点击＃34;现在点击较小的图像并保持控制并拖动到较大的图像然后放开...点击垂直间距......

最后......最右边的图标，看起来像是| o |但是有一个三角形......当选择其中一个图像时......点击底部＆＃34;更新框架＆＃34;

答案 5 :(得分：0)

如果您有2个视图（固定一个视图和一个浮动视图），并且浮动对象具有固定的高度，则可以使用-height/2值将浮动对象的垂直空间设置为固定。 示例：如果您的按钮的高度为20，则将垂直空间设置为值为-10的固定视图

enter image description here

相关问题
最新问题