小叙:写在前面,最近没事在简书中浏览别人写的技术文章,发现简书中点击文章作者的头像,点击进去的这个页面效果感觉不错,头像的放大缩小,以及下面的类似今日头条的那种横向标签菜单。发现比较有意思,还有就是说好了,不断鞭策自己提高技术多分享有用的干货的,爆发吧小宇宙哈哈
直接进入正题
首先我们先来看看做出来的效果,这种效果在很多电商类中的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 的方法应该就是可以在状态栏上放一个透明的按钮吧,点击的时候 子、父都回到第一行
网友评论