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

Question

我正在尝试学习如何使用 AutoLayout 约束来制作动画。

我有两个 UIView，如下所示:

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

相反，我得到了这个:

这是我的代码:

- (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)高亮显示:

我承认我发现自动布局约束有点像打地鼠游戏。有人可以帮我了解我应该怎么做吗？

Answer 1

设置约束时，您需要考虑各个项目如何相互关联，并记住布局引擎需要能够计算每个项目的顶部、左侧和宽度/高度。太多的约束可能与约束不足一样产生问题。

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

对于灰色框，设置父 View 的尾部空间约束和父 View 的底部空间约束(它已经有红色框的前导空间约束)。最后，设置高度约束或顶部空间约束以进行监督。这是您要设置动画的约束，因此为其创建一个 IBOutlet 并根据需要在代码中更改它。