手把手带你撸一个网易云音乐首页(一)

前言

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

调研分析

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

image

看完后,首先摆在我眼前的第一个困难就是我该如何去获取这些数据!我的第一个想法当然就是去 GitHub 上找有没有开源的 API,不找不知道,一找果然很满意,原来早就有大佬提供了网易云音乐的 API:

image

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

代码语言:javascript
复制
{
    "code": 200,
    "data": {
        "cursor": null,
        "blocks": [
            {
                "blockCode": "HOMEPAGE_BANNER",
                "showType": "BANNER",
                "extInfo": {
                    "banners": [
                        {
                            "adLocation": null,
                            "monitorImpress": null,
                            "bannerId": "1622653251261138",
                            "extMonitor": null,
                            "pid": null,
                            "pic": "http://p1.music.126.net/gWmqDS3Os7FWFkJ3s8Wotw==/109951166052270907.jpg",
                            "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

需要实现的功能

它的首页内容大致可以分为以下几部分:
  1. 顶部搜索视图
  2. Banner
  3. 圆形菜单按钮
  4. 推荐歌单
  5. 个性推荐
  6. 精选音乐视频
  7. 雷达歌单
  8. 热门播客
  9. 专属场景歌单
  10. 新歌,新碟,数字专辑
  11. 音乐日历
  12. 24小时播客
  13. 视频合辑
支持 light Mode 和 Dark Mode 主题

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

image

具体的实现细节我会在下篇文章中阐述,功能会按照我上述列出来的功能顺序来一一实现的,同时我也会将该工程的代码放在GitHub仓库上。

最后

因为该工程功能的代码量比较多,所以我会将文章分成三部分,尽可能的突出每篇文章的重点。