Question

我正在尝试学习如何使用AutoLayout约束设置动画。

我有两个UIView，如下所示：

enter image description here

当我点击“向上”按钮时，我希望结果看起来像这样。我希望红色矩形保持相同的大小，但要保持固定在灰色矩形的顶部并继续骑行，如下所示：

enter image description here

相反，我明白了：

enter image description here

这是我的代码：

- (IBAction)upButton:(UIButton *)sender
{
    self.heightConstraint.constant = 20;
    [UIView animateWithDuration:1.0
                     animations:^{
                         [self.view layoutIfNeeded];
                     } completion:nil];
}

- (IBAction)downButton:(UIButton *)sender
{
    self.heightConstraint.constant = 438;
    [UIView animateWithDuration:1.0
                     animations:^{
                         [self.view layoutIfNeeded];
                     } completion:nil];

}

约束情况如下所示（截图 - 我不知道如何从文档大纲中复制实际列表）。突出显示相关的动画约束（self.heightConstraint）：

enter image description here

我承认我发现Auto Layout Constraints有点像玩Whack-A-Mole。有人可以帮我理解我应该怎么做吗？

Answer 1

设置约束时，您需要考虑各个项目之间的关系，并记住布局引擎需要能够计算每个项目的顶部，左侧和宽度/高度。太多的约束可能与不充分的约束一样有问题。

在你的情况下，你想要修复红色框的大小，所以我会为它设置宽度和高度的约束。您还希望其相对于屏幕左边缘的位置是固定的，因此将前导空间约束设置为超视图。您希望其灰色框的空间是固定的，因此将灰色框设置为尾随空格约束。最后，您希望红色框的顶部与灰色框相同，因此选择IB中的橙色框，按住Control键并拖动到灰色框，然后从弹出框中选择“顶部”。

对于灰色框，为superview设置尾随空间的约束，为superview设置底部空间的约束（它对红色框已经有一个前导空格约束）。最后，要么为高度设置约束，要么为topview设置约束以进行超视图。这是您将设置动画的约束，因此请为其创建一个IBOutlet，并根据需要在代码中更改它。

Answer 2

我建议修理橙色盒子的高度。如果橙色框有底部约束，请将其删除。

这些是我在橙色盒子上使用的约束：超级视图顶部/通向超级视图/尾随灰色框/ 高度固定 /宽度固定

这些是我在灰盒子上使用的约束：超级视图顶部/通向橙色框/ 底部到超级视图 /宽度固定

请注意，我加粗的两个约束基本上控制了每个视图的高度。

我将IBOutlet附加到每个视图的顶部约束，以便我可以修改这些值以匹配您想要的行为。

使一个UIView跟踪另一个约束的动画

2 个答案: