How to create a dropdown tableview like Vine App

Question

I'm wondering how one would go about programming the kind of dropdown tableview that the Vine app uses. If you have never used Vine, I've provided a picture below which depicts the UI Design I'm talking about. Essentially, when you press the left hand UIBarButton, this tableview drops down. When you touch anywhere again, it drops down a little further (5 or 10 pixels) and then leaves the screen with a nice animation.

Just looking for some feedback on how I might go about implementing this. Thanks in advance.

enter image description here

It could just be a table view with one row to start (the green one), which when you touch the button, inserts 4 rows with animation. — rdelmar, Jul 17 '13 at 02:38

score 4 · Accepted Answer · answered Jul 17 '13 at 02:35

4

Not sure a UITableView is the way to go about it.

Perhaps you can use REMenu available on Github to get inspired or fork it to customize to your needs.

answered Jul 17 '13 at 02:35

runmad

14,846
9
99
140

Wow, how ridiculous is the internet. This must be literally the exact same code that Vine uses haha. Thanks so much! – Apollo Jul 17 '13 at 02:38
I highly doubt it's the same code. Usually when developers see a cool new feature such as a menu like that copies very quickly come out that mimics the same behaviour and functionality - and also very often with an identical look. – runmad Jul 17 '13 at 03:56
would you mind taking a look at another question about the library you just mentioned? Thanks so much: http://stackoverflow.com/questions/17710019/proper-way-to-use-viewcontrollers-when-using-remenu – Apollo Jul 17 '13 at 20:54

score 0 · Answer 2 · answered Oct 25 '13 at 05:17

The REMenu is as close to an exact copy as you can get. I did notice though that it wasn't clipping the top of the menu when it slid down, it slid underneath the status / nav bar which to me didn't look right. Without having looked at the sliding logic (and with my impressive SE reputation of "8"), this is my quick take on how you make the menu appear.

create a view for the contents of the menu (the table view etc)
put it in an enclosing menu collapsed to a zero height, with the content sticking off the top of the collapsed menu view
set the menu view to clip the contents so the top of the menu is not visible, then animate the contents down, as you animate the menu height larger.

This sample uses a simple gradient for the contents of the menu.

@interface BackgroundLayer : NSObject

+(CAGradientLayer*) redBlueGradient;

@end


@implementation BackgroundLayer

+ (CAGradientLayer*) redBlueGradient
{
    CAGradientLayer *headerLayer = [CAGradientLayer layer];
    headerLayer.colors =
    @[(id) [UIColor redColor].CGColor, (id) [UIColor blueColor].CGColor];
    headerLayer.locations = nil;

    return headerLayer;
}

@end



@interface ViewController ()

@property (nonatomic, strong) UIButton* doIt;
@property (nonatomic, strong) UIView* menu;
@property (nonatomic, strong) UIView* nestedView;

@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    // create simple toggle button to test the menu
    self.doIt = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    self.doIt.frame = CGRectMake(50, 50, 50, 44);
    [self.doIt setTitle:@"Doit!" forState:UIControlStateNormal];
    [self.doIt sizeToFit];
    [self.doIt addTarget:self action:@selector(doIt:)
        forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:self.doIt];

    // menu
    self.menu = [[UIView alloc] initWithFrame:CGRectMake(20, 200, 280, 0)];
    self.menu.layer.borderColor = [UIColor blackColor].CGColor;
    self.menu.layer.borderWidth = 3.0;
    self.menu.clipsToBounds = YES;

    // menu contents
    self.nestedView = [[UIView alloc] initWithFrame:CGRectMake(0, -100, 280, 100)];
    CAGradientLayer *background = [BackgroundLayer redBlueGradient];
    background.frame = self.nestedView.bounds;
    [self.nestedView.layer addSublayer:background];
    [self.nestedView clipsToBounds];
    [self.menu addSubview:self.nestedView];

    [self.view addSubview:self.menu];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

- (IBAction) doIt:(id) sender
{
    if (!CGRectEqualToRect(self.nestedView.frame, CGRectMake(0, 0, 280, 100)))
    {
        [UIView animateWithDuration:0.15 animations:^{
            self.menu.frame = CGRectMake(20, 200, 280, 100);
            self.nestedView.frame = CGRectMake(0, 0, 280, 100);
        }];
    }

    else
    {
        [UIView animateWithDuration:0.15 animations:^{
            self.menu.frame = CGRectMake(20, 200, 280, 0);
            self.nestedView.frame = CGRectMake(0, -100, 280, 100);
        }];
    }

}


@end

Cheers.

score 0 · Answer 3 · answered Feb 26 '14 at 04:00

0

The Problem with the REMenu is, it creates the viewControllers every time the user taps on particular section, which should not be the case. It should persist the state of each screen attached there.

answered Feb 26 '14 at 04:00

Shirish Gone

196
2
7

How to create a dropdown tableview like Vine App

3 Answers3