具有自动布局约束的 UIView 动画更改

UIView animated changes with auto layout constraints(具有自动布局约束的 UIView 动画更改)
本文介绍了具有自动布局约束的 UIView 动画更改的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

假设我有一个如下所示的项目:

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

有两个UIView——一个叫做yellowBox,另一个叫做redBox.自动布局约束规定 yellowBox 距超级视图顶部 60 点,前后有 350 点空格(即视图的左侧和右侧).redBox 具有相同的前导和尾随空格约束.两个 0 框之间有垂直空间约束,表示 yellowBox 的底部应该始终直接在 redBox 的顶部.

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.

当用户点击 Expand Yellow Box 按钮时,我希望 yellowBox 的高度增加,结果 redBox 向下移动以继续满足垂直空间约束(yellowBox 总是在 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:

这很公平,因为自动布局无法知道框的高度.但是,我不知道如何以允许调整框大小和移动框的方式解决此问题.例如,如果我在 yellowBox 上指定高度约束,那么这将阻止它被调整大小.如果我将高度约束设置为 大于或等于(以允许 yellowBox 高度增加),那么我会得到一个不同的约束错误:

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:

所有约束均已在情节提要中使用 Xcode 建立 - 没有一个是用代码编写的.

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

非常感谢任何帮助.

事实证明,当单击按钮时,yellowBox 正在增长 - 只是我无法分辨,因为它出现在 redBox 后面.我只是在点击它大约四次后才注意到它开始出现在 redBox 的底部.但是,同样的问题仍然存在 - 如何让 redBox 始终粘在 yellowBox 的底部.

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.

推荐答案

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

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

[self.view layoutIfNeeded];

IBAction 看起来像:

the IBAction would look like:

- (IBAction)expandYellowBox:(id)sender {

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

其中yellowBoxHeightConstraintyellowBox 高度约束的IBOutlet.希望这可以帮助.

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

这篇关于具有自动布局约束的 UIView 动画更改的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Why local notification is not firing for UNCalendarNotificationTrigger(为什么没有为UNCalendarNotificationTrigger触发本地通知)
iOS VoiceOver functionality changes with Bundle Identifier(IOS画外音功能随捆绑包标识符而变化)
tabbar middle tab out of tabbar corner(选项卡栏中间的选项卡角外)
Pushing UIViewController above UITabBar(将UIView控制器推送到UITabBar上方)
How can I sync two flatList scroll position in react native(如何在本机Reaction中同步两个平面列表滚动位置)
Get an event when UIBarButtonItem menu is displayed(显示UIBarButtonItem菜单时获取事件)