剖析支付宝首页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在Tab