Android仿网易云音乐播放界面

概述

网易云音乐是一款非常优秀的音乐播放器，尤其是播放界面，使用唱盘机风格，显得格外古典优雅。
首先来看一下网易的播放效果。 
 
要实现上面的功能，我们需要对界面进行一个拆分，拆分后大概包含如下结构：

• 主界面布局设计
• 唱盘布局设计
• 动态布局
• 唱盘控件DiscView对外接口及方法
• 音乐状态控制时序图

分析及实现

主界面布局设计

主界面布局从上到下可以划分几大区域，如图： 
 
如图，由上到下主要分为：标题栏区、唱盘区域、时长显示区域、播放控制区域。 
标题栏 
使用ToolBar实现，字体可能需要自定义。 
唱盘区域 
唱盘区域包括唱盘、唱针、底盘、以及实现切换的ViewPager等控件，该布局比较复杂，本案例使用自定义控件实现唱盘区域。 
时长显示区域 
使用RelativeLayout作为根布局，进度条使用SeekBar实现。 
播放控制区域 
比较简单，使用LinearLayout作为根布局。

唱盘布局实现（难点）

唱盘区域由控件DiscView实现，以RelativeLayout为根布局，子控件包括：底盘、唱针、ViewPager等。其中，底盘和唱针均用ImageView实现，然后使用ViewPager加载ImageView实现唱片的切换。如图： 
 
唱片布局如下：

<?ml version="1.0" encoding="utf-8"?> <com.achillesl.neteasedisc.widget.DiscView
    mlns:android="" android:layout_width="match_parent" android:layout_height="wrap_content"> <!--底盘--> <ImageView
        android:id="@+id/ivDiscBlackgound" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <!--ViewPager实现唱片切换--> <android.support.v4.view.ViewPager
        android:id="@+id/vpDiscContain" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" /> <!--唱针--> <ImageView
        android:id="@+id/ivNeedle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_needle"/> </com.achillesl.neteasedisc.widget.DiscView>

这里面涉及到一个DiscView类，这个是一个复合类，我们来看一些主要的功能。 
阅读全文请点击：