Android仿网易云音乐播放界面

概述

网易云音乐是一款非常优秀的音乐播放器，尤其是播放界面，使用唱盘机风格，显得格外古典优雅。这里抛砖引玉，原文地址：http://www.jianshu.com/p/cb54990219d9
首先来看一下网易的播放效果。

要实现上面的功能，我们需要对界面进行一个拆分，拆分后大概包含如下结构：

• 主界面布局设计
• 唱盘布局设计
• 动态布局
• 唱盘控件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="http://schemas.android.com/apk/res/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>
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 
 
 
 

  
  
  
 
 
 
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
  
11
  
12
  
13
  
14
  
15
  
16
  
17
  
18
  
19
  
20
  
21
  
22
  
23
  
24
  
25
  
26
  
27
  
28
  
29
  
30
 

这里面涉及到一个DiscView类，这个是一个复合类，我们来看一些主要的功能。
唱盘控件DiscView提供一个接口IPlayInfo，代码如下：

public interface IPlayInfo {
    /*用于更新标题栏变化*/
    void onMusicInfoChanged(String musicName, String musicAuthor);
    /*用于更新背景图片*/
    void onMusicPicChanged(int musicPicRes);
    /*用于更新音乐播放状态*/
    void onMusicChanged(MusicChangedStatus musicChangedStatus);
}
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 
 
 
 

  
  
  
 
 
 
 
 
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
 

这上面定义的三个函数作用：　分别用于更新标题栏（音乐名、作者名）、更新背景图片以及控制音乐播放状态（播放、暂停、上/下一首等）。
点击主界面播放/暂停、上/下一首按钮时，调用DiscView暴露