前言
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
需要实现的功能
它的首页内容大致可以分为以下几部分:
- 顶部搜索视图
- Banner
- 圆形菜单按钮
- 推荐歌单
- 个性推荐
- 精选音乐视频
- 雷达歌单
- 热门播客
- 专属场景歌单
- 新歌,新碟,数字专辑
- 音乐日历
- 24小时播客
- 视频合辑
支持 light Mode 和 Dark Mode 主题
这里先放上我最终实现好了的效果图:
image
具体的实现细节我会在下篇文章中阐述,功能会按照我上述列出来的功能顺序来一一实现的,同时我也会将该工程的代码放在GitHub仓库上。
最后
因为该工程功能的代码量比较多,所以我会将文章分成三部分,尽可能的突出每篇文章的重点。