開源：CloudReader - 一個仿網易云音樂UI
CloudReader
一款基于網易云音樂UI，使用GankIo及豆瓣api開發的符合Google Material Desgin閱讀類的開源項目。項目采取的是Retrofit + RxJava + MVVM-DataBinding架構開發。
效果圖
- 部分效果圖
cloudreader.png
- gif演示
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 為例，上面的每個按鈕的點擊操作都有各自的效果。這給了用戶一個很好的反饋，就是如下的效果：
toolbar_click.gif
上圖是在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></code></pre>
這樣就得到了我們想要的效果~