苏州都市网_都市生活消费门户网站
您当前的位置 : 苏州都市网  >  资讯
玩转斗鱼直播APP——首页布局分析实现篇
2020-06-26 05:41:58 来源:互联网 阅读:-

布局首页分析实现

完成最终效果

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

    玩转斗鱼直播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,小码哥社区。

    推荐阅读:骁龙710和麒麟970哪个好

    频道推荐
    • 贾宝玉为何会在林黛玉死后娶薛宝钗?
      贾宝玉为何会在林黛玉死后娶薛宝钗?

      宝玉和黛玉的爱是从一开始见面的时候都有似曾相见的灵犀瞬间相同的感应,到慢慢的越来越深的了解和情趣相投,还有就是有一种不需要言状的默契,比如宝玉就说了林妹妹从来不...

      2020-04-22
    • 关晓彤直播吃鸭脖200万粉丝围观
      关晓彤直播吃鸭脖200万粉丝围观

      关晓彤直播中,她没有化妆就出现了,她的皮肤又白又嫩,她看起来很好,里面是白色,里面是红色。网友一个接一个地羡慕她。在现场直播中,她完全无视自己的形象,吃了鸭脖和...

      2020-04-22
    • Steam《赤痕夜之仪式》促销:国区新史低价82元
      Steam《赤痕夜之仪式》促销:国区新史低价

      根据Steam商城页面公开的新消息,五十岚孝司作品《赤痕:夜之仪式》目前在Steam平台开启了优惠促销活动,此次《赤痕:夜之仪式》迎来了新史低价,国区售价82元...

      2020-04-22
    • Steam《赤痕夜之仪式》促销:国区新史低价82元
      Steam《赤痕夜之仪式》促销:国区新史低价

      根据Steam商城页面公开的新消息,五十岚孝司作品《赤痕:夜之仪式》目前在Steam平台开启了优惠促销活动,此次《赤痕:夜之仪式》迎来了新史低价,国区售价82元...

      2020-04-22
    • 李小璐直播助理身份曝光!39岁未婚独自带娃,女儿跟自己姓入族谱
      李小璐直播助理身份曝光!39岁未婚独自带娃,

      李小璐在经历了从影后走向开网店卖衣服,再到做短视频网红,终于走向了过气明星的必经之路——开直播卖货。4月20日晚上,李小璐进行了首场纯带货直播,直播4小时中,有...

      2020-04-22
    • 共建绿色产业生态链 开启绿色化学美好生活
      共建绿色产业生态链 开启绿色化学美好生活

      4月22日迎来了第51个世界地球日。世界地球日让我们每个人审视人与地球的关系。我们只有一个地球,珍爱美丽地球、守护自然资源,就是在保护我们的家园。对于企业来说,...

      2020-04-22