7.2 播放界面
根据我们的设计，播放界面位于音乐列表的下方。这里面将包含播放、暂停、上一首、下一首、播放进度展示、播放进度拖动等功能。
7.2.1 界面修改
为了实现各种控制功能，我们需要修改界面布局方式，将这个区域叫做播放控制区域。界面布局如下，
<LinearLayout 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:orientation="vertical"
>
<ListView
android:layout_weight="1"
android:id="@+id/music_list"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<!--增加一条分隔线-->
<View
android:layout_width="match_parent"
android:layout_height="5dp"
android:background="@color/colorContract" />
<!--界面控制区域 开始-->
<LinearLayout
android:id="@+id/control_panel"
android:layout_width="match_parent"
android:layout_height="130dp"
android:orientation="vertical"
android:background="@color/colorPrimary">
<TextView
android:id="@+id/music_title"
android:textColor="#FFFFFF"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:maxLines="1"
android:gravity="center"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:id="@+id/played_time"
android:text="00:00"
android:textColor="#FFF"
android:gravity="center"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<SeekBar
android:id="@+id/seek_music"
android:layout_weight="5"
android:layout_width="0dp"
android:layout_height="wrap_content" />
<TextView
android:id="@+id/duration_time"
android:text="--:--"
android:textColor="#FFF"
android:gravity="center"
android:layout_weight="1"
android:layout_width="0dp"
android:layout_height="wrap_content" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="5dp">
<Button
android:id="@+id/play_btn"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_centerInParent="true"
android:text=""
android:background="@mipmap/ic_play"
android:onClick="onClick"/>
<Button
android:id="@+id/pre_btn"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginRight="50dp"
android:layout_toLeftOf="@id/play_btn"
android:layout_centerVertical="true"
android:text=""
android:background="@mipmap/ic_pre"
android:onClick="onClick"/>
<Button
android:id="@+id/next_btn"
android:layout_width="55dp"
android:layout_height="55dp"
android:layout_marginLeft="50dp"
android:layout_toRightOf="@id/play_btn"
android:layout_centerVertical="true"
android:text=""
android:background="@mipmap/ic_next"
android:onClick="onClick"/>
</RelativeLayout>
</LinearLayout>
<!--界面控制区域 结束-->
</LinearLayout>7.2.2 控制区域组件
当MusicListActivity创建的时候，我们将获取播放器控制区域的组件，并添加对按钮进度条的响应，
public class MusicListActivity extends AppCompatActivity {
......
private Button mPlayBtn;
private Button mPreBtn;
private Button mNextBtn;
private TextView mMusicTitle;
private TextView mPlayedTime;
private TextView mDurationTime;
private SeekBar mMusicSeekBar;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_music_list);
......
//播放和暂停使用的按钮
mPlayBtn = (Button) findViewById(R.id.play_btn);
//前一首
mPreBtn = (Button) findViewById(R.id.pre_btn);
//下一首
mNextBtn = (Button) findViewById(R.id.next_btn);
//音乐名称
mMusicTitle = (TextView) findViewById(R.id.music_title);
//播放时长
mDurationTime = (TextView) findViewById(R.id.duration_time);
//当前播放时间
mPlayedTime = (TextView) findViewById(R.id.played_time);
//进度条
mMusicSeekBar = (SeekBar) findViewById(R.id.seek_music);
mMusicSeekBar.setOnSeekBarChangeListener(mOnSeekBarChangeListener);
......
}
public void onClick(View view) {
switch (view.getId()) {
//点击播放按钮
case R.id.play_btn:
{
if(mMusicService != null) {
if(!mMusicService.isPlaying()) {
//开始播放
mMusicService.play();
}
else {
//暂停播放
mMusicService.pause();
}
}
}
break;
//点击下一首按钮
case R.id.next_btn:
{
if(mMusicService != null) {
mMusicService.playNext();
}
}
break;
//点击前一首按钮
case R.id.pre_btn:
{
if(mMusicService != null) {
mMusicService.playPre();
}
}
break;
}
}
//进度条拖动的监听器
private SeekBar.OnSeekBarChangeListener mOnSeekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {
@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
}
@Override
public void onStartTrackingTouch(SeekBar seekBar) {
}
@Override
public void onStopTrackingTouch(SeekBar seekBar) {
//停止拖动时，根据进度条的位置来设定播放的位置
if(mMusicService != null) {
mMusicService.seekTo(seekBar.getProgress());
}
}
};
......
}7.2.3 禁用和启动控制区域
当音乐列表进入modal状态或者播放列表为空时，要让控制区域不可操作，
public class MusicListActivity extends AppCompatActivity {
......
private ListView.MultiChoiceModeListener mMultiChoiceListener = new AbsListView.MultiChoiceModeListener() {
@Override
public boolean onCreateActionMode(ActionMode mode, Menu menu) {
getMenuInflater().inflate(R.menu.music_choice_actionbar, menu);
//使控制区域不可操作
enableControlPanel(false);
return true;
}
@Override
public void onDestroyActionMode(ActionMode mode) {
//使控制区域可操作
enableControlPanel(true);
}
......
};
private ServiceConnection mServiceConnection = new ServiceConnection()
{
@Override
public void onServiceConnected(ComponentName name, IBinder service) {
mMusicService = (MusicService.MusicServiceIBinder) service;
//获取播放列表中可播的音乐
MusicItem item = mMusicService.getCurrentMusic();
if(item ＝= null) {
//没有可播的音乐，是控制区域不可操作
enableControlPanel(false);
}
}
@Override
public void onServiceDisconnected(ComponentName name) {
}
};
private void enableControlPanel(boolean enabled) {
mPlayBtn.setEnabled(enabled);
mPreBtn.setEnabled(enabled);
mNextBtn.setEnabled(enabled);
mMusicSeekBar.setEnabled(enabled);
}
}7.2.4 注册监听器
更新播放状态，在取得MusicService的访问接口后，注册监听器，更新控制区域的信息，
public class MusicListActivity extends AppCompatActivity {
......
private ServiceConnection mServiceConnection = new ServiceConnection()
{
@Override
public void onServiceConnected(ComponentName name, IBinder service) {
mMusicService = (MusicService.MusicServiceIBinder) service;
//注册监听器
mMusicService.registerOnStateChangeListener(mStateChangeListenr);
MusicItem item = mMusicService.getCurrentMusic();
if(item == null) {
enableControlPanel(false);
return;
}
else {
//根据当前被加载的音乐信息更新控制区域信息
updatePlayingInfo(item);
}
if(mMusicService.isPlaying()) {
//如果音乐处于播放状态降按钮背景设置成暂停图标
mPlayBtn.setBackgroundResource(R.mipmap.ic_pause);
}
}
@Override
public void onServiceDisconnected(ComponentName name) {
}
};
//更新播放信息
private void updatePlayingInfo(MusicItem item) {
//将毫秒单位的时间，转化成xx:xx形式的时间
String times = Utils.convertMSecendToTime(item.duration);
mDurationTime.setText(times);
times = Utils.convertMSecendToTime(item.playedTime);
mPlayedTime.setText(times);
//设置进度条的最大值
mMusicSeekBar.setMax((int) item.duration);
//设置进度条的当前值
mMusicSeekBar.setProgress((int) item.playedTime);
mMusicTitle.setText(item.name);
}
@Override
protected void onDestroy() {
super.onDestroy();
......
//注销监听器
mMusicService.unregisterOnStateChangeListener(mStateChangeListenr);
......
}
......
}7.2.5 实现监听器
实现监听器监听MusicService的变化，
public class MusicListActivity extends AppCompatActivity {
private MusicService.OnStateChangeListenr mStateChangeListenr = new MusicService.OnStateChangeListenr() {
@Override
public void onPlayProgressChange(MusicItem item) {
//更新播放进度信息
updatePlayingInfo(item);
}
@Override
public void onPlay(MusicItem item) {
//更新播放按钮背景
mPlayBtn.setBackgroundResource(R.mipmap.ic_pause);
updatePlayingInfo(item);
//激活控制区域
enableControlPanel(true);
}
@Override
public void onPause(MusicItem item) {
//更新播放按钮背景
mPlayBtn.setBackgroundResource(R.mipmap.ic_play);
//激活控制区域
enableControlPanel(true);
}
};
......
}至此，整个应用的音乐播放功能就完整的实现了。下面就播放一下你准备好的歌曲吧。
/*******************************************************************/
* 版权声明
* 本教程只在CSDN和安豆网发布，其他网站出现本教程均属侵权。
*另外，我们还推出了Arduino智能硬件相关的教程，您可以在我们的网店跟我学Arduino中购买相关硬件。同时也感谢大家对我们这些码农的支持。
*最后再次感谢各位读者对安豆的支持，谢谢:)
/*******************************************************************/
扫一扫
1154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
