当前所在位置: 合肥汽车网主页 > 企业 > 正文 >

玩转斗鱼直播APP——首页布局分析实现篇!

2021-01-15 04:42:18 来源:互联网 阅读:-
摘要布局首页分析实现完成最终效果这个效果还是挺常见的哈效果分析:顶部是一个工具类,并且为了该工具类可以复用。(其他界面也用到)最好是单独封装起来中间内容可以左右滚动,并且有分页效果。可以通过封装UIView,并且里面添加UICollectionView方式。

布局首页分析实现

完成最终效果

  • 这个效果还是挺常见的哈

    玩转斗鱼直播APP——首页布局分析实现篇

  • 效果分析:

    • 顶部是一个工具类,并且为了该工具类可以复用。(其他界面也用到)最好是单独封装起来

      玩转斗鱼直播APP——首页布局分析实现篇

    • 中间内容可以左右滚动,并且有分页效果。可以通过封装UIView,并且里面添加UICollectionView方式。

      玩转斗鱼直播APP——首页布局分析实现篇

    封装顶部的PageTitleView

    封装构造函数

    • 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容

      • frame:创建对象时确定了frame就可以直接设置子控件的位置和尺寸

      • isScrollEnable:是否可以滚动。某些地方该控件是可以滚动的。

      • titles:显示的所有标题玩转斗鱼直播APP——首页布局分析实现篇


      设置UI界面

      • 设置UI界面

        • 添加UIScrollView,如果标题过多,则可以滚动

        • 初始化所有的Label,用于显示标题。并且给label添加监听手势

        • 添加顶部线和滑块的View

    玩转斗鱼直播APP——首页布局分析实现篇
    玩转斗鱼直播APP——首页布局分析实现篇
    玩转斗鱼直播APP——首页布局分析实现篇

    封装顶部的PageCotentView

    封装构造函数

    • 封装构造函数,让别人在创建对象时,就传入其实需要显示的内容

      • 所有用于显示在UICollectionView的Cell的所有控制器

      • 控制器的父控制器

    玩转斗鱼直播APP——首页布局分析实现篇

    设置UI界面内容

    • 设置UI界面

      • 将所有的子控制器添加到父控制器中

      • 添加UICollectionView,用于展示内容玩转斗鱼直播APP——首页布局分析实现篇

      实现UICollectionView的数据源方法

      • 在返回Cell的方法中,先将cell的contentView中的子控件都移除,防止循环引用造成问题

      • 取出indexPath.item对应的控制器,将控制器的View添加到Cell的contentView中

    玩转斗鱼直播APP——首页布局分析实现篇


    PageTitleView点击改变PageContentView

    • 通过代理将PageTitleView的事件传递出去玩转斗鱼直播APP——首页布局分析实现篇

    • 内部调整

    玩转斗鱼直播APP——首页布局分析实现篇


    • 在PageContentView中设置当前应该滚动的位置

      玩转斗鱼直播APP——首页布局分析实现篇

    PageContentView滚动调整PageTitleView

    • 首先在scrollViewDidScroll的代理方法中就可以监听滚动

    • 那么滚动时,我们有哪些内容是需要传递出去呢?

      • 1> 原来位置的Title颜色会逐渐变暗

      • 2> 目标位置的Title颜色会逐渐变亮

      • 3> 变化程度是和滚动的多少相关

    • 由此得出结论:

      • 我们一共需要获取三个值,并且将这三个值传递出去

      • 1> 起始位置下标值

      • 2> 目标位置下标值

      • 3> 当前滚动的进度

    • 图例分析(缺)

      • 左右滑动时,下标值、进度是不同的

      • 需要经过判断来获取,并且下标值需要防止越界问题

      • 注意:当左滑结束时,此时再+1会出错。因此必须加上targetIndex = sourceIndex,且进度为1

    • 实现代码玩转斗鱼直播APP——首页布局分析实现篇
      玩转斗鱼直播APP——首页布局分析实现篇

    • 根据滚动传入的值,调整PageTitleView

    • 两种颜色必须使用RGB值设置(方便通过RGB实现渐变效果)

      玩转斗鱼直播APP——首页布局分析实现篇

    • 调整scrollLine&两个Label颜色渐变

    玩转斗鱼直播APP——首页布局分析实现篇

    更多实用的干货,请登录520it.com,小码哥社区。

    推荐阅读:美丽潮流

    相关滚动