手把手带你撸一个网易云音乐首页（一）

前言

Hello，大家好，近期我一直在学习用 Swift 编码，由于之前很多项目我都是用 OC 实现的，所以导致我现在对 Swift 还是处于一个学习的阶段中。为了提高自己的学习效率，每次我都会为自己定下一个短期的目标，就那这次来说吧，为了加快自己上手 Swift, 我为自己定下了的目标就是完成一个 Swift 版本的网易云音乐 App。不知道大家在学习一门新语言的时候，是如何提高学习效率的？不妨在评论区与大家交流一下。

调研分析

先分析一下 iOS 端网易云音乐 App 的首页，如图所示：

看完后，首先摆在我眼前的第一个困难就是我该如何去获取这些数据！我的第一个想法当然就是去 GitHub 上找有没有开源的 API，不找不知道，一找果然很满意

其中就有“首页发现” 和 “首页-发现-圆形图标入口列表” 的 API, 无需我们进行多个接口的调用以及数据源的拼接，就可一获取首页的全部数据啦！在分析返回的 JSON 数据格式的时候，还给大佬提了个issue，大佬也很快的回复了，再次膜拜一下大佬。

{ "code": 200, "data": { "cursor": null, "blocks": [ { "blockCode": "HOMEPAGE_BANNER", "showType": "BANNER", "extInfo": { "banners": [ { "adLocation": null, "monitorImpress": null, "bannerId": "1622653251261138", "extMonitor": null, "pid": null, "pic": " "program": null, "video": null, "adurlV2": null, "adDispatchJson": null, "dynamicVideoData": null, "monitorType": null, "adid": null, "titleColor": "red", "requestId": "", "exclusive": false, "scm": "1.music-homepage.homepage_banner_force.banner.2941964.-1777659412.null", "event": null, "alg": null, "song": { ......}

数据源的问题解决了，接下来就是该解决如何将数据可视化了，从网易云音乐首页展示的效果分析来看，整体的视图支持上下滚动，其中单个 Cell 的视图支持横向滚动，所以这里采用 UITableView 嵌套 UICollectionView 的方式应该来说再合适不过了。

剩下的就是需要用到的一些第三方库了，在这里我们用到的第三方库如下：

​​Alamofire​​​​Kingfisher​​​​SnapKit​​

需要实现的功能

它的首页内容大致可以分为以下几部分：

顶部搜索视图Banner圆形菜单按钮推荐歌单个性推荐精选音乐视频雷达歌单热门播客专属场景歌单新歌，新碟，数字专辑音乐日历24小时播客视频合辑

支持 light Mode 和 Dark Mode 主题

这里先放上我最终实现好了的效果图：

具体的实现细节我会在下篇文章中阐述，功能会按照我上述列出来的功能顺序来一一实现的，同时我也会将该工程的代码放在GitHub仓库上，欢迎各位点个 ⭐️ 支持一下。

最后

因为该工程功能的代码量比较多，所以我会将文章分成三部分，尽可能的突出每篇文章的重点，如果我的文章对你有帮助，请点个赞支持我一下。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。