Animating UIView doesn't working as expected

Question

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.

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).

// Hide Basket Code

-(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;
}]; 

// Show Basket Code

-(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;
    }];
}

What i am doing wrong here?

Answer 1

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

Firstly you need to set the constraints of your basket view

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.

Setting the constraint to top of 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{

self.topVerticalSpaceConstraint.constant = 0;

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

    } completion:^(BOOL finished) {

    }];

}

Please note I've simply set the constant amount manually here to the size of the dummy view I made up, though you would of course change this to be the size of your view etc.

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.

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

I hope this helps.