UIView动画更改与自动布局约束 [英] UIView animated changes with auto layout constraints

问题描述

说我有一个像下面这样的项目：

有两个 UIView c> yellowBox ，另一个名为 redBox 。自动布局约束规定 yellowBox 是从超级视图的顶部开始的60个点，具有350个前导和尾随空格（即，视图的左侧和右侧）。 redBox 具有相同的前导和尾随空格约束。在两个框之间有一个垂直空间约束0，表示 yellowBox 的底部应该总是直接在 redBox 。

当用户点击展开黄色框按钮时，我想要 yellowBox 增加，结果， redBox 向下移动以继续满足垂直空间约束（即 yellowBox 总是在 redBox 之上。这是动画代码：

   - （IBAction）expandYellowBox：（id）sender {
 
 [ UIView animateWithDuration：0.5 
 animations：^ {
 CGRect newFrame = self.yellowBox.frame; 
 newFrame.size.height + = 50; 
 self.yellowBox.frame = newFrame; 
}]; 
 
} 
  

但是，我无法正常工作。正如您可以通过红色图标看到的，目前的约束有一个问题：

这是公平的，因为没有办法自动布局知道框的高度。但是，我不知道如何解决这个问题，它将允许框被调整大小和移动。例如，如果我在 yellowBox 上指定高度约束，那么将阻止它被调整大小。如果我设置高度约束为大于或等于（允许 yellowBox height增加），那么我得到一个不同的约束错误： / p>

>

所有约束都是使用storyboard中的Xcode建立的 - 没有使用代码编写。

任何帮助非常感激。 >

---

编辑：结果是 yellowBox 正在增长，当按钮被点击 - 它只是我不能告诉，因为它出现在 redBox 后面。我只注意到点击四次后，它开始出现在 redBox 的底部。但是，同样的问题仍然存在 - 如何让 redBox 永远贴在 yellowBox 的底部。 / p>

解决方案

按照 shwet-solanki ，但在更改约束后添加以下行：

  [self.view layoutIfNeeded]; 
  

IBAction如下所示：

   - （IBAction）expandYellowBox：（id）sender {
 
 [UIView animateWithDuration：0.5 
 animations：^ {
 self.yellowBoxHeightConstraint.constant + = 50; 
 [self.view layoutIfNeeded]; 
}]; 
} 
  

其中 yellowBoxHeightConstraint IBOutlet 的高度约束 yellowBox 。
希望这有帮助。

Say that I have a project which looks like the following:

There are two UIViews - one called yellowBox and the other called redBox. The auto layout constraints dictate that the yellowBox is 60 points from the top of the superview with 350 points leading and trailing spaces (i.e. to left and right of the view). The redBox has the same leading and trailing space constraints. There is a vertical space constraint between the two boxes of 0 to indicate that the bottom of the yellowBox should always be directly on top of the redBox.

When the user taps the Expand Yellow Box button, I would like the height of the yellowBox to increase and, as a result, the redBox moves down to continue satisfying the vertical space constraint (that the yellowBox is always on top of the redBox). Here is the animation code:

- (IBAction)expandYellowBox:(id)sender {

    [UIView animateWithDuration:0.5
                     animations:^{
                         CGRect newFrame = self.yellowBox.frame;
                         newFrame.size.height += 50;
                         self.yellowBox.frame = newFrame;
                     }];

}

However, I have been unable to get this working properly. As you can see by the red icon, there is a problem with the constraints at the moment:

which is fair enough, as there's no way for auto layout to know the height of the boxes. However, I don't know how to resolve this issue in such a way that it will allow for the boxes to be resized and moved. For example, if I specify a height constraint on the yellowBox then that will prevent it from being resized. If I set the height constraint to be greater than or equal (to allow the yellowBox height to increase) then I get a different constraint error:

All constraints have been established using Xcode in the storyboard - none have been written in code.

Any help greatly appreciated.

---

EDIT: As it turns out, the yellowBox is growing when the button is clicked - it's just I couldn't tell because it appears behind the redBox. I only noticed after clicking it around four times and it started appearing out the bottom of the redBox. However, the same question still remains - how to get the redBox to always stick to the bottom of the yellowBox.

解决方案

Try it as mentioned by shwet-solanki, but add the following line after changing the constraint:

[self.view layoutIfNeeded];

the IBAction would look like:

- (IBAction)expandYellowBox:(id)sender {

[UIView animateWithDuration:0.5
                 animations:^{
                     self.yellowBoxHeightConstraint.constant += 50;
                     [self.view layoutIfNeeded];
                 }];
}

Where yellowBoxHeightConstraint is the IBOutlet for height constraint of yellowBox. Hope this helps.

这篇关于UIView动画更改与自动布局约束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！