仿网易云音乐部分UI实现
引言
有一段時(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)題。
- 上一篇: 现场直击CGCA2022中国消费品行业C
- 下一篇: 常用数据结构和算法总结