ios - 制作触摸时上下滑动的UIView列表

Question

我正在尝试找出一种方法来构建如下图所示的内容，这是一个项目列表，当单击某个部分时会滑出内容。在大多数网站上这是一个非常常见的用户体验，但不是。我的想法是让每个灰色框(按钮)滑出一个包含其他一些项目的 UIView。我仍然是 iOS 开发的新手，但我正在努力寻找如何为 UIView 制作动画以向下滑动并将其下方的内容也向下推。希望有人能给我一个好的起点或指向苹果文档领域之外的一些信息。

谢谢!

Answer 1

因此，如果您只有几个 View ，我不会推荐 UITableView 方法，因为使用动画进行自定义并不容易，而且表格 View 通常希望用单元格填充整个屏幕。而是编写一个具有所需两种状态的可扩展 UIView 子类。添加一个在展开和折叠状态之间切换的方法。在展开/折叠时调整它们的位置，以便它们始终有足够的空间。

我为您提供了一个 View 调整框架的示例。我想用自动布局约束做同样的事情应该很容易:给 View 一个固定的高度约束并在折叠/展开时改变它。同样的方法将 View 之间的约束设置为 0，以便它们相互堆叠。

展开式 View :

@interface ExpandingView(){
    UIView *_expandedView;
    UIView *_seperatorView;

    BOOL _expanded;
}
@end

@implementation ExpandingView

- (id)init
{
    self = [super initWithFrame:CGRectMake(15, 0, 290, 50)];
    if (self) {
        _expanded = NO;
        self.clipsToBounds = YES;

        _headerView = [[UIView alloc] initWithFrame:self.bounds];
        _headerView.backgroundColor = [UIColor colorWithWhite:0.8 alpha:1];
        [self addSubview:_headerView];

        _seperatorView = [[UIView alloc] initWithFrame:CGRectMake(0, self.bounds.size.height-1, self.bounds.size.width, 1)];
        _seperatorView.backgroundColor = [UIColor lightGrayColor];
        [self addSubview:_seperatorView];

        _expandedView = [[UIView alloc] initWithFrame:CGRectOffset(self.bounds, 0, self.bounds.size.height)];
        _expandedView.backgroundColor = [UIColor blueColor];
        [self addSubview:_expandedView];
    }
    return self;
}

- (void)layoutSubviews{
    [self adjustLayout];
}

- (void)adjustLayout{
    _headerView.frame = CGRectMake(0, 0, self.bounds.size.width, 50);
    _seperatorView.frame = CGRectMake(0, 49, self.bounds.size.width, 1);
    _expandedView.frame = CGRectMake(0, 50, self.bounds.size.width, self.bounds.size.height-50);
}

- (void)toggleExpandedState{
    _expanded = !_expanded;
    self.frame = CGRectMake(self.frame.origin.x, self.frame.origin.y, self.frame.size.width, _expanded?200:50);
    [self adjustLayout];
}

@end

View Controller :

@interface ExpandingViewController (){
    NSArray *_expandingViews;
}
@end

@implementation ExpandingViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    _expandingViews = @[
                    [[ExpandingView alloc] init],
                    [[ExpandingView alloc] init],
                    [[ExpandingView alloc] init],
                    ];

    for(ExpandingView *view in _expandingViews){
        [view.headerView addGestureRecognizer:[[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(expandingViewTapped:)]];
        [self.view addSubview:view];
    }
}

- (void)viewWillLayoutSubviews{
    int y = 100;
    for(ExpandingView *view in _expandingViews){
        view.frame = CGRectOffset(view.bounds, (CGRectGetWidth(self.view.bounds)-CGRectGetWidth(view.bounds))/2, y);
        y+=view.frame.size.height;
    }
}

- (void)expandingViewTapped:(UITapGestureRecognizer*)tapper{
    ExpandingView *view = (ExpandingView*)tapper.view.superview;

    [UIView animateWithDuration:0.5 delay:0 usingSpringWithDamping:0.8 initialSpringVelocity:0 options:0 animations:^{
        [view toggleExpandedState];
        [self.view layoutIfNeeded];
    } completion:nil];    
}