仿网易云音乐部分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下载地址

时间: 2024-09-30 06:21:41

仿网易云音乐部分UI实现的相关文章

《云阅》一个仿网易云音乐UI,使用Gank.Io及豆瓣Api开发的开源项目

CloudReader 一款基于网易云音乐UI,使用GankIo及豆瓣api开发的符合Google Material Desgin阅读类的开源项目.项目采取的是Retrofit + RxJava + MVVM-DataBinding架构开发.开发中所遇到的各种问题已归纳在这里. github地址:CloudReader What can be learned about this project 那么,从本项目中你能学到哪些知识呢? 1.干货集中营内容与豆瓣电影书籍内容. 2.高仿网易云音乐歌单

Android实战之酷云--&gt;仿网易云音乐开发

我的个人网站 Xuejianxin's Blog Google Blog Xuejianxin's Blog Android自定义View学习 Android自定义View之常用工具源码分析 Android自定义View之onMeasure()源码分析 Android自定义View之onLayout()源码分析 Android自定义View之对TouchEvent的处理 Android自定义View之draw原理分析 如果觉得我的文章还行的话,也可以关注我的公众号,里面也会第一时间更新,并且会有

仿网易云音乐 专辑图片折叠轮播

仿网易云音乐 专辑图片折叠轮播 先不多说现上一张效果图 首先简述一下实现原理 1.首先让我们的imageview**动起来** 其实是不断的.invalidate();函数 让他不断的调用ondarw函数 (显然我们不必要不断的调用ondarw函数 只有在我们让他动的时候调用即可 所以我们要声明一个变量记录change记录是否产生动画) 2.实现我们的可折叠效果 Matrix的setPolyToPoly方法的使用 可参考(http://blog.csdn.net/lmj623565791/art

仿网易云音乐的播放进度条

仿网易云音乐的播放进度条,有三种状态:播放.暂停和拖动,只是实现了动画和主要的交互逻辑,其他细节(如暂停音乐的播放等)还需要自己完善: DKPlayerBar 是继承于UIControl的,如果想获取播放\暂停的事件建议用标准的addTarget方法: [playerBar addTarget:self action:@selector(playOrPause) forControlEvents:UIControlEventValueChanged]; 然后在DKPlayerBar里监听DKPl

高仿网易云音乐客户端的Home页面切换Tabhost-IT蓝豹

1.高仿网易云音乐客户端的Home页面切换Tabhost 高仿网易云音乐客户端的Home页面切换Tabhost,并且三角形是透明的,实现方式,自定义AnimTabsView继承 RelativeLayout 里面对当前选中的item 处理 三角形变成透明效果,即在onDraw 里面对三角形图片经行透明度处理,AnimTabsView提供 setOnAnimTabsItemViewChangeListener方法的onChange()用来监听点击切换tabhost. 下面主要是AnimTabsVi

C# WPF 低仿网易云音乐(PC)歌词控件

原文:C# WPF 低仿网易云音乐(PC)歌词控件 提醒:本篇博客记录了修改的过程,废话比较多,需要项目源码和看演示效果的直接拉到文章最底部~ 网易云音乐获取歌词的api地址 http://music.163.com/api/song/media?id=歌曲ID 填写歌曲的id即可获取到json格式的数据(歌曲ID获取的方法是:点击分享按钮>其他分享>复制链接,就可以在链接中看到了): {"songStatus":0,"lyricVersion":10,

android仿网易云音乐引导页、仿书旗小说Flutter版、ViewPager切换、爆炸菜单、风扇叶片效果等源码

Android精选源码 复现网易云音乐引导页效果 高仿书旗小说 Flutter版,支持iOS.Android Android Srt和Ass字幕解析器 Material Design ViewPager切换变色美观效果 卡证识别 相机样式 Android炫酷爆炸效果的菜单源码 Android简洁优雅可点击的toast控件,仿手机百度 Android实现水平列表,其中的项目像风扇叶片一样移动效果 让你的RecyclerView秀出传送带效果,支持横向和纵向两种选... 一种流式布局的效果,很像我们

用vuejs仿网易云音乐(实现听歌以及搜索功能)

前言 前端时间学了vue,一开始看了vue1.0,后来实在觉得技术总得实践,就直接上手vue2.0.然后花了将近一周时间做了一个网易云音乐的小项目.一开始觉得项目比较小,没必要用vuex所以就没有使用,但是后来发现数据流传输有点麻烦,后续会使用vuex. 技术栈 vue+vue-router(核心框架) better-scroll(使移动端滑动体验更加流畅) vue-lazyload(用户图片懒加载) nprogress(用于加载过渡) axios(请求) 功能分析与设计 首先我先参考了现有的一

C# WPF 低仿网易云音乐(PC)Banner动画控件

由于技术有限没能做到一模一样的动画,只是粗略地做了一下.动画有点生硬,还有就是没做出网易云音乐的立体感.代码非常简单粗暴而且我也写有注释,这里就不多啰嗦了,直接贴代码. 算了,啰嗦几句.原理是这样的,建立一个用户控件,在控件内添加3个border,对border进行缩放和移动动画. 低仿效果 网易云音乐原版 代码 后台 using System; using System.Collections.Generic; using System.Diagnostics; using System.Li