Android仿网易云音乐播放界面

2019独角兽企业重金招聘Python工程师标准>>>

概述

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

• 主界面布局设计
• 唱盘布局设计
• 动态布局
• 唱盘控件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>

 

这里面涉及到一个DiscView类，这个是一个复合类，我们来看一些主要的功能。

阅读全文请点击：http://click.aliyun.com/m/9310/

转载于:https://my.oschina.net/u/3161071/blog/823923