CODEWITHSUNDEEP
iosuitableview
timpone
timpone

Reputation: 19969

Is it possible to 'split' a UIViewController and animate the parts to the top and bottom of the selected cell

I have a mockup that our team wants to do. Basically when a user selects a cell the part above the selected cell animates to the top and the part beneath the cell animates to the bottom. Based upon where in the screen, the selected cell is, it could scroll either to the top or the bottom. It would reveal the 'detail' controller of the selected cell. An excellent example of this is provided by the Hotel Tonight app on the main list.

Here's a sample:

enter image description here

So my question, is I know I can split a UITableView but how? I was thinking it might be done as a UICollectionView since individual elements could be animated. Or possibly a UIView Screenshot.

Upvotes: 3

Views: 504

Answers (3)

rdelmar
rdelmar

Reputation: 104082

I haven't tried anything quite like the Hotels Tonight app, but I think the steps you need to accomplish that look are something like this,

1) Start with a table view in a UIViewController that has a black main view

2) Create an image of the table view using renderInContext,

- (UIImage *)imageWithView:(UIView *)view {
    UIGraphicsBeginImageContextWithOptions(CGSizeMake(view.bounds.size.width, view.bounds.size.height), view.opaque, [[UIScreen mainScreen] scale]);
    [view.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return img;
}

3) Make two images from your first image with something like this,

-(NSArray *)createHalvedImages:(CGImageRef) image {
    NSMutableArray *arr = [NSMutableArray array];
    for(int i = 0; i < 2; i++){
            float y = i * image.size.height/2.0;
            CGImageRef tmp = CGImageCreateWithImageInRect(image, CGRectMake(0, y, image.size.width, image.size.height/2));
            [arr addObject:[UIImage imageWithCGImage:tmp]];
        }
    }
    return arr;
}

4) Replace the table view with the two image views containing your two images.

5) animate out the two image views to reveal the black main view of the controller

6) present the detail controller modally using the fade animation

Upvotes: 2

vivek bhoraniya
vivek bhoraniya

Reputation: 1535

If you hgave multiple records to be show then use tableview. And increase row height when user select any cell up to your desire height. You can figure all this out by tableview delegate methods and by editing tableview.

Upvotes: 0

Gutblender
Gutblender

Reputation: 1350

You could use several UIViews laid out one on top of another, whether the collection is static or no. Determine the dimensions of each state, and figure out how to size each of the UIViews to the size you want.

Use a UITapGestureRecognizer in your view controller, and in handleTap: use either hitTest:withEvent: called on self or pointInside:withEvent: on each UIView to determine which was tapped. Then use a method to expand that UIView and collapse the others...

To animate the change, I'm a big fan of animation blocks. You can read about them here.

Upvotes: 0

Related Questions