《雲閱》一個仿網易雲音樂UI，使用Gank.Io及豆瓣Api開發的開源項目

時間 2019-11-21

標籤雲閱一個網易音樂使用 gank.io gank 豆瓣 api 開發開源項目简体版

原文原文鏈接

CloudReader

一款基於網易雲音樂UI，使用GankIo及豆瓣api開發的符合Google Material Desgin閱讀類的開源項目。項目採起的是Retrofit + RxJava + MVVM-DataBinding架構開發。開發中所遇到的各類問題已概括在這裏。html

github地址：CloudReader前端

效果圖

部分效果圖

cloudreader.png

gif演示

cloudreader.gif

Introduction

網易雲音樂於2013年4月23日正式發佈，是一款主打發現和分享，帶有濃厚社交基因的網絡音樂產品。相信用過的人都知道它給人的體驗是極好的，我看過了絕大多數仿寫的案例，基本UI都不夠細緻，因而決定本身動手寫一個，起初也不知道具體它是怎麼佈局的，後來使用SDK提供的工具uiautomatorviewer慢慢分析後再逐漸完善的，爭取效果一致~ java

模塊分析

乾貨（gank.io）

API使用的是動聽（輪播圖）和代碼家的Gank.Io。android

每日推薦： 乾貨集中營推送的每日內容，包括天天一個妹子圖，相關Android、IOS等其餘乾貨。天天第12：30以後更新，由於雙休不更新因此內容緩存三天網絡取不到就取緩存。git
福利： Glide加載圖片，點擊查看大圖，支持雙指縮放，一下可查看列表的全部圖片，不再用逐個點擊每張圖啦。github
乾貨訂製： 能夠篩選本身喜歡乾貨的類別，有所有、IOS、App、前端、休息視頻和拓展資源。api
大安卓： 顯示安卓的所有資訊。支持下拉刷新方便查看最新的資源。緩存

電影（豆瓣）

API是豆瓣提供的，由於限制了每一個ip每分鐘請求的次數，因此請酌情使用，由此帶來的不便請見諒。網絡

電影熱映區： 每日更新，展現最新上映的電影熱度排行榜。
豆瓣電影Top250： 豆瓣高分電影集錦，讓你放心找好片~

書籍（豆瓣）

使用的是豆瓣的搜索API。更多訂製內容因爲時間緣由初版還未添加，第二版會加上。架構

綜合： 檢索豆瓣綜合類的書籍並展現。
文學： 檢索豆瓣文學類的書籍並展現。
生活： 檢索豆瓣生活類的書籍並展現。

抽屜界面

徹底仿網易雲音樂抽屜界面，包括諸多細節如透明標題欄，背景透明度，水波紋顏色等。

項目主頁：展現項目介紹信息，及內容說明，能夠分享給你的好友哦。
掃碼下載：掃碼便可下載App，幫助您快速試用~
問題反饋：常見問題概括，反饋地方，聯繫方式都在這裏哦！
關於雲閱：更新日誌在這裏可見，主人是利用工做外時間作的，週期較長，滿意的小夥伴給個Star吧，這將是我繼續迭代的動力，謝謝~

What can be learned about this project

那麼，從本項目中你能學到哪些知識呢？

一、乾貨集中營內容與豆瓣電影書籍內容。
二、高仿網易雲音樂歌單詳情頁。
三、NavigationView搭配DrawerLayout的具體使用。
四、MvvM-DataBing的項目應用。
五、RxBus代替EventBus進行組件之間通信。
六、ToolBar及TabLayout的使用姿式。
七、Glide加載監聽，獲取緩存，圓角圖片，高斯模糊。
八、水波紋點擊效果詳細使用與適配。
九、RecyclerView下拉刷新上拉加載。
十、基於DataBinding的ViewHolder。
十一、基於DataBinding的BaseActivity和BaseFragment。
十二、Fragment懶加載模式。
1三、透明狀態欄使用與版本適配。
1四、SwipeRefreshLayout結合RecyclerView下拉刷新上拉加載。
1五、CoordinatorLayout + Behavior實現標題欄漸變。
1六、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菜單而來，這樣會有長按彈出「搜索」二字的提示。

現總結出兩個問題：一、ToolBar上按鈕的設置；二、不一樣按鈕點擊的水波紋效果

對於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"// 顯示圖標 android:orderInCategory="100"// 菜單顯示優先級 android:title="@string/actionbar_search"// 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>