UIView animation synchronization with subviews

Question

I am relatively new to IOS development. I have a query regarding UIView animation. In my application, I am having a view say "View1" which consist of three views, header view, view2 and footer view. Width of each of three view is same (same as that of view1). height of header view and footer view is fixed and height of View2 depends on height of View1. So Height of View2 is calculated as Height of View1 - (height of header view + height of footer view). Autoresizing for each of three subviews is set to none. So all positioning stuff for all subviews of View1 is done in its layoutSubviews method. Current layout of View1 looks as follows

    -------------------------
    |      Header View      |
    |                       |
    -------------------------
    |                       |
    |                       |
    |       View2           |
    |                       |
    -------------------------
    |    Footer View        |
    |                       |
    -------------------------

                View1

Now what I want is when user taps on footer view, view1 should collapse with animation so that size of View2 becomes zero and footer view is positioned just below header view. So after animation current layout of view1 should look as follows

            -------------------------
            |    Header View        |
            |                       |
            -------------------------
            |    Footer View        |
            |                       |
            -------------------------

             View1 (After Animation)

To achieve above result I wrote following code in handler method of tap gesture on footer view in the parent view of View1

    CGFloat headerViewHeight = self.view1.headerView.frame.size.height;
    CGFloat footerViewHeight = self.view1.footerView.frame.size.height;
    CGFloat newHeight = (headerViewHeight + footerViewHeight);
    CGRect frame = self.view1.frame;
    frame.size.height = newHeight;

    [UIView beginAnimation:nil context:NULL];
    [UIView setAnimationDuration:3.0f];

    self.view1.frame = frame;

    [UIView commitAnimation];

On running above code, On screen, height of View2 sets to 0, footer view is positioned just below header view immediately and then height of View1 decreases slowly with animation to newHeight with animation. This is not the desired result, what I want is when height of View1 decreases with animation then height of View2 should also decrease with same amount with animation and footer view should move in upwards direction with same amount with animation so the output results in smooth animation.

Any help or direction on how can I achieve the above result?

Ken W Ken W · Accepted Answer · 2011-12-06T15:54:26

Below are the snippet that works for me. Hope it give you some ideas.

@implementation MasterView
{
    UIView *headerView;
    UIView *view2;
    UIView *footerView;
    bool collapsed;
}

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        self.backgroundColor = [UIColor yellowColor];

        headerView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
        headerView.backgroundColor = [UIColor redColor];

        view2 = [[UIView alloc] initWithFrame:CGRectMake(0, 50, 320, 100)];
        view2.backgroundColor = [UIColor greenColor];

        footerView = [[UIView alloc] initWithFrame:CGRectMake(0, 150, 320, 100)];
        footerView.backgroundColor = [UIColor blueColor];
        footerView.autoresizingMask = UIViewAutoresizingFlexibleTopMargin | UIViewAutoresizingFlexibleWidth;

        UITapGestureRecognizer *tapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(toggle:)];
        [footerView addGestureRecognizer:tapGesture];   
    }
    return self;
}

- (void)toggle:(UITapGestureRecognizer *)recognizer
{
    [UIView animateWithDuration:1.0 animations:^{
        CGRect view2Frame = view2.frame;
        view2Frame.size.height = 0;
        view2.frame = view2Frame;

        CGRect selfFrame = self.frame;
        selfFrame.size.height -= 100;
        self.frame = selfFrame;
    }];
}

-(void)layoutSubviews
{
    [self addSubview:headerView];
    [self addSubview:view2];
    [self addSubview:footerView];
}

UIView animation synchronization with subviews

1 Answers