如何创建像Vine App这样的下拉表视图

Question

我想知道如何编写Vine应用程序使用的下拉列表视图。如果您从未使用Vine，我在下面提供了一张图片，其中描述了我正在谈论的UI设计。基本上，当您按下左侧UIBarButton时，此表视图会下降。当你再次触摸任何地方时，它会进一步下降（5或10像素），然后留下一个漂亮的动画。

只是寻找一些关于如何实现这一点的反馈。提前谢谢。

Answer 1

不确定UITableView是否可行。

也许您可以使用REMenu available on Github获取灵感，或根据您的需求进行定制。

Answer 2

REMenu尽可能接近精确副本。我确实注意到它在滑动时没有剪切菜单的顶部，它在状态/导航栏下方滑动，这对我来说看起来不对。没有看过滑动逻辑（以及我令人印象深刻的SE声誉为“8”），这是我快速了解如何使菜单显示。

1. 为菜单内容（表格视图等）创建视图
2. 将其放入封闭的菜单中，折叠到零高度，内容贴在折叠菜单视图的顶部
3. 设置菜单视图以剪切内容，使菜单顶部不可见，然后向下设置内容动画，同时为菜单高度设置更大的动画。

此示例使用简单渐变作为菜单内容。

@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

干杯。

Answer 3

REMenu的问题是，每次用户点击特定部分时都会创建viewControllers，但情况并非如此。它应该保持附在那里的每个屏幕的状态。