CloudReader
一款基于網易云音樂UI，使用GankIo及豆瓣api開發的符合Google Material Desgin閱讀類的開源項目。項目采取的是Retrofit + RxJava + MVVM-DataBinding架構開發。開發中所遇到的各種問題已歸納在這里。
github地址：CloudReader
已更新至V3.0.0
效果圖
- 部分效果圖
- 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有深入的了解；不僅如此，水波紋的點擊效果在不同的主題下是有不同的表現。下面一起來談談如何達到以上的效果。
關于ToolBar的布局
看到上圖我們了解到一個ToolBar上有三種點擊效果..
這就有點尷尬了..不急，我們慢慢來分析。利用SDK下的工具uiautomatorviewer可得知：左邊的菜單按鈕是ToolBar內部包裹的一個Fragment,其中是一個ImageView和一個小紅點；然后中間是HorizontalScrollView，其中是三個ImageView；右邊的搜索鍵則是通過設置Menu菜單而來，這樣會有長按彈出“搜索”二字的提示。
現總結出兩個問題：1、ToolBar上按鈕的設置；2、不同按鈕點擊的水波紋效果
對于1： ToolBar上按鈕的設置
些許研究了ToolBar的使用后得知，可以直接在其內部包裹Imageview外，還可以通過菜單文件設置：
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
其中，main.xml內容如下：
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:id="@+id/action_search"
android:icon="@drawable/actionbar_search"http:// 顯示圖標
android:orderInCategory="100"http:// 菜單顯示優先級
android:title="@string/actionbar_search"http:// Toast文字“搜索”
app:showAsAction="always" />// 總是顯示，其中還有"never"點擊后彈出顯示；``ifRoom``根據空間判斷是否顯示
</menu>
然后再找到菜單相應的id處理點擊事件：
@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()) {
case R.id.action_search:
// Toast.makeText(this, "打開搜索頁面", Toast.LENGTH_SHORT).show();
return true;
default:
return super.onOptionsItemSelected(item);
}
}
這樣就完成了兩者點擊效果不同的處理。
對于2：不同按鈕點擊的水波紋效果
這里不是使用ripple屬性了，而是使用系統自帶的點擊水波紋選擇器，給要產生點擊效果的控件設置：
android:background="?attr/selectableItemBackgroundBorderless"
然而設置后你會發現所有點擊的顏色都是一致的，如果你使用主題：
theme="@style/Theme.AppCompat.Light.NoActionBar"
點擊效果就會全部是黑灰的，就是中間三個按鈕的那種效果，如果想要點擊效果是白色的話，需要設置主題：
theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
知道這樣后我們給不同的布局設置不同的主題就解決了這個問題。最終布局文件：
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="@color/colorTheme"
app:contentInsetStart="0.0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<FrameLayout
android:id="@+id/ll_title_menu"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
android:paddingLeft="15dp"
android:paddingRight="15dp">
<ImageView
android:id="@+id/iv_title_menu"
android:layout_width="23dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/titlebar_menu" />
</FrameLayout>
<HorizontalScrollView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="center">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
app:theme="@style/Theme.AppCompat.Light.NoActionBar">
<ImageView
android:id="@+id/iv_title_gank"
android:layout_width="55dp"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="@drawable/titlebar_disco" />
<ImageView
android:id="@+id/iv_title_one"
android:layout_width="55dp"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="@drawable/titlebar_music" />
<ImageView
android:id="@+id/iv_title_dou"
android:layout_width="55dp"
android:layout_height="match_parent"
android:background="?attr/selectableItemBackgroundBorderless"
android:src="@drawable/titlebar_friends" />
</LinearLayout>
</HorizontalScrollView>
</android.support.v7.widget.Toolbar>
這樣就得到了我們想要的效果~
更多細節優化我會慢慢整理在Wiki文檔，或你也可以直接查看源代碼。
DownLoad
寶貴意見
如果有任何問題，請到github的issue處寫上你不明白的地方，也可以通過下面提供的方式聯系我，我會及時給予幫助。另外常見的問題已總結在這里。
Thanks
參考項目：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
- GitHub：https://github.com/youlookwhat
