iOS开发 | 几行代码实现tableView下拉放大表头图片

允儿卖萌

背景：

一个很常见的效果，如果这个tableView不需要下拉刷新并且想避免下拉时展示空白背景时可以采用。

效果如下：

效果展示.gif

思路：

从结构来看这张图应该是tableView的表头，即tableHeaderView。当我们向下拉tableView的时候，改变了tableView的contentOffset，将这个contentOffset与表头图片的frame关联起来即可实现下拉放大图片。

温馨提示：不要在秋名山上车

参考代码：

1.设置tableView的表头

    self.imageView = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, self.view.width, 200)];
    self.imageView.image = [UIImage imageNamed:@"允儿.jpg"];
    self.imageView.contentMode = UIViewContentModeScaleAspectFill; // 按比例填充，很关键
    
    // 设置表头
    self.tableView.tableHeaderView = self.imageView;

2.在scrollViewDidScroll:方法中进行逻辑处理

    // 控制表头图片的放大
    if (scrollView.contentOffset.y < 0) {
        // 向下拉多少
        // 表头就向上移多少
        self.imageView.y = scrollView.contentOffset.y;
        // 高度就增加多少
        self.imageView.height = 200 + fabs(scrollView.contentOffset.y);
    }else{
        // 复原
        self.imageView.y = 0;
        self.imageView.height = 200;
    }

会喊666.gif

demo

GitHub Demo

---

2020年1月6日更新

看了一下之前的思路和代码，略显青涩且不够优雅。

很多时候tableView的tableHeaderView不只是一个imageView，往往是一个view上有很多subView。

此时，势必要封装一个tableHeaderView，那么如何处理下拉放大imageView这个逻辑？

我认为这个imageView应该归于tableHeaderView，如：

// MARK: - 表头

fileprivate class TableHeaderView: UIView {
    
    // 下拉要放大的imageView
    lazy var imageView: UIImageView = {
        let imageView = UIImageView()
        imageView.image = UIImage(named: "iu_header")
        imageView.contentMode = .scaleAspectFill
        return imageView
    }()
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        
        addSubview(imageView)
        
        imageView.snp.makeConstraints { (make) in
            make.top.left.bottom.right.equalToSuperview()
        }
        
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
}

这个imageView是要暴露出去的。

然后给tableView设置tableHeaderView：

/// 表头
private lazy var tableHeaderView: TableHeaderView = {
    let header = TableHeaderView.init(frame: .init(x: 0, y: 0, width: kScreenWidth, height: kTableHeaderViewHeight))
    return header
}()

private lazy var tableView: UITableView = {
    let tableView = UITableView()
    tableView.dataSource = self
    tableView.delegate = self
    // 设置 tableHeaderView
    tableView.tableHeaderView = self.tableHeaderView
    return tableView
}()

最后是下拉放大表头图片的逻辑，直接修改imageView的约束即可：

func scrollViewDidScroll(_ scrollView: UIScrollView) {
    let offsetY = scrollView.contentOffset.y
    if offsetY < 0 { // 下拉
        // 重新设置约束
        tableHeaderView.imageView.snp.remakeConstraints { (make) in
            make.top.equalTo(offsetY)
            make.left.right.bottom.equalToSuperview()
        }
    } else {
        tableHeaderView.imageView.snp.remakeConstraints { (make) in
            make.left.right.top.bottom.equalToSuperview()
        }
    }
}