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

布局首页分析实现

完成最终效果

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

  

• 效果分析：

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

  

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

  

封装顶部的PageTitleView

封装构造函数

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

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

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

• titles：显示的所有标题




设置UI界面


• 设置UI界面

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

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

• 添加顶部线和滑块的View





封装顶部的PageCotentView

封装构造函数

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

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

• 控制器的父控制器



设置UI界面内容

• 设置UI界面

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

• 添加UICollectionView，用于展示内容

实现UICollectionView的数据源方法

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

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






PageTitleView点击改变PageContentView

• 通过代理将PageTitleView的事件传递出去

• 内部调整






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

  
  

PageContentView滚动调整PageTitleView

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

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

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

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

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

• 由此得出结论：

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

• 1> 起始位置下标值

• 2> 目标位置下标值

• 3> 当前滚动的进度

• 图例分析（缺）

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

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

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

• 实现代码
  

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

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

  
  

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



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