引言：今天这篇文章属于分析型，我将一步步带你走进我的思路，跟我一起头脑风暴，欢迎加入。
内容介绍：支付宝首页结构看起来很简单，无非就是TableView+Header；但是当我们仔细分析的时候，发现有一样东西用原生的TableView是无法实现。那就是TableView左侧的阅读进度条。接下来我就为大家分析一下（我的做法只是推断，或许并非原生的做法，如果内部人员看到欢迎指正）
首先，我们先来看图，分析一下。我们分析的重点就两个地方，在图中已经标出来了，位置1 和位置2
支付宝首页截图
位置1：当下拉支付宝首页时，头部下拉刷新控件在位置1处出现。
位置2：当最开始让TableView向下走一点点的时候，TableView的进度条在位置2处出现。
通过以上两个位置，我最开始是认为，tableView只有下半屏幕的大小，如下图这么大
图片.png
我为什么这么以为呢，因为正常情况下，下拉刷新会出现在TableView的顶部，进度条最开始出现的地方也应该是TableView的顶部。那我们就来以这个思路往下走走看，假设他就这么大。
通过以上假设，我们可以提出一下几个问题：
- TableView大小是半个屏幕，它是如何显示整个屏幕的东西的
- 在TableView向上滑动的时候，为什么Header也会跟着往上走（此处Header指“扫一扫，付钱，收钱...；余额，花呗，充值中心.....”那部分）
下面我们来试着解决这些问题：
- 可能Header和tableview都是加在了
self.view上了，当TableView向上滑动时，根据滑动的偏移量，让Header向上移动 - 在第一步，我们不仅让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和屏幕一样大，那我们怎么让头部刷新控件出现在中间呢？答案很简单：
- MJRefresh控件有一个属性
ignoredScrollViewContentInsetTop，可以调整刷新控件的上下位置 - 先添加TableView到
self.view上，设置TableView的头部高度和Header一样高，然后添加Header到TableView上，正好盖在TableView的头部 - 这一步我们解决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()
}
}
}
网友评论