小叙：写在前面，最近没事在简书中浏览别人写的技术文章，发现简书中点击文章作者的头像，点击进去的这个页面效果感觉不错，头像的放大缩小，以及下面的类似今日头条的那种横向标签菜单。发现比较有意思，还有就是说好了，不断鞭策自己提高技术多分享有用的干货的，爆发吧小宇宙哈哈
直接进入正题
首先我们先来看看做出来的效果，这种效果在很多电商类中的APP很长见，感觉应该还是挺实用的
QQ20170829-163100.gif
头部原理分析
- 首先是上面的原型头像的放大与缩小，这里比较简单的啦，就是根据tableView 的便宜量算一下就可以了，我们还是简单介绍一下吧
- 首先有一个最大值与最小值，也就是说最大图像与最小图像的尺寸
我这里用的是
let MaxSize:CGFloat = 60 //图像最大值
let MinSize:CGFloat = 30 //图像最小值
let TopHeight:CGFloat = 240 //最上面的大小
大家注意没有上面还有一点细节就是那个很线 的问题，当便宜大于大与最上面的headView 的高度的时候就会隐藏 导航下面的那条线 和 动态文章更多上线的线，在这里便于控制我使用的是自定义的导航
- 主要代码实现
//scrollView代理方法
func scrollViewDidScroll(_ scrollView: UIScrollView) {
var oy = scrollView.contentOffset.y
if oy>100 {
oy = 100
}else if oy < 0{
oy = 0
}
// print(oy)
/* 100 --30,30
0 --- 60,60
每增加1个单位应该变化的量
*/
let oneadd:CGFloat = (60-30)/100
let currntSize = MaxSize - oneadd*oy
let width:CGFloat = currntSize
let ox = screenWidth()/2-width/2
headImgView?.frame = CGRect.init(x: ox, y: 25, width: width, height: width)
//处理线下面的横线
oy = scrollView.contentOffset.y
// print("currnt----\(oy)")
if oy >= TopHeight {
navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 0)
self.myTwoCell?.hideUpLine()
}else{
navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 1)
self.myTwoCell?.showUpLine()
}
// 头部的问题到这里就处理完了，此处的代码我先删除方便我们浏览
}
- 代码中的关键点我已经通过注释的方式说明了，相信大家肯定可以理解的毕竟也是多么难的效果
菜单的实现原理
- 这里开始还是遇到了点小问题的，是把问题想的简单了
弯路： 这里先讲一下我的弯路，
1.外层是一个tableView 分成两段
2.每一段只有一个cell ,第0段的cell 就是 （动态，文章，跟多） 上面的部分见识我们就叫它OneCell吧
3.（动态，文章，跟多）第1端的段头
4.（动态，文章，跟多）后面的那部分是第1段的cell ，我们就叫它TwoCell 吧，TwoCell上用的是一个网络框架 >（ZJScrollPageView）
结果：这种思路做了发现，（动态，文章，跟多）段头是有了吸顶的效果，然而产生了问题,不能联动的问题，内tableview侧动，外侧tableview动,手势冲突了，经过了一段时间的处理终于，解决了手势冲突的问题
处理方式是：给外层与内侧控制器添加一个Bool 字段用来控制哪个一个可以动 ， 总之就是（父动子不动，父动子不动）
- 感觉一切尽在掌握之中，哈哈哈哈
- 问题：当运行的时候发现了一个问题，就是往上滑猛一滑的时候，到TopHeight 这个位置的时候就是停住了，必须再滑一下内层的tableView 才能动
- 经过上线的问题后重新整理思路，在上面的基础上改造一下大体思路还是差不多
- 终极方案 ：让外层的tableView支持多种手势，最简单的办法就是
class GestureTableView: UITableView,UIGestureRecognizerDelegate {
func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
return true
}
}
这样就好了
此时你在看我们的关键性代码就是我说的
父动子不动，子动父不动
- 我们看下代码如何处理
//scrollView代理方法
func scrollViewDidScroll(_ scrollView: UIScrollView) {
var oy = scrollView.contentOffset.y
if oy>100 {
oy = 100
}else if oy < 0{
oy = 0
}
// print(oy)
//100 --30,30
//0 --- 60,60
let oneadd:CGFloat = (60-30)/100
let currntSize = MaxSize - oneadd*oy
let width:CGFloat = currntSize
let ox = screenWidth()/2-width/2
headImgView?.frame = CGRect.init(x: ox, y: 25, width: width, height: width)
//处理线下面的横线
oy = scrollView.contentOffset.y
// print("currnt----\(oy)")
if oy >= TopHeight {
navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 0)
self.myTwoCell?.hideUpLine()
}else{
navLine?.frame = CGRect.init(x: 0, y: 43,width: screenWidth(), height: 1)
self.myTwoCell?.showUpLine()
}
/*---------------------------------------------------------------------*/
//处理手势问题
if oy >= TopHeight {
scrollView.contentOffset = CGPoint.init(x: 0, y: TopHeight)
if self.canScroll! {
self.canScroll = false //自己不动
//通知子类动
let nc = NotificationCenter.default
nc .post(name: NSNotification.Name.init(rawValue: "POST"), object: true)
}
}else{
if (!self.canScroll!) {//到最顶部
scrollView.contentOffset = CGPoint.init(x: 0, y: TopHeight)
}
}
scrollView.showsVerticalScrollIndicator = self.canScroll! ? true:false;
}
子类中的关键代码实现
func scrollViewDidScroll(_ scrollView: UIScrollView) {
if (!self.canScroll!) {
scrollView.contentOffset = CGPoint.zero
}
let oy = scrollView.contentOffset.y
if oy <= 0 {
//主动子不动
self.canScroll = false
let nc = NotificationCenter.default
nc.post(name: Notification.Name.init(rawValue: "MAINPOST"), object: true)
scrollView.contentOffset = CGPoint.ze
}
scrollView.showsVerticalScrollIndicator = self.canScroll! ? true:false;
}
终于讲完了
- 后续差不多，就这样啦，具体的实现当然也会奉献出来的，欢迎喜欢哦
Demo留一下一个问题,当滑到最底部的时候，触摸顶部的状态栏 不会自动滑到，第一行，这个问题还没有解决如果你有好多办法欢迎留言，
- 我在想比较low 的方法应该就是可以在状态栏上放一个透明的按钮吧，点击的时候 子、父都回到第一行
