ios - 如何在没有丑陋黑客的情况下构建一个带有图像的视差样式/弹性 TableView 标题？

Question

我已经尝试构建一个由图像组成的视差样式 TableView 标题，类似于 Yahoo News Digest 应用程序，或者在 Maps.app 中查看业务时。 (当你用橡皮筋固定表格时，图像高度会增加，而当向下滚动时，图像似乎滚动得稍微慢一些)。

这是由 APParallaxHeader 提供的演示视频:

https://www.youtube.com/watch?v=7-JMdapWXGU

我能找到的最好的教程是 this tutorial ，它基本上包括将 ImageView 添加为 TableView 的 subview 。虽然这主要是可行的，但作为 subview 添加到 UITableView 的文档非常少，而且在我的测试中似乎不适用于自动布局，因此旋转效果不佳。

我上面链接的库，APParallaxHeader , 似乎可行，但它的实现确实令人困惑，如果我没记错的话，它似乎在 swizzling？

有没有一种我完全忽略的简单方法可以做到这一点？

Answer 1

在对这个问题进行更多思考之后，我认为复制该外观的最佳方法是使用包含 ImageView 的 ScrollView ，该 ImageView 位于后面(在 z 方向上)并延伸到下方(在 y 方向上) TableView 的顶部。在我做的测试中，我给表格 View 一个 100 点高的标题(在 IB 中)，并且背景颜色清晰(表格也需要清晰的背景颜色)。 ScrollView 和表格 View 都被固定到 Controller 主视图的两侧，并固定到顶部布局指南( Controller 嵌入在导航 Controller 中，其 View 设置为不在顶部栏下方)。表格 View 也被固定在 View 的底部， ScrollView 的高度固定为 200。我给 ScrollView 一个 50 点的初始偏移量，这样当你开始在表格上下拉时， ScrollView 可以将更多内容从顶部滚动到 View 中，同时也可以在底部显示更多内容( ScrollView 的偏移量以表格 View 偏移量的 1/2 的速率移动)。一旦表格 View 的偏移量达到 -50，我就停止更改 ScrollView 的偏移量，并开始缩放。

#define ZOOMPOINT 50

@interface ViewController () <UITableViewDataSource, UITableViewDelegate, UIScrollViewDelegate>
@property (weak, nonatomic) IBOutlet UIScrollView *sv;
@property(weak,nonatomic) IBOutlet UITableView *tableView;
@property (strong,nonatomic) UIImageView *iv;
@end

@implementation ViewController

-(void)viewDidLoad {
    [super viewDidLoad];
    self.sv.minimumZoomScale = 1.0;
    self.sv.maximumZoomScale = 2.0;
    self.sv.delegate = self;
    self.iv = [UIImageView new];
    self.iv.contentMode = UIViewContentModeScaleAspectFill;
    self.iv.translatesAutoresizingMaskIntoConstraints = NO;

}


-(void)viewDidLayoutSubviews {
    [self.iv removeFromSuperview];
    [self.sv addSubview:self.iv];
    [self.sv addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"|[iv(==width)]|" options:0 metrics:@{@"width":@(self.tableView.frame.size.width)} views:@{@"iv":self.iv}]];
    [self.sv addConstraints:[NSLayoutConstraint constraintsWithVisualFormat:@"V:|[iv(==250)]|" options:0 metrics:nil views:@{@"iv":self.iv}]];
    self.iv.image = [UIImage imageNamed:@"img.jpg"]; // the image I was using was 500 x 500
    self.sv.contentOffset = CGPointMake(0, ZOOMPOINT);
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView {
    if ([scrollView isEqual:self.sv]) {
        return self.iv;
    }else{
        return nil;
    }
}


- (void)scrollViewDidEndZooming:(UIScrollView *)scrollView withView:(UIView *)view atScale:(CGFloat)scale {

}


- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    if (scrollView != self.sv) {
        if (scrollView.contentOffset.y < -ZOOMPOINT) {
            [self.sv setZoomScale:(scrollView.contentOffset.y + ZOOMPOINT)/-100 + 1]; // the -100 is arbitrary, change to affect the sensitivity of the zooming
        }else{
             self.sv.contentOffset = CGPointMake(0, ZOOMPOINT + scrollView.contentOffset.y/2.0);
        }
    }
}



- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 20;
}

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"Cell"];
    cell.textLabel.text = [NSString stringWithFormat:@"Cell %ld", (long)indexPath.row];
    return cell;
}

我在这里上传了这个项目的副本，http://jmp.sh/LRKF0nM