下拉放大设计思路

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

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

设计思路：

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

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

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

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

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

下面贴一段代码：

 1 /*
 2  下拉放大思路：
 3  1、根视图上添加两个控件：
 4  图片框：顶部，ContentModel设置为AspectFill
 5  内容列表：和根视图一样大
 6  2、设置内容列表的contentInset，top为图片框的高度；backgroundColor为clearColor，这样图片框就显示出来了
 7  3、滚动内容列表，实现scrollViewDidScroll方法，修改图片框的高度，因为图片框的ContentMode设置为了AspectFill，所以图片会放大
 8  
 9  细节：
10  1、设置tableView的scrollIndicatorInsets，这样滚动指示器只显示在“内容区域”
11  
12  注意点：
13  1、图片框的Clip To Bounds要勾选(xib中)，否则pop时(边缘手势)有可能效果不太好
14  2、如果tableView的headerView是从xib加载的，第一行cell显示一半，需要设置分组的组头高度
15  */
16 
17 import UIKit
18 
19 private let cellID = "cellID"
20 
21 class YSPullDownBigVC: UIViewController {
22     
23     /// 头部图片框
24     @IBOutlet weak var headerImgView: UIImageView!
25     
26     /// 头部图片框高度约束
27     @IBOutlet weak var headerImgViewHeight: NSLayoutConstraint!
28     
29     /// 初始头部图片框高度
30     fileprivate lazy var headerHeight:CGFloat = {return self.headerImgViewHeight.constant}()
31     
32     /// 内容列表视图
33     @IBOutlet weak var contentTableView: UITableView!
34     
35     override func viewWillAppear(_ animated: Bool) {
36         super.viewWillAppear(animated)
37         navigationController?.navigationBar.alpha = 0.7
38     }
39     override func viewDidDisappear(_ animated: Bool) {
40         super.viewDidDisappear(animated)
41         navigationController?.navigationBar.alpha = 1
42     }
43     
44     override func viewDidLoad() {
45         super.viewDidLoad()
46         setupUI()
47     }
48     
49     private func setupUI(){
50         contentTableView.register(UITableViewCell.self, forCellReuseIdentifier: cellID)
51         
52         // MARK: - tableView重点属性：contentInset和backgroundColor，显示图片框
53         // 设置contentInset和clearColor，使图片显示
54         let edgeInset = UIEdgeInsets(top: headerHeight, left: 0, bottom: 0, right: 0)
55         contentTableView.contentInset = edgeInset
56         contentTableView.backgroundColor = UIColor.clear
57         
58         // 设置scrollIndicatorInsets，使滚动条只显示在“列表的内容”区域
59         contentTableView.scrollIndicatorInsets = edgeInset
60     }
61     
62 }
63 
64 // MARK: - 表格数据源及代理方法
65 extension YSPullDownBigVC:UITableViewDataSource,UITableViewDelegate{
66     func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
67         return 20
68     }
69     func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
70         let cell:UITableViewCell = tableView.dequeueReusableCell(withIdentifier: cellID, for: indexPath)
71         
72         cell.textLabel?.text = "(indexPath.row)"
73         
74         return cell
75     }
76     
77     // MARK: - 重点方法，改变图片框的高度
78     func scrollViewDidScroll(_ scrollView: UIScrollView) {
79         let offsetY = scrollView.contentOffset.y
80         // headerHeight - (offsetY + headerHeight)
81         
82         var headerImgVH = -offsetY
83         headerImgVH = max(headerImgVH, 0)
84         headerImgViewHeight.constant = headerImgVH
85     }
86 }