引言

有一段時間閑著沒事做，突發奇想，于是就去防了部分網易云UI的界面，最開始是想仿成這個樣子：

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

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

.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

那就自己慢慢摸索，結果當防完部分UI時候發現其實還是走了很多彎路的，比如說網易云的側邊欄我一開始以為是單純的DrawerLayout：

等到自己實現的時候發現如果單純的是DrawerLayout的話雖然布局可以一模一樣但是當Item很多的時候，多出來的Item會被手機的Navigation Bar遮擋住，也沒辦法滑上來，然而用過網易云音樂的都知道網易云的側邊欄是可以上下滑動的，于是我又在DrawerLayout的基礎上加入了NavigationView，然而此時雖然側邊欄可以上下滑動了，但是用過NavigationView都知道它的可定制性是很低的，結果我做出來的情況是這樣的：

雖然屏幕上看的很正常，但是實際效果這些圖標和文字都偏小，完全不符合網易云音樂的UI，直到我差不多做了一個星期的時候，我在GitHub上發現了這個：
MaterialNavigationDrawer

讓我默默地哭一會，可是就算知道了，以我這么懶得性格還是沒想著去改，估計這就是三分熱度，再上幾張實現的效果圖：

這是主要實現的部分：

這是彈出的PopupWindow：

基本上的內容大概有：

• 自定義廣告輪播圖
• DrawerLayout+NavigationView的實現
• 沉浸式狀態欄的實現
• 網易云音樂原生加載動畫(我都不好意思說這就是一個幀動畫)
  
• TabLayout+ViewPager實現主界面切換
• 通過Layout布局來加載啟動頁防止出現啟動白屏/黑屏
• 一些ListView資源填充—APP啟動頁的正確配置方式

大致就這些，當初剛開始做的時候想找參考找遍所有地方都沒有人去做這個，但是自己又喜歡網易云音樂Android版，想實現具體的邏輯功能又沒那個本事，也就只能實現以下UI自我安慰，下面上一份網易云音樂用到的開源庫，我也不知道是哪個版本的，估計變動不是很大，有興趣的可以研究下：


material-dialogs
MD 對話框


fastjson
JSON解析


fresco
圖片加載


CircleProgress
圓形進度條


drag-sort-listview
拖拽重新排序


BottomSheet
底部菜單操作 bottom sheets


android-flowlayout
流式布局


Android-ObservableScrollView
滾動視圖觀測滾動事件



android-stackblur / NativeStackBlur

高斯模糊使用NativeBlurProcess


PagerSlidingTabStrip
ViewPager滑動頁面導航效果


HoloColorPicker
顏色選擇器


ZoomableDraweeView-sample
Fresco’s ZoomableDraweeView


shimmer-android
View閃光效果


SwipeBackLayout
滑動返回效果


android-FlipView
翻轉動畫效果


fab-transformation
浮動操作按鈕切換


android-wheel
Wheel Picker


pinyin4j
漢字轉拼音


DanmakuFlameMaster
開源彈幕引擎


cybergarage-upnp
DLNA


PhotoView
圖片縮放

以上開源庫出處

最后

本來是想錄制一個Gif動畫顯示具體效果的但是Genymotion模擬器剛好抽風，不顯示沉浸式狀態欄，然后分辨率相當低，想找其他方法實現也沒找到，沒辦法就用截圖代替了，有感興趣的可以下載項目看看，是Android studio項目.

GitHub下載地址

翻不了墻的用這個：
CSDN下載地址

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。