《云阅》一个仿网易云音乐UI，使用Gank.Io及豆瓣Api开发的开源项目

CloudReader

一款基于网易云音乐UI，使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目。项目采取的是Retrofit + RxJava + MVVM-DataBinding架构开发。开发中所遇到的各种问题已归纳在这里。

github地址：CloudReader

效果图

• 部分效果图

• gif演示

Introduction

网易云音乐于2013年4月23日正式发布，是一款主打发现和分享，带有浓厚社交基因的网络音乐产品。相信用过的人都知道它给人的体验是极好的，我看过了绝大多数仿写的案例，基本UI都不够细致，于是决定自己动手写一个，起初也不知道具体它是怎么布局的，后来使用SDK提供的工具uiautomatorviewer慢慢分析后再逐渐完善的，争取效果一致~

模块分析

干货（gank.io）

API使用的是动听（轮播图）和代码家的Gank.Io。

• 每日推荐： 干货集中营推送的每日内容，包括每天一个妹子图，相关Android、IOS等其他干货。每天第12：30之后更新，因为双休不更新所以内容缓存三天网络取不到就取缓存。

• 福利： Glide加载图片，点击查看大图，支持双指缩放，一下可查看列表的所有图片，再也不用逐个点击每张图啦。

• 干货订制： 可以筛选自己喜欢干货的类别，有全部、IOS、App、前端、休息视频和拓展资源。

• 大安卓： 显示安卓的全部资讯。支持下拉刷新方便查看最新的资源。

电影（豆瓣）

API是豆瓣提供的，因为限制了每个ip每分钟请求的次数，所以请酌情使用，由此带来的不便请见谅。

• 电影热映区： 每日更新，展示最新上映的电影热度排行榜。
• 豆瓣电影Top250： 豆瓣高分电影集锦，让你放心找好片~

书籍（豆瓣）

使用的是豆瓣的搜索API。更多订制内容由于时间原因第一版还未添加，第二版会加上。

• 综合： 检索豆瓣综合类的书籍并展示。
• 文学： 检索豆瓣文学类的书籍并展示。
• 生活： 检索豆瓣生活类的书籍并展示。

抽屉界面

完全仿网易云音乐抽屉界面，包括诸多细节如透明标题栏，背景透明度，水波纹颜色等。

• **项目主页：**展示项目介绍信息，及内容说明，可以分享给你的好友哦。
• **扫码下载：**扫码即可下载App，帮助您快速试用~
• **问题反馈：**常见问题归纳，反馈地方，联系方式都在这里哦！
• **关于云阅：**更新日志在这里可见，主人是利用工作外时间做的，周期较长，满意的小伙伴给个Star吧，这将是我继续迭代的动力，谢谢~

What can be learned about this project

那么，从本项目中你能学到哪些知识呢？

• 1、干货集中营内容与豆瓣电影书籍内容。
• 2、高仿网易云音乐歌单详情页。
• 3、NavigationView搭配DrawerLayout的具体使用。
• 4、MvvM-DataBing的项目应用。
• 5、RxBus代替EventBus进行组件之间通讯。
• 6、ToolBar及TabLayout的使用姿势。
• 7、Glide加载监听，获取缓存，圆角图片，高斯模糊。
• 8、水波纹点击效果详细使用与适配。
• 9、RecyclerView下拉刷新上拉加载。
• 10、基于DataBinding的ViewHolder。
• 11、基于DataBinding的BaseActivity和BaseFragment。
• 12、Fragment懒加载模式。
• 13、透明状态栏使用与版本适配。
• 14、SwipeRefreshLayout结合RecyclerView下拉刷新上拉加载。
• 15、CoordinatorLayout + Behavior实现标题栏渐变。
• 16、NestedScrollView嵌套RecyclerView的使用。

细节分析 - ToolBar 上的按钮点击效果

仔细研究的人知道，网易云音乐的UI做的很精致，就拿一个ToolBar为例，上面的每个按钮的点击操作都有各自的效果。这给了用户一个很好的反馈，就是如下的效果：

上图是在android 5.1系统下的效果图。在6.0上搜索的点击效果有些许改变，其他基本类似；5.0以下点击则都表现出一般选择器的效果。

然而做到以上的效果并不容易，需要你对ToolBar有深入的了解；不仅如此，水波纹的点击效果在不同的主题下是有不同的表现。 更多细节优化我会慢慢整理在Wiki文档，或你也可以直接查看源代码。

DownLoad

　火速跳转

宝贵意见

如果有任何问题，请到github的issue处写上你不明白的地方，也可以通过下面提供的方式联系我，我会及时给予帮助。另外常见的问题已总结在这里。

Thanks

• 图片参考：iconfont、UI工程师Sandawang和网易云音乐App。

• 参考项目：ImitateNetEasyCloud、banya；主要数据来源：Gank.Io、豆瓣Api。

• 使用到的开源库：glide、bottomsheet、nineoldandroids、rxandroid等等。

• 感谢代码家、张鸿洋、drakeet、yang747046912、GiitSmile、forezp等众多开发者贡献的开源项目，让我从中学到了很多!

Statement

感谢网易云音乐App提供参考，附上《网易云音乐Android 3.0视觉设计规范文档》。本人是网易云音乐的粉丝，使用了其中的部分素材，并非攻击，如构成侵权请及时通知我修改或删除。大部分数据来自于干货集中营和豆瓣APIV2.0，一切数据解释权都归代码家和豆瓣所有。

End

如果你觉得不错，对你有帮助，可以帮忙分享给你更多的朋友，这是给我们最大的动力与支持，同时希望你多多fork，star，follow，我将贡献更多的开源项目O(∩_∩)O~。开源使生活更美好！

About me

• CSDN：Jingbin_
• Blog：http://jingbin.me
• **Email：**[email protected]
• GitHub：https://github.com/youlookwhat