Android开源:CloudReader - 一款基于网易云音乐UI
KaseyHerrin
8年前
<h2>CloudReader</h2> <p>一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目。项目采取的是Retrofit + RxJava + MVVM-DataBinding架构开发。</p> <h2>效果图</h2> <ul> <li>部分效果图</li> </ul> <p style="text-align: center;"><img src="https://simg.open-open.com/show/5b01d5b377803772927ba3e0678e08e7.png"></p> <ul> <li>gif演示</li> </ul> <p style="text-align:center"><img src="https://simg.open-open.com/show/b7376ef4eb089a20d704e5120cb16bdf.gif"></p> <h2>Introduction</h2> <p>网易云音乐于2013年4月23日正式发布,是一款主打发现和分享,带有浓厚社交基因的网络音乐产品。相信用过的人都知道它给人的体验是极好的,我看过了绝大多数仿写的案例,基本UI都不够细致,于是决定自己动手写一个,起初也不知道具体它是怎么布局的,后来使用SDK提供的工具 uiautomatorviewer 慢慢分析后再逐渐完善的,争取效果一致~</p> <h2>模块分析</h2> <p>干货(gank.io)</p> <p>API使用的是动听(轮播图)和代码家的Gank.Io。</p> <ul> <li> <p>每日推荐:干货集中营推送的每日内容,包括每天一个妹子图,相关Android、IOS等其他干货。每天第12:30之后更新,因为双休不更新所以内容缓存三天网络取不到就取缓存。</p> </li> <li> <p>福利:Glide加载图片,点击查看大图,支持双指缩放,一下可查看列表的所有图片,再也不用逐个点击每张图啦。</p> </li> <li> <p>干货订制:可以筛选自己喜欢干货的类别,有全部、IOS、App、前端、休息视频和拓展资源。</p> </li> <li><strong>大安卓:</strong> 显示安卓的全部资讯。支持下拉刷新方便查看最新的资源。</li> </ul> <p>电影(豆瓣)</p> <p>API是豆瓣提供的,因为限制了每个ip每分钟请求的次数,所以请酌情使用,由此带来的不便请见谅。</p> <ul> <li><strong>电影热映区:</strong> 每日更新,展示最新上映的电影热度排行榜。</li> <li><strong>豆瓣电影Top250:</strong> 豆瓣高分电影集锦,让你放心找好片~</li> </ul> <p>书籍(豆瓣)</p> <p>使用的是豆瓣的搜索API。更多订制内容由于时间原因第一版还未添加,第二版会加上。</p> <ul> <li><strong>综合:</strong> 检索豆瓣综合类的书籍并展示。</li> <li><strong>文学:</strong> 检索豆瓣文学类的书籍并展示。</li> <li><strong>生活:</strong> 检索豆瓣生活类的书籍并展示。</li> </ul> <p>抽屉界面</p> <p>完全仿网易云音乐抽屉界面,包括诸多细节如透明标题栏,背景透明度,水波纹颜色等。</p> <ul> <li><strong>项目主页:</strong> 展示项目介绍信息,及内容说明,可以分享给你的好友哦。</li> <li><strong>扫码下载:</strong> 扫码即可下载App,帮助您快速试用~</li> <li><strong>问题反馈:</strong> 常见问题归纳,反馈地方,联系方式都在这里哦!</li> <li><strong>关于云阅:</strong> 更新日志在这里可见,主人是利用工作外时间做的,周期较长,满意的小伙伴给个Star吧,这将是我继续迭代的动力,谢谢~</li> </ul> <h2>What can be learned about this project</h2> <p>那么,从本项目中你能学到哪些知识呢?</p> <ul> <li>1、干货集中营内容与豆瓣电影书籍内容。</li> <li>2、高仿网易云音乐歌单详情页。</li> <li>3、 NavigationView 搭配 DrawerLayout 的具体使用。</li> <li>4、MvvM-DataBing的项目应用。</li> <li>5、RxBus代替EventBus进行组件之间通讯。</li> <li>6、 ToolBar 及 TabLayout 的使用姿势。</li> <li>7、 Glide 加载监听,获取缓存,圆角图片,高斯模糊。</li> <li>8、水波纹点击效果详细使用与适配。</li> <li>9、 RecyclerView 下拉刷新上拉加载。</li> <li>10、基于 DataBinding 的 ViewHolder 。</li> <li>11、基于 DataBinding 的 BaseActivity 和 BaseFragment 。</li> <li>12、 Fragment 懒加载模式。</li> <li>13、透明状态栏使用与版本适配。</li> <li>14、 SwipeRefreshLayout 结合 RecyclerView 下拉刷新上拉加载。</li> <li>15、 CoordinatorLayout + Behavior 实现标题栏渐变。</li> <li>16、 NestedScrollView 嵌套 RecyclerView 的使用。</li> </ul> <h2>细节分析 - ToolBar 上的按钮点击效果</h2> <p>仔细研究的人知道,网易云音乐的UI做的很精致,就拿一个 ToolBar 为例,上面的每个按钮的点击操作都有各自的效果。这给了用户一个很好的反馈,就是如下的效果:</p> <p style="text-align:center"><img src="https://simg.open-open.com/show/7e8e21f9916b4c71bc759f93626d78ff.gif"></p> <p>上图是在android 5.1系统下的效果图。在6.0上搜索的点击效果有些许改变,其他基本类似;5.0以下点击则都表现出一般选择器的效果。</p> <p>然而做到以上的效果并不容易,需要你对 ToolBar 有深入的了解;不仅如此,水波纹的点击效果在不同的主题下是有不同的表现。 </p> <p> </p> <p> </p>