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

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

支付宝首页截图

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

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

图片.png

我为什么这么以为呢，因为正常情况下，下拉刷新会出现在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.com
github地址：https://github.com/Pangshishan
qq/微信： 704158807

代码：

import UIKit
import MJRefresh

func 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 = 30
    
    override 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 = HeaderBGColor
        tableView.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 = self
        tableView.dataSource = self
        tableView.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.y
        if offSetY <= 0 {
            headerView.frame.origin.y = offSetY
        } else {
            headerView.frame.origin.y = 0
        }
       
    }
    fileprivate func setupRefresh() {
        tableView.mj_header = MJRefreshNormalHeader.init(refreshingBlock: { [weak self] in
            self?.perform(#selector(self?.setupHeaderData), with: nil, afterDelay: 1.5)
        })
        tableView.mj_header.ignoredScrollViewContentInsetTop = -HeaderViewHeight
        
        tableView.mj_footer = MJRefreshAutoNormalFooter(refreshingBlock: { [weak self] in
            self?.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 = 30
        tableView.reloadData()
        self.tableView.mj_header.endRefreshing()
    }
    @objc fileprivate func setupFooterData() {
        cellCount += 30
        tableView.reloadData()
        self.tableView.mj_footer.endRefreshing()
    }
}

// scrollView代理方法
extension ViewController: UIScrollViewDelegate {
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        if scrollView == tableView {
            adjustHeaderView()
        }
    }
}