引言
有一段时间闲着没事做,突发奇想,于是就去防了部分网易云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上发现了这个:
让我默默地哭一会,可是就算知道了,以我这么懒得性格还是没想着去改,估计这就是三分热度,再上几张实现的效果图:
这是主要实现的部分:
这是弹出的PopupWindow:
基本上的内容大概有:
- 自定义广告轮播图
- DrawerLayout+NavigationView的实现
- 沉浸式状态栏的实现
- 网易云音乐原生加载动画(我都不好意思说这就是一个帧动画)
- TabLayout+ViewPager实现主界面切换
- 通过Layout布局来加载启动页防止出现启动白屏/黑屏
- 一些ListView资源填充—APP启动页的正确配置方式
大致就这些,当初刚开始做的时候想找参考找遍所有地方都没有人去做这个,但是自己又喜欢网易云音乐Android版,想实现具体的逻辑功能又没那个本事,也就只能实现以下UI自我安慰,下面上一份网易云音乐用到的开源库,我也不知道是哪个版本的,估计变动不是很大,有兴趣的可以研究下:
MD 对话框
JSON解析
图片加载
圆形进度条
拖拽重新排序
底部菜单操作 bottom sheets
流式布局
滚动视图观测滚动事件
android-stackblur / NativeStackBlur
高斯模糊使用NativeBlurProcess
ViewPager滑动页面导航效果
颜色选择器
Fresco’s ZoomableDraweeView
View闪光效果
滑动返回效果
翻转动画效果
浮动操作按钮切换
Wheel Picker
汉字转拼音
开源弹幕引擎
DLNA
图片缩放
最后
本来是想录制一个Gif动画显示具体效果的但是Genymotion模拟器刚好抽风,不显示沉浸式状态栏,然后分辨率相当低,想找其他方法实现也没找到,没办法就用截图代替了,有感兴趣的可以下载项目看看,是Android studio项目.
翻不了墙的用这个: