设为首页 加入收藏
您当前位置 > 武汉网 > 科技 > 正文
>
分享
新浪微博
腾讯微博
微信
QQ空间
QQ好友
手机阅读分享话题

手机斗鱼直播APP——游戏界面实现

2020-06-26 09:49:15阅读:- 来源:
游戏界面实现界面效果展示界面效果界面分析分析图如何实现这个界面实现的方案很多可以直接使用UITableView,之后添加一个HeaderView可以直接使用UICollectionView,之后添加内边距(类似推荐界面实现)这里采取UICollectionView的方案下面每一个

游戏界面实现

界面效果展示

  • 界面效果

    手机斗鱼直播APP——游戏界面实现

界面分析

  • 分析图

    手机斗鱼直播APP——游戏界面实现

  • 如何实现

    • 这个界面实现的方案很多

    • 可以直接使用UITableView,之后添加一个HeaderView

    • 可以直接使用UICollectionView,之后添加内边距(类似推荐界面实现)

  • 这里采取UICollectionView的方案

    • 下面每一个游戏就是一个Cell,如果使用UITableView则需要对数据进行进一步处理

    • 另外上面部分,直接添加内边距,并且添加内容即可

界面实现

添加UICollectionView

  • 懒加载UICollectionView,并且设置相关属性手机斗鱼直播APP——游戏界面实现

  • 设置数据源,注册Cell,实现数据源方法

手机斗鱼直播APP——游戏界面实现

接口描述

  • 接口名称:全部游戏

  • 接口地址:http://capi.douyucdn.cn/api/v1/getColumnDetail

  • 请求参数:

参数名称参数说明
shortNamegame

请求数据

  • 创建对应的ViewModel,用于GameVc数据的请求

手机斗鱼直播APP——游戏界面实现

  • 发送网络请求

手机斗鱼直播APP——游戏界面实现

  • 对之前的CollectionGameCell进行改进

    • 添加底部的线段

    • 展示数据即可

手机斗鱼直播APP——游戏界面实现

  • 添加组的HeaderView

    • 实现对应的数据源方法即可

手机斗鱼直播APP——游戏界面实现

添加内边距,并且添加顶部的View

  • 添加内边距

手机斗鱼直播APP——游戏界面实现

  • 懒加载两个View

    • gameView:用于展示推荐游戏

    • headerView:顶部View的header

手机斗鱼直播APP——游戏界面实现

  • 在设置UI处添加两个View

手机斗鱼直播APP——游戏界面实现

  • 从之前请求的数据中获取数据,进行展示即可

    • 默认展示前10条数据

更多资讯更多讨论,请登录bbs.520it.com,小码哥论坛。

(正文已经结束)

推荐阅读:华硕yx570

免责声明及提醒:此文内容为本网所转载企业宣传资讯,该相关信息仅为宣传及传递更多信息之目的,不代表本网站观点,文章真实性请浏览者慎重核实!任何投资加盟均有风险,提醒广大民众投资需谨慎!