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

Question

我想知道如何对 Vine 应用程序使用的那种下拉表格视图进行编程。如果您从未使用过 Vine，我在下面提供了一张图片，描绘了我正在谈论的 UI 设计。本质上，当您按下左侧的 UIBarButton 时，此 tableview 会下降。当您再次触摸任何地方时，它会进一步下降（5 或 10 像素），然后以漂亮的动画离开屏幕。

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

Answer 1

不确定 aUITableView是解决方法。

也许你可以使用Github 上的 REMenu来获得灵感，或者根据你的需要进行定制。

Answer 2

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

Answer 3

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

干杯。