当前位置: 深圳网首页 >> 资讯
玩转斗鱼直播APP——布局推荐界面篇!
发表时间:2021-01-16 07:39:44  阅读:-   来源:互联网

布局推荐界面

实现效果

  • 今天内容完成效果

    玩转斗鱼直播APP——布局推荐界面篇

推荐界面分析

  • 上层有无限轮播器(之后再完成)

  • 滚动的UIScrollView或者UICollectionView(之后再完成)

  • 下面是UICollectionView,并且有HeaderView

    • UICollectionView的Cell大小基本一致,但是在颜值处Cell的高度有变化。

    • 该UICollectionView一共12组,第一组8个Item,其他组均4个Item

布局UICollectionView

  • 在控制器的View中添加UICollectionView

    • 懒加载UICollectionView

    • 将UICollectionView添加到控制器的View中

  • 特殊属性设置:

    • headerReferenceSize : 设置头部的Size

    • sectionInset :设置每组的内边距

玩转斗鱼直播APP——布局推荐界面篇

  • 实现UICollectionView的数据源方法

玩转斗鱼直播APP——布局推荐界面篇

  • 展示效果如下:

    玩转斗鱼直播APP——布局推荐界面篇

布局UICollectionView的headerView

  • 实现效果

    玩转斗鱼直播APP——布局推荐界面篇

  • 实现思路

    • 自定义UICollectionReusableView, 用于作为HeaderView

    • 可以通过Xib直接描述

      玩转斗鱼直播APP——布局推荐界面篇

    • 在注册Cell时,使用Nib进行注册

  • 代码如下:

玩转斗鱼直播APP——布局推荐界面篇

  • 效果如下:

    玩转斗鱼直播APP——布局推荐界面篇

布局普通的UICollectionViewCell

  • 实现效果

    玩转斗鱼直播APP——布局推荐界面篇

  • 实现思路

    • 自定义UICollectionViewCell,用于作为普通的Cell

    • 可以通过Xib直接描述

      玩转斗鱼直播APP——布局推荐界面篇

    • 在注册Cell时,使用Nib进行注册

  • 代码如下:

玩转斗鱼直播APP——布局推荐界面篇

  • 效果如下:

    玩转斗鱼直播APP——布局推荐界面篇

布局颜色的UICollectionViewCell

  • 实现效果

    玩转斗鱼直播APP——布局推荐界面篇

  • 实现思路

    • 自定义UICollectionViewCell,用于作为颜值的Cell

    • 可以通过Xib直接描述

      玩转斗鱼直播APP——布局推荐界面篇

    • 在注册Cell时,同时注册颜值的Cell

  • 代码如下

玩转斗鱼直播APP——布局推荐界面篇

  • 在获取Cell时,进行判断

    • 抽取父类,方便管理

玩转斗鱼直播APP——布局推荐界面篇

  • 另外,因为NormalCell&PrettyCell高度不同, 因此需要设置代理,并且实现代理方法

玩转斗鱼直播APP——布局推荐界面篇

  • 效果如下:

    玩转斗鱼直播APP——布局推荐界面篇

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

推荐阅读:龙岩热线

图片推荐
关于我们 | 联系我们 | XML地图 | 网站地图TXT | 版权声明

Copyright 2021 深圳网 版权所有 本网拒绝一切非法行为 欢迎监督举报 如有错误信息 欢迎纠正