仿网易云音乐部分UI实现

引言

有一段时间闲着没事做，突发奇想，于是就去防了部分网易云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

    .prologue
    const/4 v7, 0x4

    const/4 v6, 0x3

    const/4 v5, 0x2

    const/4 v4, 0x1

    const/4 v3, -0x1

    .line 188
    const/16 v0, 0x100

    new-array v0, v0, [I

    const/4 v1, 0x0

    .line 189
    aput v3, v0, v1

    aput v3, v0, v4

    aput v3, v0, v5

    aput v3, v0, v6

    aput v3, v0, v7

    const/4 v1, 0x5

    aput v3, v0, v1

    const/4 v1, 0x6

    aput v3, v0, v1

    const/4 v1, 0x7

    aput v3, v0, v1

    const/16 v1, 0x8

    aput v3, v0, v1

    const/16 v1, 0x9

    aput v3, v0, v1

    const/16 v1, 0xa

    aput v3, v0, v1

    const/16 v1, 0xb

    aput v3, v0, v1

    const/16 v1, 0xc

    aput v3, v0, v1

    const/16 v1, 0xd

    aput v3, v0, v1

    const/16 v1, 0xe

    aput v3, v0, v1

    const/16 v1, 0xf

    aput v3, v0, v1

    const/16 v1, 0x10

    .line 190
    aput v3, v0, v1

    const/16 v1, 0x11

    aput v3, v0, v1

    const/16 v1, 0x12

    aput v3, v0, v1

    const/16 v1, 0x13

    aput v3, v0, v1

    const/16 v1, 0x14

    aput v3, v0, v1

    const/16 v1, 0x15

    aput v3, v0, v1

    const/16 v1, 0x16

    aput v3, v0, v1

    const/16 v1, 0x17

    aput v3, v0, v1

    const/16 v1, 0x18

    aput v3, v0, v1

    const/16 v1, 0x19

    aput 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下载地址