Android 实现简单音乐播放器（一）

今天掐指一算，学习Android长达近两个月了，今天开始，对过去一段时间的学习收获以及遇到的疑难杂症做一些总结。

简单音乐播放器是我自己完成的第一个功能较为完整的APP，可以说是我的Android学习之路上的一个小小里程碑，给我增加了很多信心（~~真容易获得满足~~）。从下面开始，我将详细介绍MusicPlayer的设计过程。

首先，先看一下这个项目的工程目录和运行效果：

    

从上面的图片看到，整个工程的布局文件有两个：activity_main.xml和musiclist.xml，其中，musiclist.xml中放置了两个TextView，分别对应歌曲名称和演唱者，结合activity_main.xml中的ListView，完成一张音乐文件列表。播放页面的其他组件的布局则由activity_main.xml完成。具体如下：

activity_main.xml：

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
     android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">
     <LinearLayout
         android:orientation="vertical"
         android:layout_width="fill_parent"
         android:layout_height="fill_parent"
         android:layout_alignParentBottom="true"
         android:layout_alignParentStart="true">
         <LinearLayout
             android:orientation="vertical"
             android:layout_width="fill_parent"
             android:layout_height="match_parent"
             android:layout_alignParentTop="true"
             android:layout_alignParentStart="true"
             android:layout_weight="2">

             <TextView
                 android:layout_width="wrap_content"
                 android:layout_height="wrap_content"
                 android:text="本地音乐文件"
                 android:id="@+id/textView"
                 android:textSize="25dp" />

             <ListView
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:id="@android:id/list"
                 android:scrollbars="vertical"
                 android:divider="@android:color/holo_blue_light"
                 android:dividerHeight="2dp"
                 android:drawSelectorOnTop="false"
                 android:choiceMode="singleChoice"/>
         </LinearLayout>

         <LinearLayout
             android:orientation="vertical"
             android:layout_width="fill_parent"
             android:layout_height="match_parent"
             android:layout_weight="3">

             <tina.musicplayer.AlwaysMarqueeTextView
                 android:layout_width="100dp"
                 android:layout_height="wrap_content"
                 android:id="@+id/nameDisplay"
                 android:layout_gravity="center_horizontal"
                 android:textSize="28dp"
                 android:ellipsize="marquee"
                 android:marqueeRepeatLimit="marquee_forever"
                 android:focusable="true"
                 android:singleLine="true"
                 android:layout_margin="5dp"/>

             <RelativeLayout
                 android:orientation="horizontal"
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal">
                 <TextView
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="00:00"
                     android:id="@+id/currTime"
                     android:layout_alignParentStart="true"/>

                 <TextView
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:text="00:00"
                     android:id="@+id/totalTime"
                     android:layout_alignParentEnd="true"/>
             </RelativeLayout>

             <SeekBar
                 android:layout_width="fill_parent"
                 android:layout_height="wrap_content"
                 android:id="@+id/seekBar"
                 android:layout_gravity="center_horizontal"
                 android:layout_margin="10dp"/>

             <RelativeLayout
                 android:layout_width="match_parent"
                 android:layout_height="wrap_content"
                 android:layout_gravity="center_horizontal"
                 android:layout_margin="20dp">

                 <ImageButton
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:id="@+id/previous"
                     android:layout_gravity="center_horizontal"
                     android:layout_marginStart="40dp"
                     android:src="@drawable/player_previous"
                     android:onClick="onPreviousClick"
                     android:background="@android:color/transparent"
                     android:layout_alignParentTop="true"
                     android:layout_alignParentStart="true" />

                 <ImageButton
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:id="@+id/stop"
                     android:src="@drawable/player_stop"
                     android:layout_gravity="center_horizontal"
                     android:onClick="onStopClick"
                     android:background="@android:color/transparent"
                     android:layout_alignParentTop="true"
                     android:layout_centerHorizontal="true"
                     android:layout_toRightOf="@+id/previous"
                     android:layout_marginStart="30dp"/>

                 <ImageButton
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:id="@+id/play"
                     android:layout_gravity="center_horizontal"
                     android:src="@drawable/player_play"
                     android:onClick="onPlayClick"
                     android:background="@android:color/transparent"
                     android:layout_alignParentTop="true"
                     android:layout_toRightOf="@+id/stop"
                     android:layout_marginStart="30dp"/>

                 <ImageButton
                     android:layout_width="wrap_content"
                     android:layout_height="wrap_content"
                     android:layout_gravity="center_horizontal"
                     android:id="@+id/next"
                     android:src="@drawable/player_next"
                     android:onClick="onNextClick"
                     android:background="@android:color/transparent"
                     android:layout_alignParentTop="true"
                     android:layout_toRightOf="@+id/play"
                     android:layout_marginStart="30dp" />
             </RelativeLayout>
         </LinearLayout>
     </LinearLayout>
 </RelativeLayout>

musiclist.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent" android:layout_height="match_parent"
     android:orientation="horizontal"
     android:background="@drawable/selector">

     <TextView
         android:layout_width="200dp"
         android:layout_height="wrap_content"
         android:text="New Text"
         android:id="@+id/songName"
         android:textSize="25dp"
         android:textColor="@android:color/holo_purple"
         android:layout_weight="2"/>

     <TextView
         android:layout_width="200dp"
         android:layout_height="wrap_content"
         android:text="New Text"
         android:id="@+id/artistName"
         android:textSize="25dp"
         android:gravity="right"
         android:textColor="@android:color/holo_purple"
         />
 </LinearLayout>

预览效果：

     

在播放页面实现的过程中，主要有以下几个重要的点：

1、自动水平滚动的TextView

为了增加音乐播放器的趣味性，我放置了一个可以水平滚动的TextView，用来显示当前选中的歌曲名称，这也就是常常说的走马灯的文字效果。那么如何实现呢？

首先，新建一个TextView的子类(AlwaysMarqueeTextView)，重写isFocusd()方法，使得该类对象始终获得焦点。

 package tina.musicplayer;

 import android.content.Context;
 import android.util.AttributeSet;
 import android.widget.TextView;

 /**
  * Created by CW3479 on 2015/4/2.
  */
 public class AlwaysMarqueeTextView extends TextView {
     public AlwaysMarqueeTextView(Context context) {
         super(context);
     }

     public AlwaysMarqueeTextView(Context context, AttributeSet attrs) {
         super(context, attrs);
     }

     public AlwaysMarqueeTextView(Context context, AttributeSet attrs, int defStyleAttr) {
         super(context, attrs, defStyleAttr);
     }

     @Override
     public boolean isFocused() {
         return true;
     }
 }

然后，在布局文件中，放置AlwaysMarqueeTextView，设置属性：

  android:ellipsize="marquee"     

  android:marqueeRepeatLimit="marquee_forever"

  android:focusable="true"

  android:singleLine="true"

以上，可以实现程序运行时，选中歌曲，歌曲名就能自动从右往左重复滚动。需要注意的是，只有当AlwaysMarqueeTextView中的文字超过其能够显示的长度时，文字才能开始滚动。所以android:layout_width="100dp"属性需要设置为合适的值。

关于跑马灯效果，还可以参考一下网络上的这篇文章。http://www.cnblogs.com/Gaojiecai/archive/2013/06/18/3142783.html

2、音乐文件列表

为了完成音乐文件列表的呈现，我用到了ListActivity，在布局文件activity_main.xml中，放置的ListView，设置属性：

    android:id="@android:id/list"    这里的id一定要设置成"@android:id/list"，才能使其绑定到ListActivity

    android:scrollbars="vertical"     使list长度超过ListView的显示高度时，ListView能够垂直滚动

    android:divider="@android:color/holo_blue_light"  list中每一行之间的分割线

　  android:dividerHeight="2dp"

    android:choiceMode="singleChoice" 设置选择模式为单选

    android:drawSelectorOnTop="false" 使选中某一项时，选中背景不覆盖当前文字使用

现在，我们已经有了ListView和musiclist.xml中的两个TextView，具体如何使用到程序中呢？

（1）定义全局变量

     private ListView musicListView;
     private SimpleAdapter listAdapter;
     private List<HashMap<String,String>> list=new ArrayList<HashMap<String,String>>();

（2）MainActivity继承ListActivity，设置ListAdapter。

 musicListView=(ListView)findViewById(android.R.id.list);
 listAdapter=new SimpleAdapter(MainActivity.this,list,R.layout.musiclist,new String[]{"name","artist"}, new int[]{R.id.songName,R.id.artistName});
 MainActivity.this.setListAdapter(listAdapter);

至此，完成一个音乐播放列表的基本框架。下面，再增加一点小功能。

在点击列表时，我希望能区别出选中的项，即：选中一首歌曲时，该项的背景变成另一种颜色。如何实现这种功能？

（1）在res/drawable文件夹中新建一个selector.xml文件，在里面定义TextView的不同状态下的背景。

（2）在musiclist.xml中，设置LinearLayout的属性android:background="@drawable/selector"

selector.xml：

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
     <!--被选中时的布局-->
     <item
         android:state_activated="true">
         <shape>
             <gradient
                 android:angle="270"
                 android:endColor="#99BD4C"
                 android:startColor="#C1C125"
                 />
             <corners
                 android:radius="8dp"
                 />
         </shape>
         </item>
     <!--默认的布局-->
     <item>
         <shape>
             <gradient
                 android:angle="270"
                 android:endColor="#A8C3B0"
                 android:startColor="#C0CFCE"
                 />
             <corners
                 android:radius="8dp"
                 />
         </shape>
     </item>

 </selector>

需要注意的是，区分列表项是否选中的属性是："android:state_activated",当这个属性的值为true时，表明选项被选中。

　　以上，基本完成了音乐播放器的页面设计。在下一篇文章Android 实现简单音乐播放器（二）中，我将介绍音乐播放器的功能实现。