美文网首页iOS一些实用的东西程序员
iOS 仿简书 个人主页 ,个人中心 页面样式 效果

iOS 仿简书 个人主页 ,个人中心 页面样式 效果

作者: 朱允见 | 来源:发表于2017-08-30 11:32 被阅读667次

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


    直接进入正题

    首先我们先来看看做出来的效果,这种效果在很多电商类中的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地址链接

    相关文章

      网友评论

        本文标题:iOS 仿简书 个人主页 ,个人中心 页面样式 效果

        本文链接:https://www.haomeiwen.com/subject/oazodxtx.html