参考资料: iOS 高仿支付宝 9.x 版本首页
但是我跟参考资料中作者关于整个页面的设计逻辑不一致, 但是实现的效果一样, 也算是多一种实现方式, 希望跟大家一起共同学习.
先上效果
效果图.gif
整个界面的结构图
结构图.png
关于整个页面布局逻辑, 从上往下说:
1.顶部: "类导航栏", 因为其并不是导航栏, 只是一个跟导航栏尺寸一致的View, 所以进入这个页面的时候需要将自带的导航栏隐藏掉. 此部分共三层, 从底层往上依次是: 底色View(蓝色背景色), 扫一扫View(刚开始隐藏, 向上滚动后逐渐显示), 搜索框View.
2. tableView, 紧接着就是一个带有tableHeaderView的tableView, 其tableHeaderView高度与添加到tableView上显示主要功能的view的尺寸一致.
注意细节: 在整个向上缓慢滑动的过程中, 会发现顶部图标的隐藏/显示变化过程分为三个部分: 1. 搜索框view快速消失, 2.搜索框view后紧接着另一个"类导航"view(扫一扫 + 付钱 + 搜索 + "+")逐渐显示, 3. 下面的四个主要功能模块逐渐消失, 当滑动到导航栏位置时, 彻底消失. 并且, 当四个主要功能模块完全消失的时候, 此时手离开屏幕, 其会自动向上滚动到四个主要功能模块完全消失的位置.
关键代码:
func scrollViewDidEndDragging(_ scrollView: UIScrollView, willDecelerate decelerate: Bool) {
let offentY = scrollView.contentOffset.y
// 此处之所以以24为判断依据, 主要是因为要与下面设置alpha保持一致, 1 - 24 / 95 约等于 0.75
if offentY > 0 && offentY < 24 {
tableView.setContentOffset(CGPoint(x: 0, y: 0), animated: true)
} else if offentY >= 24 && offentY < 95 {
tableView.setContentOffset(CGPoint(x: 0, y: 95), animated: true)
}
}
func scrollViewDidScroll(_ scrollView: UIScrollView) {
let offsetY = scrollView.contentOffset.y
if offsetY <= 0 {
headerView.frame = CGRect(x: 0, y: offsetY, width: SCREEN_WIDTH, height: 305)
childVC?.changeAlpha(alpha: 1)
coverNavView.alpha = 0
mainNavView.alpha = 1
} else if offsetY > 0 && offsetY < 95 {
//处理透明度
let alpha = (1 - offsetY / 95) > 0 ? (1 - offsetY / 95) : 0
childVC?.changeAlpha(alpha: alpha / 3)
if alpha > 0.9 { // 为了原显示内容可以快速消失, 增加后面有更长的显示时长
coverNavView.alpha = 0
mainNavView.alpha = alpha / 5
} else {
mainNavView.alpha = 0
coverNavView.alpha = 1 - alpha
if alpha <= 0.75 {
childVC?.changeAlpha(alpha: 0)
}
}
}
}
使用MJRefresh时注意一个点
tableView.mj_header = MJRefreshNormalHeader { [weak self] in
guard let weak = self else {return}
DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(1), execute: {
// Put your code which should be executed with a delay here
weak.tableView.mj_header.endRefreshing()
weak.dataSorceNumber = 10
weak.tableView.reloadData()
})
}
//重点: 由于顶部有305高度的tableHeaderView, 并且在设置的时候, 将tableView的scrollIndicatorInsets的top值设置为305, 所以需要忽略这部分高度, 才可以正常显示下拉刷新动画.
tableView.mj_header.ignoredScrollViewContentInsetTop = -305
tableView.mj_footer = MJRefreshAutoNormalFooter { [weak self] in
guard let weak = self else {return}
DispatchQueue.main.asyncAfter(deadline: .now() + .seconds(2), execute: {
weak.tableView.mj_footer.endRefreshing()
weak.dataSorceNumber += 10
weak.tableView.reloadData()
})
}
