仿网易云音乐部分UI实现

作者: 李牧羊 | 来源:发表于2016-04-25 17:20 被阅读1022次

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

    那就自己慢慢摸索,结果当防完部分UI时候发现其实还是走了很多弯路的,比如说网易云的侧边栏我一开始以为是单纯的DrawerLayout:

    侧边栏状态下的截图

    等到自己实现的时候发现如果单纯的是DrawerLayout的话虽然布局可以一模一样但是当Item很多的时候,多出来的Item会被手机的Navigation Bar遮挡住,也没办法滑上来,然而用过网易云音乐的都知道网易云的侧边栏是可以上下滑动的,于是我又在DrawerLayout的基础上加入了NavigationView,然而此时虽然侧边栏可以上下滑动了,但是用过NavigationView都知道它的可定制性是很低的,结果我做出来的情况是这样的:

    实际实现效果.png
    虽然屏幕上看的很正常,但是实际效果这些图标和文字都偏小,完全不符合网易云音乐的UI,直到我差不多做了一个星期的时候,我在GitHub上发现了这个:
    MaterialNavigationDrawer MaterialNavigationDrawer
    让我默默地哭一会,可是就算知道了,以我这么懒得性格还是没想着去改,估计这就是三分热度,再上几张实现的效果图:
    这是主要实现的部分: Paste_Image.png
    这是弹出的PopupWindow: Paste_Image.png

    基本上的内容大概有:

    • 自定义广告轮播图
    • DrawerLayout+NavigationView的实现
    • 沉浸式状态栏的实现
    • 网易云音乐原生加载动画(我都不好意思说这就是一个帧动画)
    Paste_Image.png
    • TabLayout+ViewPager实现主界面切换
    • 通过Layout布局来加载启动页防止出现启动白屏/黑屏
    • 一些ListView资源填充—APP启动页的正确配置方式

    大致就这些,当初刚开始做的时候想找参考找遍所有地方都没有人去做这个,但是自己又喜欢网易云音乐Android版,想实现具体的逻辑功能又没那个本事,也就只能实现以下UI自我安慰,下面上一份网易云音乐用到的开源库,我也不知道是哪个版本的,估计变动不是很大,有兴趣的可以研究下:
    网易云音乐Android版使用的开源组件
    另外,做这个UI的前提是受到了作者D_clock关于DrawerLayout的分析的影响,在此感谢。

    项目地址

    GitHub地址

    相关文章

      网友评论

      • 辛锐:不容易,竟然是sense
        李牧羊:这都能看出来
      • cmazxiaoma:我看到了五月天的歌 嘻嘻:relaxed:
      • Gentle_Yin:您的反编译工具能不能分享一下 :smiley:
        李牧羊:@这个名字刚被占 叫做AndroidKiller,挺有名的,可视化界面操作
      • hubsul_nvtag:楼主 网易音乐 那个是 底部播放栏常驻的 有些时候是消失的,您这个貌似达不到那样的效果
        李牧羊:@nvtag 我记得之前看到过有人提到说官方的是使用Activity实现的,具体的细节我就不清楚了
        hubsul_nvtag:@李牧羊 好吧 我还是用fragment实现了效果,自学小白一枚😮
        李牧羊:@nvtag 俄,我就是单纯地加了一个Activity,就没考虑太多,只是大致仿了一下UI界面

      本文标题:仿网易云音乐部分UI实现

      本文链接:https://www.haomeiwen.com/subject/uzqqrttx.html