小叙：写在前面，最近没事在简书中浏览别人写的技术文章，发现简书中点击文章作者的头像，点击进去的这个页面效果感觉不错，头像的放大缩小，以及下面的类似今日头条的那种横向标签菜单。发现比较有意思，还有就是说好了，不断鞭策自己提高技术多分享有用的干货的，爆发吧小宇宙哈哈

---

直接进入正题

首先我们先来看看做出来的效果，这种效果在很多电商类中的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 的方法应该就是可以在状态栏上放一个透明的按钮吧，点击的时候 子、父都回到第一行

GitHub demo地址链接