仿网易云音乐部分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.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实现相关推荐

仿网易云音乐html代码,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
简要教程 APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插 ...
html5自动播放音乐外链,仿网易云音乐外链播放器UI的HTML5音乐播放器插件
APlayer是一款仿网易云音乐外链播放器UI的HTML5音乐播放器插件.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是一款非常好的HTML5音乐播放器插件. 安装 ...
高仿网易云音乐UI的微信小程序源码
简介: 仿网易云音乐的微信小程序源码,名为YY音乐小程序,首页有每日推荐歌曲.歌单和热歌排行榜,功能不是特别多但是该有的都有. UI特别精致,简直就是克隆的网易云音乐. 源码下载:百度网盘自取图片:
高仿网易云音乐一（可扫描本地音乐播放）
最近闲下来做了个仿网易云音乐的音乐播放器效果图: 项目下载地址 https://github.com/PangHaHa12138/MusicPlayerdemo 闪屏扫描本地音乐播放仿探探仿 ...
仿网易云音乐源码html5
HTML5仿网易云音乐播放器特效源码是一款仿网易云音乐外链播放器UI的HTML5 APlayer音乐播放器插件的代码.APlayer音乐播放器可以自定义歌曲封面,可以自定义同步歌词等,界面时尚大方,是 ...
开源项目【LikeCloudMusic 云音】仿网易云音乐
LikeCloudMusic 云音仿网易云音乐v3.7.5,Material Design风格,基于MVP,使用RxBus作为事件总线通信库效果图目前功能扫描本地歌曲存储歌曲及歌单后台播放 ...
史上最牛逼的音乐播放器—仿网易云音乐（已开源）
前言:音乐播放器倒见过不少,做到几乎和官方网易云音乐安卓版差不多的,还是头第一回见.aa112901 的这款仿网易云音乐安卓版客户端,很多地方值得我们学习.无论是下载模块,还是换肤模块,还是炫丽的UI ...
【开源项目学习】源码剖析，学习仿网易云音乐app代码
[前言] 这篇文字不全是讲app代码,而是博主怎么根据代码系统学习梳理的过程,非专业,如有不对,欢迎指出仿网易云音乐app源码地址:https://github.com/aa112901/remus ...
Flutter+FishRedux高仿网易云音乐
flutter_netease_cloud_music 采用FishRedux框架与开源网易云音乐api开发的高仿网易云音乐APP,技术栈主要是:Flutter+FishRedux,目前主要是偏重AP ...

仿网易云音乐部分UI实现

仿网易云音乐部分UI实现相关推荐

最新文章

热门文章