动画 UIView 无法按预期工作 [英] Animating UIView doesn't working as expected

问题描述

在我的应用程序中，我使用了一个 UIView，其中包括 UITableView、Buttons 和 Labels.它使用 Storyboard 创建.当用户点击导航栏按钮 UIView 将出现从顶部到特定高度的动画，如果他们再次点击它会隐藏带有动画的 UIView(从那个高度到顶部).和 UIActionView 一样.

In my application i am using a UIView which includes UITableView,Buttons and Labels in it. It created using Storyboard. When user click a navigation bar button UIView will appear with animation from top to certain height and if they click it again it hides the UIView with animation(From that height to top). Same like UIActionView.

如果UITableView 中没有记录，它工作正常.但是如果它有任何记录，在调用 [self hideBasket] 时，UIView 从视图底部到顶部出现(未隐藏).

It works fine if there is no records in UITableView. But if it has any records, while calling [self hideBasket] the UIView appears from bottom of the view to top(Not Hidden).

//隐藏购物篮代码

-(void)hideBasket{
    /*Finished Hiding the Basket
     [self.view sendSubviewToBack:_shoppingCartView];
     [_shoppingCartView setHidden:YES];
     _isShoppingCartSeen = NO;*/

    CGRect basketFrame = _shoppingCartView.frame;
    basketFrame.origin.y = -basketFrame.size.height;

    [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        _shoppingCartView.frame = basketFrame;
    } completion:^(BOOL finished) {
        // Finished Hiding the Basket
        //[self.view sendSubviewToBack:_shoppingCartView];
       // [_shoppingCartView setHidden:YES];
        _isShoppingCartSeen = NO;
}]; 

//显示购物篮代码

-(void)showBasket{

    /*[self.view bringSubviewToFront:_shoppingCartView];
    [_shoppingCartView setHidden:NO];
    _isShoppingCartSeen = YES;*/

    CGRect basketFrame = _shoppingCartView.frame;
    basketFrame.origin.y = 0;

    [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        _shoppingCartView.frame = basketFrame;
    } completion:^(BOOL finished) {
        // Finished Showing the Basket
        [self.view bringSubviewToFront:_shoppingCartView];
        [_shoppingCartView setHidden:NO];
        _isShoppingCartSeen = YES;
    }];
}

我在这里做错了什么?

推荐答案

使用自动布局，您应该为约束设置动画，而不是更改对象的框架.

Using Auto-Layout you should animate your constraints, not change the frame of objects.

我模拟了一个粗略的例子，说明从哪里开始使用约束，这应该可以解决您的问题

I've mocked up a rough example of where to begin using constraints, which should solve your issue

首先，您需要设置购物篮视图的约束

每个对象必须至少设置 4 个约束才能正确设置.

Each object has to have at least 4 constraints set in order to be set properly.

查看下面的屏幕截图，按下我选择的视图底部的约束图标来设置视图的宽度和高度，以及左侧距离约束.

See screenshot below, pressing the constraints icon at the bottom of the view I've chosen to set the width and height of the view, plus the left distance constraint.

然后您需要将空间设置为超级视图的顶部，请参阅第二个屏幕截图.

You will then need to set the space to top of superview, see second screen shot.

将约束设置为超级视图的顶部

设置好约束后，您可以设置 CTRL 将顶部空间到 superview 属性拖动到您的头文件中，如下面的屏幕截图所示.(您还需要在视图中设置约束以适应您的表对象等)，

Once your constraints have been set up you set CTRL drag the top space to superview property to your header file like the screenshot below. (you'll need to set your constraints within the view to accommodate your table objet etc too),

既然已经设置好了，请将您的代码替换为以下代码，它应该可以正常工作

Now that this has been set up, please replace your code with the following and it should work fine

-(void)hideBasket{

self.topVerticalSpaceConstraint.constant = -312;

[UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{

    [self.view layoutIfNeeded];

} completion:^(BOOL finished) {

}];

}

-(void)showBasket{

-(void)showBasket{

self.topVerticalSpaceConstraint.constant = 0;

    [UIView animateWithDuration:1.0 delay:0.0 options:UIViewAnimationOptionCurveEaseOut animations:^{
        [self.view layoutIfNeeded];

    } completion:^(BOOL finished) {

    }];

}

请注意，我只是在此处手动将常量设置为我创建的虚拟视图的大小，但您当然可以将其更改为视图的大小等.

请记住，理想情况下，您的每个视图/对象都应该设置其约束，尤其是下拉视图中的 UITableview.在 UIView 中设置表格的高度、宽度以及顶部和左侧的空间限制就足够了.

Please remember each of your views/objects should ideally have their constraints set, especially the UITableview within your drop-down view. Setting the table's height, width and top and left space constraints within the UIView will be enough.

如果您希望在第一次加载时隐藏您的视图，请使用您的 viewDidload 将约束设置为 -valueOfHeightOfBasket

If you want your view to be hidden from first load, with your viewDidload set the constraint to -valueOfHeightOfBasket

我希望这会有所帮助.

这篇关于动画 UIView 无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！