下拉放大设计思路

很多App，在详情页面，都有下拉放大效果。

一般页面分为两部分：顶部是图片框、下半部分是详情或列表。

设计思路：

 1、根视图上添加两个控件：

 图片框：顶部，ContentModel设置为AspectFill

 内容列表：和根视图一样大

 2、设置内容列表的contentInset，top为图片框的高度；backgroundColor为clearColor，这样图片框就显示出来了

 3、滚动内容列表，实现scrollViewDidScroll方法，修改图片框的高度，因为图片框的ContentMode设置为了AspectFill，所以图片会放大

下面贴一段代码：

/*
 下拉放大思路：
 1、根视图上添加两个控件：
 图片框：顶部，ContentModel设置为AspectFill
 内容列表：和根视图一样大
 2、设置内容列表的contentInset，top为图片框的高度；backgroundColor为clearColor，这样图片框就显示出来了
 3、滚动内容列表，实现scrollViewDidScroll方法，修改图片框的高度，因为图片框的ContentMode设置为了AspectFill，所以图片会放大
 
 细节：
 1、设置tableView的scrollIndicatorInsets，这样滚动指示器只显示在“内容区域”
 
 注意点：
 1、图片框的Clip To Bounds要勾选(xib中)，否则pop时(边缘手势)有可能效果不太好
 2、如果tableView的headerView是从xib加载的，第一行cell显示一半，需要设置分组的组头高度
 */

import UIKit

private let cellID = "cellID"

class YSPullDownBigVC: UIViewController {
    
    /// 头部图片框
    @IBOutlet weak var headerImgView: UIImageView!
    
    /// 头部图片框高度约束
    @IBOutlet weak var headerImgViewHeight: NSLayoutConstraint!
    
    /// 初始头部图片框高度
    fileprivate lazy var headerHeight:CGFloat = {return self.headerImgViewHeight.constant}()
    
    /// 内容列表视图
    @IBOutlet weak var contentTableView: UITableView!
    
    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)
        navigationController?.navigationBar.alpha = 0.7
    }
    override func viewDidDisappear(_ animated: Bool) {
        super.viewDidDisappear(animated)
        navigationController?.navigationBar.alpha = 1
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupUI()
    }
    
    private func setupUI(){
        contentTableView.register(UITableViewCell.self, forCellReuseIdentifier: cellID)
        
        // MARK: - tableView重点属性：contentInset和backgroundColor，显示图片框
        // 设置contentInset和clearColor，使图片显示
        let edgeInset = UIEdgeInsets(top: headerHeight, left: 0, bottom: 0, right: 0)
        contentTableView.contentInset = edgeInset
        contentTableView.backgroundColor = UIColor.clear
        
        // 设置scrollIndicatorInsets，使滚动条只显示在“列表的内容”区域
        contentTableView.scrollIndicatorInsets = edgeInset
    }
    
}

// MARK: - 表格数据源及代理方法
extension YSPullDownBigVC:UITableViewDataSource,UITableViewDelegate{
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 20
    }
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell:UITableViewCell = tableView.dequeueReusableCell(withIdentifier: cellID, for: indexPath)
        
        cell.textLabel?.text = "(indexPath.row)"
        
        return cell
    }
    
    // MARK: - 重点方法，改变图片框的高度
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        // headerHeight - (offsetY + headerHeight)
        
        var headerImgVH = -offsetY
        headerImgVH = max(headerImgVH, 0)
        headerImgViewHeight.constant = headerImgVH
    }
}