10-25 09:47 阅读 363

Android Studio实现音乐播放器【2.0版本】

一、引言

我在一年前发过一篇用Android实现音乐播放器的教程：Android Studio如何实现音乐播放器（简单易上手）。当时实现的功能也很简单，就是播放音乐、暂停音乐、继续播放、退出播放、显示音乐列表和专辑封面的功能。如下图所示：
在这里插入图片描述

期间有很多同学问到我是否可以加上一首下一首功能，确实可以加，只要获取到歌曲文件的下标position即可实现此功能，不难。但是因为写完这个最初版本后就没有当时那种心境再改了，我想大家都会有这种体会。

虽然前段时间很忙，还是沉下心来回顾了自己的音乐播放器项目，也发现了很多不足的地方，然后进行了优化升级，主要有三点：

增加了上一首下一首功能
更换了按钮样式，使用更个性化的按钮
增加了大多数代码的注释，做到临缺勿滥

所以，这篇博客就是对最初版本（1.0版本）的一个完善，即2.0版本，话不多说，下面开始。

二、项目概述

1、需求分析

综合运用UI界面设计、数据存储、Activity(活动)、Service（服务）、MusicPlayer（音乐播放类）、ListView（列表）等知识，设计开发一款具有音乐列表的音乐播放器。
在这里插入图片描述

2、设计分析

整个项目包含五个java文件和五个layout文件，因为是比较简单的项目，所以没有用工程结构去实现它，这里介绍下它们之间的关系。
在这里插入图片描述

3、资源文件分析

本项目的所有音乐文件都是存放在本地的，没有用服务器，当然也可以用，参考我的多媒体播放器：Android Studio实现多媒体播放器。

我在res文件夹下创建了raw文件夹，用来放音乐文件，音乐文件的命名注意是从music0开始，很多同学从music1开始命名导致获取不到第一首音乐然后闪退。

在drawable文件夹存放了音乐专辑图片bg.jpg、播放器背景图片music_bg.jpg，歌手圆形图片music0.png、music1.png等，还有按钮图片play.png、pause.png等。
在这里插入图片描述

三、开发环境

在这里插入图片描述

四、优化设计

1、上一首下一首

想实现跳转到上一首和下一首歌曲的播放界面，肯定修改的是MusicActivity文件。

1.1、可以这样考虑：如果每次都获取对应歌曲的intent（意图）进行跳转，这样实现起来就比较复杂了。可以看到onCreate方法里面intent1就是获取到的歌曲列表界面跳转到音乐播放界面的意图。我们换个巧妙的方法，利用这个intent1来实现。

    @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         //绑定布局文件         setContentView(R.layout.activity_music);         //获得意图         intent1=getIntent();         //初始化         init();     } 复制代码

1.2、我们首先定义上一首、下一首这些按钮，然后绑定控件，设置监听器，修改下布局文件，这些大家肯定都很熟悉，所以这里也不再赘述了。

 //依次绑定控件         tv_progress=(TextView)findViewById(R.id.tv_progress);         tv_total=(TextView)findViewById(R.id.tv_total);         sb=(SeekBar)findViewById(R.id.sb);         name_song=(TextView)findViewById(R.id.song_name);         play=findViewById(R.id.btn_play);         pause=findViewById(R.id.btn_pause);         con=findViewById(R.id.btn_continue_play);         //依次设置监听器         findViewById(R.id.btn_play).setOnClickListener(this);         findViewById(R.id.btn_pause).setOnClickListener(this);         findViewById(R.id.btn_continue_play).setOnClickListener(this);         findViewById(R.id.btn_exit).setOnClickListener(this);         findViewById(R.id.btn_next).setOnClickListener(this);         findViewById(R.id.btn_pre).setOnClickListener(this); 复制代码

1.3、下面就是重写onClick()方法了，首先intent1是从歌曲列表界面跳转过来的意图。可以理解为一个学生，它是从教室上完课走回宿舍，它存储了这节课的信息，这里教室就是歌曲列表，宿舍就是播放界面。position就是这个学生的学号，因为用getStringExtra()方法获取的是字符串，所以用parseInt（）转成整数i，这样就获取到这首歌的下标了。

1.4、music_pic就是图片框，显示歌手的圆形图片，name_song是歌曲名的文本框，显示歌曲名称。

1.5、这时候我们来获取上一首歌，就是获取目前这个同学学号前一位的那个同学，只需要i-1就可以了，但是问题来了，这样只能进行一次，继续下一首就会没有反应，因为onClick方法是每次被点击都要调用的。里面的position每次都初始化为那个走回宿舍的同学，所以你改变下标只能改变一次而已。

1.6、既然这样行不通，那么如何做到每次更新这个下标呢，这里可以自己定义个变量change，用来记录这个下标，每次加一或者减一，这个变量是全局变量，所以每次调用onClick()方法并不会复原值。

public int change=0;//记录下标的变化值 复制代码

1.7、这样，不管是上一首i-1还是下一首i+1都可以直接再加上change就行了，代码如下：

 case R.id.btn_pre://播放上一首                 if((i+change)<1) {                     Toast.makeText(MusicActivity.this, "已经是第一首了", Toast.LENGTH_SHORT).show();                     return;                 }                 else {                     change--;                     music_pic.setImageResource(frag1.icons[i+change]);                     name_song.setText(musicName[i+change]);                     musicControl.play(i+change);                     animator.start();                     break;                 }             case R.id.btn_next://播放下一首                 if((i+change)==musicName.length-1) {//这里musicName.length-1表示的最后一首歌的下标                     Toast.makeText(MusicActivity.this, "已经是最后一首了", Toast.LENGTH_SHORT).show();                     return;                 }                 else {                     change++;                     music_pic.setImageResource(frag1.icons[i+change]);                     name_song.setText(musicName[i+change]);                     musicControl.play(i+change);                     animator.start();                     break;                 } 复制代码

1.8、这样在第一版基础上可以成功实现上一首下一首的效果：
在这里插入图片描述

2、个性化按钮

2.1、音乐播放器按钮用这种框框看起来属实有些别扭，所以我又花了几个小时从各大图标网站找到了一款比较中意的UI图。
在这里插入图片描述
2.2、通过WPS图片剪切，将它们裁剪成矢量图，效果如下图所示：

2.3、然后修改layout文件，这里要将播放按钮、暂停按钮、继续播放按钮三个按钮进行重叠。我通过android:layout_centerHorizontal="true"来将它们三个全部水平居中，这样就重叠在一起了，但是重叠顺序也必须有讲究，最上层的是播放按钮（btn_play），第二层是暂停按钮（btn_pause），第三层是
继续播放按钮（btn_continue_play）。

同学甲：为什么最上层的是播放按钮？
博主：因为播放按钮点击之后要让它消失，所以它必须放第一个。
同学乙：为什么第二层的是暂停按钮？
博主：因为播放歌曲后肯定要能暂停歌曲，所以要能显示暂停按钮，而且暂停按钮点击之后会消失，显示最底下的继续播放按钮。
同学丙：那我按下继续播放按钮是不是歌曲继续播放，继续播放按钮消失，然后暂停按钮出现？
博主：你说的没错，就是这样的逻辑。

这里给出完整的layout代码：

<?xml version="1.0" encoding="utf-8"?> <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:background="@drawable/music_bg"     tools:context=".MusicActivity"     android:gravity="center"     android:orientation="vertical">     <ImageView         android:id="@+id/iv_music"         android:layout_width="240dp"         android:layout_height="240dp"         android:layout_gravity="center_horizontal"         android:layout_margin="15dp"         android:src="@drawable/music0"/>     <TextView         android:id="@+id/song_name"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="歌曲名"         android:textSize="20sp"/>     <SeekBar         android:id="@+id/sb"         android:layout_width="match_parent"         android:layout_height="wrap_content" />     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:paddingLeft="8dp"         android:paddingRight="8dp">         <TextView             android:id="@+id/tv_progress"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:text="00:00"/>         <TextView             android:id="@+id/tv_total"             android:layout_width="wrap_content"             android:layout_height="wrap_content"             android:layout_alignParentRight="true"             android:text="00:00"/>     </RelativeLayout>     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="wrap_content">         <Button             android:id="@+id/btn_continue_play"             android:layout_width="80dp"             android:layout_height="80dp"             android:layout_centerHorizontal="true"             android:background="@drawable/play"/>         <Button             android:id="@+id/btn_pause"             android:layout_width="80dp"             android:layout_height="80dp"             android:layout_centerHorizontal="true"             android:background="@drawable/pause"/>         <Button             android:id="@+id/btn_play"             android:layout_width="80dp"             android:layout_height="80dp"             android:layout_centerHorizontal="true"             android:background="@drawable/play" />         <Button             android:id="@+id/btn_pre"             android:layout_width="60dp"             android:layout_height="60dp"             android:background="@drawable/pre"             android:layout_centerVertical="true"             android:layout_marginRight="10dp"             android:layout_toLeftOf="@id/btn_play"/>         <Button             android:id="@+id/btn_next"             android:layout_width="60dp"             android:layout_height="60dp"             android:background="@drawable/next"             android:layout_centerVertical="true"             android:layout_marginLeft="10dp"             android:layout_toRightOf="@id/btn_play"/>         <Button             android:id="@+id/btn_exit"             android:layout_width="60dp"             android:layout_height="60dp"             android:background="@drawable/exit"             android:layout_centerVertical="true"             android:layout_marginLeft="30dp"             android:layout_toRightOf="@id/btn_next"/>     </RelativeLayout> </LinearLayout> 复制代码