3

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.

halfer
  • 19,824
  • 17
  • 99
  • 186
timpone
  • 19,235
  • 36
  • 121
  • 211
  • What you show in your image, and what Hotels Tonight does look like two different things to me, so I'm not sure which you want. In the Hotels Tonight app, it looks to me like they split the table view in half (actually it's probably an image of the table view), move the two haves out in opposite directions revealing a black background, into which fades in the detail controller. At that point, you can't see any of the other cells of the table view, which looks like what you have in your images. – rdelmar Sep 03 '14 at 05:20
  • I was trying to show the animation but would want it like the HotelTonight app where the top and bottom are fully removed and (ideally) when you click back the tableview fragments animate back. So definitely looking for the HotelTonight experience. I was trying to focus on the splitting of the table view - I think you're right that it might be a UIView snapshot - I'm not really sure though. – timpone Sep 03 '14 at 05:29

3 Answers3

2

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

rdelmar
  • 103,982
  • 12
  • 207
  • 218
  • thx, I think this is the general idea. Let me try to spend some time today or tomorrow and try to code this out. – timpone Sep 03 '14 at 19:12
  • I actually spent some time yesterday and came up with this: https://github.com/trestles/split-uitableview ; main difference was handling which cell was split on and also adding a snapshot at that specific moment in order to reflect if tableView was scrolled. – timpone Sep 04 '14 at 22:00
  • @timpone, ok, I checked that out. It doesn't look anything like the Hotel Tonight animation. Is it supposed to? – rdelmar Sep 05 '14 at 00:26
  • in terms of splitting the UIViewController, I think it does. I'm disregarding alpha, easingin / easingout etc... and steps beyond just the splitting of UITableView. But you might have a more perceptive eye - pull requests are accepted :) – timpone Sep 05 '14 at 01:49
  • @timpone, Are you're talking about the app called testview2?? That's what I downloaded, but there's nothing in that app that splits a view controller. Are you sure your link is correct? – rdelmar Sep 05 '14 at 04:17
  • omg - major git fail on my part. Let me see if can find that but think it's gone ... sorry about that... ugh... – timpone Sep 05 '14 at 05:48
  • sorry about that; I tried to quickly recreate it here https://github.com/trestles/tableviewsplit and deleted out old one - still some wonkiness in terms of calculating image sizes but will look into it this weekend if I have time – timpone Sep 05 '14 at 18:16
  • @timpone, I made my own implementation as well. You can see it here, http://jmp.sh/ktgQrJE – rdelmar Sep 05 '14 at 19:27
  • if you are feeling so inclined, I just added a bounty to another question which is similar in scope: http://stackoverflow.com/questions/25676433/showing-and-hiding-a-specific-cell-type-in-a-uitableview-possibly-with-animatio – timpone Sep 07 '14 at 01:52
0

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.

Gutblender
  • 1,340
  • 1
  • 12
  • 25
0

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.

vivek bhoraniya
  • 1,526
  • 2
  • 17
  • 36