今天掐指一算，学习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 实现简单音乐播放器（二）中，我将介绍音乐播放器的功能实现。