引言

有一段時(shí)間閑著沒(méi)事做，突發(fā)奇想，于是就去防了部分網(wǎng)易云UI的界面，最開(kāi)始是想仿成這個(gè)樣子：

于是反編譯了網(wǎng)易云的源文件，果不其然混淆的很徹底，表示并不能看懂，諾：

里面的代碼大部分都是smali語(yǔ)法，也就是這樣的:

.class public La/auu/a; .super Ljava/lang/Object; .source "a.java"# static fields .field public static final CRLF:I = 0x4.field private static final DECODE:[I.field private static final DECODE_WEBSAFE:[I.field public static final DEFAULT:I = 0x0.field private static final EQUALS:I = -0x2.field public static final NO_CLOSE:I = 0x10.field public static final NO_PADDING:I = 0x1.field public static final NO_WRAP:I = 0x2.field private static final SKIP:I = -0x1.field public static final URL_SAFE:I = 0x8.field static final key:Ljava/lang/String; = "Encrypt"# instance fields .field private m_alphabet:[I.field public m_op:I.field public m_output:[B.field private m_state:I.field private m_value:I# direct methods .method static constructor <clinit>()V.locals 8.prologueconst/4 v7, 0x4const/4 v6, 0x3const/4 v5, 0x2const/4 v4, 0x1const/4 v3, -0x1.line 188const/16 v0, 0x100new-array v0, v0, [Iconst/4 v1, 0x0.line 189aput v3, v0, v1aput v3, v0, v4aput v3, v0, v5aput v3, v0, v6aput v3, v0, v7const/4 v1, 0x5aput v3, v0, v1const/4 v1, 0x6aput v3, v0, v1const/4 v1, 0x7aput v3, v0, v1const/16 v1, 0x8aput v3, v0, v1const/16 v1, 0x9aput v3, v0, v1const/16 v1, 0xaaput v3, v0, v1const/16 v1, 0xbaput v3, v0, v1const/16 v1, 0xcaput v3, v0, v1const/16 v1, 0xdaput v3, v0, v1const/16 v1, 0xeaput v3, v0, v1const/16 v1, 0xfaput v3, v0, v1const/16 v1, 0x10.line 190aput v3, v0, v1const/16 v1, 0x11aput v3, v0, v1const/16 v1, 0x12aput v3, v0, v1const/16 v1, 0x13aput v3, v0, v1const/16 v1, 0x14aput v3, v0, v1const/16 v1, 0x15aput v3, v0, v1const/16 v1, 0x16aput v3, v0, v1const/16 v1, 0x17aput v3, v0, v1const/16 v1, 0x18aput v3, v0, v1const/16 v1, 0x19aput v3, v0, v1

那就自己慢慢摸索，結(jié)果當(dāng)防完部分UI時(shí)候發(fā)現(xiàn)其實(shí)還是走了很多彎路的，比如說(shuō)網(wǎng)易云的側(cè)邊欄我一開(kāi)始以為是單純的DrawerLayout：

等到自己實(shí)現(xiàn)的時(shí)候發(fā)現(xiàn)如果單純的是DrawerLayout的話(huà)雖然布局可以一模一樣但是當(dāng)Item很多的時(shí)候，多出來(lái)的Item會(huì)被手機(jī)的Navigation Bar遮擋住，也沒(méi)辦法滑上來(lái)，然而用過(guò)網(wǎng)易云音樂(lè)的都知道網(wǎng)易云的側(cè)邊欄是可以上下滑動(dòng)的，于是我又在DrawerLayout的基礎(chǔ)上加入了NavigationView，然而此時(shí)雖然側(cè)邊欄可以上下滑動(dòng)了，但是用過(guò)NavigationView都知道它的可定制性是很低的，結(jié)果我做出來(lái)的情況是這樣的：

雖然屏幕上看的很正常，但是實(shí)際效果這些圖標(biāo)和文字都偏小，完全不符合網(wǎng)易云音樂(lè)的UI，直到我差不多做了一個(gè)星期的時(shí)候，我在GitHub上發(fā)現(xiàn)了這個(gè)：
MaterialNavigationDrawer

讓我默默地哭一會(huì)，可是就算知道了，以我這么懶得性格還是沒(méi)想著去改，估計(jì)這就是三分熱度，再上幾張實(shí)現(xiàn)的效果圖：

這是主要實(shí)現(xiàn)的部分：

這是彈出的PopupWindow：

基本上的內(nèi)容大概有：

• 自定義廣告輪播圖
• DrawerLayout+NavigationView的實(shí)現(xiàn)
• 沉浸式狀態(tài)欄的實(shí)現(xiàn)
• 網(wǎng)易云音樂(lè)原生加載動(dòng)畫(huà)(我都不好意思說(shuō)這就是一個(gè)幀動(dòng)畫(huà))
  
• TabLayout+ViewPager實(shí)現(xiàn)主界面切換
• 通過(guò)Layout布局來(lái)加載啟動(dòng)頁(yè)防止出現(xiàn)啟動(dòng)白屏/黑屏
• 一些ListView資源填充—APP啟動(dòng)頁(yè)的正確配置方式

大致就這些，當(dāng)初剛開(kāi)始做的時(shí)候想找參考找遍所有地方都沒(méi)有人去做這個(gè)，但是自己又喜歡網(wǎng)易云音樂(lè)Android版，想實(shí)現(xiàn)具體的邏輯功能又沒(méi)那個(gè)本事，也就只能實(shí)現(xiàn)以下UI自我安慰，下面上一份網(wǎng)易云音樂(lè)用到的開(kāi)源庫(kù)，我也不知道是哪個(gè)版本的，估計(jì)變動(dòng)不是很大，有興趣的可以研究下：


material-dialogs
MD 對(duì)話(huà)框


fastjson
JSON解析


fresco
圖片加載


CircleProgress
圓形進(jìn)度條


drag-sort-listview
拖拽重新排序


BottomSheet
底部菜單操作 bottom sheets


android-flowlayout
流式布局


Android-ObservableScrollView
滾動(dòng)視圖觀測(cè)滾動(dòng)事件



android-stackblur / NativeStackBlur

高斯模糊使用NativeBlurProcess


PagerSlidingTabStrip
ViewPager滑動(dòng)頁(yè)面導(dǎo)航效果


HoloColorPicker
顏色選擇器


ZoomableDraweeView-sample
Fresco’s ZoomableDraweeView


shimmer-android
View閃光效果


SwipeBackLayout
滑動(dòng)返回效果


android-FlipView
翻轉(zhuǎn)動(dòng)畫(huà)效果


fab-transformation
浮動(dòng)操作按鈕切換


android-wheel
Wheel Picker


pinyin4j
漢字轉(zhuǎn)拼音


DanmakuFlameMaster
開(kāi)源彈幕引擎


cybergarage-upnp
DLNA


PhotoView
圖片縮放

以上開(kāi)源庫(kù)出處

最后

本來(lái)是想錄制一個(gè)Gif動(dòng)畫(huà)顯示具體效果的但是Genymotion模擬器剛好抽風(fēng)，不顯示沉浸式狀態(tài)欄，然后分辨率相當(dāng)?shù)?#xff0c;想找其他方法實(shí)現(xiàn)也沒(méi)找到，沒(méi)辦法就用截圖代替了，有感興趣的可以下載項(xiàng)目看看，是Android studio項(xiàng)目.

GitHub下載地址

翻不了墻的用這個(gè)：
CSDN下載地址

總結(jié)

以上是生活随笔為你收集整理的仿网易云音乐部分UI实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。