剖析支付宝首页TableView的结构

首页TableView的结构"/>

剖析支付宝首页TableView的结构

引言：今天这篇万丈属于分析型，我将一步步带你走进我的思路，跟我一起头脑风暴，欢迎加入。
内容介绍：支付宝首页结构看起来很简单，无非就是TableView+Header；但是当我们仔细分析的时候，发现有一样东西用原生的TableView是无法实现。那就是TableView左侧的阅读进度条。接下来我就为大家分析一下（我的做法只是推断，或许并非原生的做法，如果内部人员看到欢迎指正）

首先，我们先来看图，分析一下。我们分析的重点就两个地方，在图中已经标出来了，位置1 和位置2

位置1：当下拉支付宝首页时，头部下拉刷新控件在位置1处出现。
位置2：当最开始让TableView向下走一点点的时候，TableView的进度条在位置2处出现。

通过以上两个位置，我最开始是认为，tableView只有下半屏幕的大小，如下图这么大

我为什么这么以为呢，因为正常情况下，下拉刷新会出现在TableView的顶部，进度条最开始出现的地方也应该是TableView的顶部。那我们就来以这个思路往下走走看，假设他就这么大。

通过以上假设，我们可以提出一下几个问题：
1. TableView大小是半个屏幕，它是如何显示整个屏幕的东西的
2. 在TableView向上滑动的时候，为什么Header也会跟着往上走（此处Header指“扫一扫，付钱，收钱…；余额，花呗，充值中心…..”那部分）

下面我们来试着解决这些问题：
1. 可能Header和tableview都是加在了self.view 上了，当TableView向上滑动时，根据滑动的偏移量，让Header向上移动
2. 在第一步，我们不仅让Header向上移动，同时改变TableView的frame，让tableView慢慢变大，于是完美解决以上两个问题

但是，当我们认为问题解决的时候，新问题出现了，如果改变TableView的frame，让tableView慢慢变成self.view 的大小，右侧进度条也势必会向上移动，可是支付宝app并不是这样。因此较劲脑汁想的方法并不成立。

我新开了个工程，写了一个TableView，当我们下拉TableView的时候，右侧进度条并不会显示，但是下拉支付宝的时候，进度条依然存在；那么就说明：支付宝的进度条是假的，是自定义的

既然进度条是自定义的，那我们之前的推论（TableView大小是屏幕的一般）可能就不成立了，我们把TableView的进度条隐藏，换成我们自己封装的进度条。

此处我简单说一下怎么封装进度条用起来最简单吧，文章后面我会上代码的：1.自定义View，只需要把TableView传给这个View；2.用View监听TableView的contentOffSet属性；3.根据监听的结果显示进度条的长度以及运动；4.显示和隐藏的逻辑请看代码

进度条的问题解决完了，接下来我们解决头部刷新的问题

我们让TableView和屏幕一样大，那我们怎么让头部刷新控件出现在中间呢？答案很简单：
1. MJRefresh控件有一个属性ignoredScrollViewContentInsetTop，可以调整刷新控件的上下位置
2. 先添加TableView到self.view上，设置TableView的头部高度和Header一样高，然后添加Header到TableView上，正好盖在TableView的头部
3. 这一步我们解决tableView向上和向下滑动时，确定头部的位置；当TableView向下滑动时（contentOffset.y < 0），我们需要把Header向上移动，让Header相对于屏幕不动，就可以漏出挡住的头部刷新控件。当TableView向下滑动，因为Header在TableView上面，因此只需要让Header的y等于0就可以了。（在scrollVIew的滑动就会触发的代理方法里设置这些scrollViewDidScroll）

// 上面的第二步设置头的代码
tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: HeaderViewHeight))

结束：至此，我们根据上面的思路就可以做出淘宝首页的结构了，剩下的无非就是Header的按钮s，以及自定义的TableViewCell，架子就是这个样子。

Demo下载链接

如果觉得写得还行，点个Star呗
同时也欢迎评论中指出本文存在的bug，或者疑问，互相促进！
作者邮箱：pangshishan@aliyun
github地址：
qq/微信： 704158807

代码：

import UIKit
import MJRefreshfunc ScreenWidth() -> CGFloat {return UIScreen.main.bounds.width
}
func ScreenHeight() -> CGFloat {return UIScreen.main.bounds.height
}let HeaderViewHeight: CGFloat = 150
let HeaderBGColor = UIColor.red
let TableViewCellID = "TableViewCellID"
let ProgressControlWidth: CGFloat = 6

class ViewController: UIViewController {fileprivate lazy var headerView = UIView()fileprivate var tableView: UITableView!fileprivate var cellCount: Int = 30override func viewDidLoad() {super.viewDidLoad()setupUI()}
}// MARK:- 设置UI
extension ViewController {fileprivate func setupUI() {setupTableView()setupHeaderView()setupScrollProgressControl()setupRefresh()}fileprivate func setupHeaderView() {headerView.frame = CGRect(x: 0, y: 0, width: ScreenWidth(), height: HeaderViewHeight)headerView.backgroundColor = HeaderBGColortableView.addSubview(headerView)}fileprivate func setupTableView() {let tRect = CGRect(x: 0, y: 0, width: ScreenWidth(), height: ScreenHeight())tableView = UITableView(frame: tRect, style: .grouped)view.addSubview(tableView)tableView.delegate = selftableView.dataSource = selftableView.register(UITableViewCell.self, forCellReuseIdentifier: TableViewCellID)tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: 0, height: HeaderViewHeight))tableView.showsVerticalScrollIndicator = false}fileprivate func setupScrollProgressControl() {let pFrame = CGRect(x: ScreenWidth() - 0 - ProgressControlWidth, y: HeaderViewHeight, width: ProgressControlWidth, height: ScreenHeight() - HeaderViewHeight)let progressC = ScrollProgressControl(frame: pFrame, scrollView: tableView)view.addSubview(progressC)}fileprivate func adjustHeaderView() {let offSetY = tableView.contentOffset.yif offSetY <= 0 {headerView.frame.origin.y = offSetY} else {headerView.frame.origin.y = 0}}fileprivate func setupRefresh() {tableView.mj_header = MJRefreshNormalHeader.init(refreshingBlock: { [weak self] inself?.perform(#selector(self?.setupHeaderData), with: nil, afterDelay: 1.5)})tableView.mj_header.ignoredScrollViewContentInsetTop = -HeaderViewHeighttableView.mj_footer = MJRefreshAutoNormalFooter(refreshingBlock: { [weak self] inself?.perform(#selector(self?.setupFooterData), with: nil, afterDelay: 0.5)})}
}// tableView代理方法
extension ViewController: UITableViewDelegate, UITableViewDataSource {func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {return cellCount}func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {let cell = tableView.dequeueReusableCell(withIdentifier: TableViewCellID, for: indexPath)cell.textLabel?.text = "\(indexPath.row)"return cell}func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {tableView.deselectRow(at: indexPath, animated: true)}func tableView(_ tableView: UITableView, heightForHeaderInSection section: Int) -> CGFloat {return 0.1}func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {return 0.1}
}
// MARK:- 数据方法
extension ViewController {@objc fileprivate func setupHeaderData() {cellCount = 30tableView.reloadData()self.tableView.mj_header.endRefreshing()}@objc fileprivate func setupFooterData() {cellCount += 30tableView.reloadData()self.tableView.mj_footer.endRefreshing()}
}// scrollView代理方法
extension ViewController: UIScrollViewDelegate {func scrollViewDidScroll(_ scrollView: UIScrollView) {if scrollView == tableView {adjustHeaderView()}}
}