The realization of part UI of imitation NetEase cloud music

Introduction

There is a period of time idle nothing to do, whim, so went to prevent some NetEase cloud UI interface, the first is to imitate this look:

So the anti-compilation of NetEase cloud source files, sure enough confusion is very thorough, said can not read, Connaught:

Most of the code inside is Smali syntax, which is:

. class Publicla/auu/a;.SuperLjava/lang/object;. Source"A.java"#StaticFields.field Public Static FinalCRLF:I =0x4. fieldPrivate Static FinalDecode:[i.fieldPrivate Static FinalDecode_websafe:[i.field Public Static FinalDEFAULT:I =0x0. fieldPrivate Static FinalEQUALS:I =-0x2. field Public Static FinalNO_CLOSE:I =0x10. field Public Static FinalNO_PADDING:I =0x1. field Public Static FinalNO_WRAP:I =0x2. fieldPrivate Static FinalSKIP:I =-0x1. field Public Static FinalURL_SAFE:I =0x8. fieldStatic Finalkey:ljava/lang/string; ="Encrypt"# instance Fields.fieldPrivateM_alphabet:[i.field PublicM_op:i.field PublicM_output:[b.fieldPrivateM_state:i.fieldPrivatem_value:i# Direct Methods.methodStaticConstructor <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 189 aput v3, V0, v1 aput v3, V0, v4 aput v3, V0, V5 aput v3, V0, V6 Aput v3, V0, V7Const/4 V1, 0x5 aput v3, V0, v1Const/4 V1, 0x6 aput v3, V0, v1Const/4 V1, 0x7 aput v3, V0, v1Const/16 v1, 0x8 aput v3, V0, v1Const/16 v1, 0x9 aput v3, V0, v1Const/16 v1, 0xa aput v3, V0, v1Const/16 v1, 0xb aput v3, V0, v1Const/16 v1, 0xc aput v3, V0, v1Const/16 v1, 0xd aput v3, V0, v1Const/16 v1, 0xe aput v3, V0, v1Const/16 v1, 0xf aput v3, V0, v1Const/16 v1, 0x10 line Aput v3, V0, v1Const/16 v1, 0x11 aput v3, V0, v1Const/16 v1, 0x12 aput v3, V0, v1Const/16 v1, 0x13 aput v3, V0, v1Const/16 v1, 0x14 aput v3, V0, v1Const/16 v1, 0x15 aput v3, V0, v1Const/16 v1, 0x16 aput v3, V0, v1Const/16 v1, 0x17 aput v3, V0, v1Const/16 v1, 0x18 aput v3, V0, v1Const/16 v1, 0x19 aput v3, V0, v1

Then I slowly groping, the result when the end of the UI is found in fact still took a lot of detours, such as the side of NetEase cloud I thought it was a simple drawerlayout:

When the realization of their own time to find that if the simple is drawerlayout, although the layout can be exactly the same but when the item is a lot of time, the more the item will be mobile phone navigation bar blocked, there is no way to slip up, However, NetEase cloud music has been used to know that the side of NetEase cloud can be sliding up and down, so I added navigationview on the basis of drawerlayout, however, while the side bar can slide up and down, But using Navigationview to know that it's customizable is very low, and the result I made is this:

Although the screen looks very normal, but the actual effect of these icons and text are small, completely incompatible with NetEase cloud music UI, until I almost did one weeks, I found this on GitHub:
Materialnavigationdrawer

Let me cry in silence for a while, but even know, with my so lazy character or not to change, estimated that this is the three points of heat, and then on a few to achieve:

This is the main implementation of the section:

This is the pop-up Popupwindow:

The basic content is probably:

• Custom AD Carousel Diagram
• The realization of Drawerlayout+navigationview
• Immersive status bar implementation
• NetEase cloud Music native loading animation (I'm embarrassed to say that this is a frame animation)
  
• Tablayout+viewpager implementation of the main interface switch
• Load startup page with layout layouts to prevent startup white screen/black screen
• Some ListView resources populate the correct configuration of the-app startup page

Roughly on these, at the beginning of the first time to look for reference to find out all places have no one to do this, but they like NetEase Cloud music Android version, want to achieve the specific logic function and not that ability, also can only achieve the following UI self-comfort, the following a copy of NetEase cloud music used by the Open Source Library, I also do not know which version is, the estimated change is not very large, interested can be studied under:


Material-dialogs
MD dialog box


Fastjson
JSON parsing


Fresco
Picture loading


Circleprogress
Round progress bar


Drag-sort-listview
Reorder by dragging and dragging


Bottomsheet
Bottom menu Operation Bottom sheets


Android-flowlayout
Flow layout


Android-observablescrollview
Scrolling View observing scrolling events



Android-stackblur/nativestackblur

Gaussian Blur using nativeblurprocess


Pagerslidingtabstrip
Viewpager Slide page Navigation effect


Holocolorpicker
Color Picker


Zoomabledraweeview-sample
Fresco ' s Zoomabledraweeview


Shimmer-android
View Flash Effect


Swipebacklayout
Slide back Effect


Android-flipview
Flip Animation effect


Fab-transformation
Floating action Button Toggle


Android-wheel
Wheel Picker


Pinyin4j
Kanji to Pinyin


Danmakuflamemaster
Open Source Bullet screen engine


Cybergarage-upnp
DLNA


PhotoView
Picture Zoom

The above Source library sources

At last

Originally wanted to record a GIF animated display specific effect but genymotion simulator just convulsions, do not show the immersive status bar, and then the resolution is quite low, want to find other ways to implement also did not find, no way to replace, there is interested can download items to see, is Android Studio project.

GitHub

You can't turn the wall on this:
CSDN

The realization of part UI of imitation NetEase cloud music