码迷，mamicode.com
首页 > 其他好文 > 详细

扣丁学堂（六）——音乐播放独立页面的实现

时间：2016-05-10 07:08:20      阅读：260      评论：0      收藏：0      [点我收藏+]

标签：

本文出自：http://blog.csdn.net/dt235201314/article/details/51360013

一丶音乐播放页实现功能

1.音乐格信息显示，大图显示

2.播放功能，上一曲，下一曲，暂停

3.音乐进度显示

4.切换播放模式

二丶显示效果

技术分享

三丶原理及代码实现

1.自定义接口回调的方法实现UI状态切换（进度位置，播放那一首歌）

2.seekbar实现歌曲进度同步及监听

3.service统一实现Activity，Fragment的播放功能及UI图片统一

4.BaseActivity基类统一实现服务绑定，音乐播放状态，直接调用MusicPlayService

代码实现

activity_play_ui.xml

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/relativeLayout">

        <ImageView
            android:layout_centerVertical="true"
            android:id="@+id/iv_pull_down"
            android:layout_width="wrap_content"
            android:layout_height="20dp"
            android:src="@drawable/backtrack"
            android:layout_marginLeft="10dp"/>

        <LinearLayout
            android:id="@+id/ll_play_ui_top"
            android:gravity="center"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_marginTop="5dp"
            android:layout_toRightOf="@+id/iv_pull_down"
            android:layout_toLeftOf="@+id/iv_share">

            <TextView
                android:id="@+id/tv_play_ui_song"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="听妈妈的话"
                android:textColor="@color/white"
                android:textSize="18sp"/>

            <TextView
                android:id="@+id/tv_play_ui_artist"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="#c1c1c1"
                android:paddingTop="5dp"
                android:text="周杰伦"/>

        </LinearLayout>

        <ImageView
            android:id="@+id/iv_share"
            android:layout_width="wrap_content"
            android:layout_height="25dp"
            android:src="@drawable/share"
            android:layout_marginRight="10dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"/>
    </RelativeLayout>

    <LinearLayout
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/linearLayout">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <TextView
                android:id="@+id/tv_play_ui_play_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="00:00"
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:textColor="@color/white"/>

            <SeekBar
                android:id="@+id/sb_play_ui_seekbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:thumb="@drawable/seekbar_cycle"
                android:layout_toRightOf="@+id/tv_play_ui_play_time"
                android:layout_toLeftOf="@+id/tv_play_ui_end_time"/>

            <TextView
                android:id="@+id/tv_play_ui_end_time"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="00:00"
                android:layout_centerVertical="true"
                android:textColor="@color/white"
                android:layout_marginRight="10dp"
                android:layout_alignParentRight="true"/>
        </RelativeLayout>

        <LinearLayout
            android:gravity="center_vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <ImageView
                android:id="@+id/iv_play_ui_play_mode"
                android:layout_width="wrap_content"
                android:layout_height="30dp"
                android:src="@drawable/list_cycle"
                android:layout_weight="1"/>

            <ImageView
                android:id="@+id/iv_play_ui_previous"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/previous"
                android:layout_weight="1"/>

            <ImageView
                android:id="@+id/iv_play_ui_play"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/play"
                android:layout_weight="1"/>

            <ImageView
                android:id="@+id/iv_play_ui_next"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/next"
                android:layout_weight="1"/>

            <ImageView
                android:id="@+id/iv_play_ui_menu"
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:src="@drawable/menu"
                android:layout_weight="1"/>
        </LinearLayout>

        <LinearLayout
            android:layout_marginLeft="70dp"
            android:layout_marginRight="70dp"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="10dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <ImageView
                android:id="@+id/iv_play_ui_like"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_weight="1"
                android:src="@drawable/like"/>

            <ImageView
                android:id="@+id/iv_play_ui_download"
                android:layout_width="wrap_content"
                android:layout_height="25dp"
                android:layout_weight="1"
                android:src="@drawable/download"/>

            <ImageView
                android:id="@+id/iv_play_ui_add"
                android:layout_width="wrap_content"
                android:layout_height="28dp"
                android:layout_weight="1"
                android:src="@drawable/add"/>

        </LinearLayout>

    </LinearLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:background="#00FFFFFF"
        android:id="@+id/iv_ablum2"
        android:layout_below="@+id/relativeLayout"
        android:layout_marginTop="25dp"
         />


</RelativeLayout>
PlayUIActivity.java 

public class PlayUIActivity extends BaseActivity implements View.OnClickListener{

    private ImageView iv_pull_down,iv_play_ui_play,iv_play_ui_next,iv_play_ui_previous,iv_play_ui_play_mode,iv_ablum2;
    private TextView tv_play_ui_song,tv_play_ui_artist,tv_play_ui_end_time,tv_play_ui_play_time;
    private ArrayList<Mp3Info> mp3Infos;
    private SeekBar sb_play_ui_seekbar;
    private static final int UPDATE_TIME = 0x1;
    private static MyHandler myHandler;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_play_ui);
        iv_pull_down = (ImageView)findViewById(R.id.iv_pull_down);
        iv_ablum2 = (ImageView)findViewById(R.id.iv_ablum2);
        tv_play_ui_song = (TextView)findViewById(R.id.tv_play_ui_song);
        tv_play_ui_artist = (TextView)findViewById(R.id.tv_play_ui_artist);
        tv_play_ui_end_time = (TextView)findViewById(R.id.tv_play_ui_end_time);
        tv_play_ui_play_time = (TextView)findViewById(R.id.tv_play_ui_play_time);
        iv_play_ui_play = (ImageView)findViewById(R.id.iv_play_ui_play);
        iv_play_ui_next = (ImageView)findViewById(R.id.iv_play_ui_next);
        iv_play_ui_previous = (ImageView)findViewById(R.id.iv_play_ui_previous);
        iv_play_ui_play_mode = (ImageView)findViewById(R.id.iv_play_ui_play_mode);
        sb_play_ui_seekbar = (SeekBar)findViewById(R.id.sb_play_ui_seekbar);
        iv_pull_down.setOnClickListener(this);
        iv_play_ui_play.setOnClickListener(this);
        iv_play_ui_next.setOnClickListener(this);
        iv_play_ui_previous.setOnClickListener(this);
        iv_play_ui_play_mode.setOnClickListener(this);
        mp3Infos = MediaUtils.getMp3Infos(this);
        myHandler = new MyHandler(this);
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
    }

    @Override
    protected void onResume() {
        super.onResume();
        bindMusicPlayService();
    }

    @Override
    protected void onPause() {
        super.onPause();
        unbindMusicPlayService();
    }

    /**
     * 进度条控件已经内部处理过了，开始时间的改变是在子线程中改变主线程的UI，这当然是不可以的
     * 怎么办呢，用你最熟悉的Handler处理吧
     */
    static class MyHandler extends android.os.Handler{
        //内部类去要想使用外部类的权限，就得把外部类拿进来
        private PlayUIActivity playUIActivity;
        public MyHandler(PlayUIActivity playUIActivity){
            this.playUIActivity = playUIActivity;
        }

        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if(playUIActivity!=null){
                switch (msg.what){
                    case UPDATE_TIME:
                        playUIActivity.tv_play_ui_play_time.setText(MediaUtils.formatTime(msg.arg1));
                        break;
                }
            }
        }
    }

    //这里是子线程，不断的发送msg给主线程，通知其更改UI
    @Override
    public void publish(int progress) {
        Message msg = myHandler.obtainMessage(UPDATE_TIME);
        msg.arg1 = progress;
        try {
            Thread.sleep(500);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
        myHandler.sendMessage(msg);
        sb_play_ui_seekbar.setProgress(progress);
    }

    @Override
    public void change(int position) {
        Mp3Info mp3Info = mp3Infos.get(position);
        tv_play_ui_song.setText(mp3Info.getTitle());
        tv_play_ui_artist.setText(mp3Info.getArtist());
        tv_play_ui_end_time.setText(MediaUtils.formatTime(mp3Info.getDuration()));
        iv_play_ui_play.setImageResource(R.drawable.pause);
        //获取专辑封面图片
        Bitmap albumBitmap = MediaUtils.getArtwork(this, mp3Info.getId(), mp3Info.getAlbumId(), true, false);
        //改变播放界面专辑封面图片
        iv_ablum2.setImageBitmap(albumBitmap);
        sb_play_ui_seekbar.setProgress(0);
        sb_play_ui_seekbar.setMax((int)mp3Info.getDuration());
        if(musicPlayService.isPlaying()){
            iv_play_ui_play.setImageResource(R.drawable.pause);
        }else {
            iv_play_ui_play.setImageResource(R.drawable.play);
        }


        switch (musicPlayService.getPlay_mode()){
            case MusicPlayService.ORDER_PLAY:
                iv_play_ui_play_mode.setImageResource(R.drawable.list_cycle);
                //iv_play_ui_play_mode.setTag(MusicPlayService.ORDER_PLAY);
                break;
            case MusicPlayService.RANDOM_PLAY:
                iv_play_ui_play_mode.setImageResource(R.drawable.random);
                //iv_play_ui_play_mode.setTag(MusicPlayService.RANDOM_PLAY);
                break;
            case MusicPlayService.SINGLE_PLAY:
                iv_play_ui_play_mode.setImageResource(R.drawable.single_cycle);
                //iv_play_ui_play_mode.setTag(MusicPlayService.SINGLE_PLAY);
                break;
            default:
                break;
        }

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.iv_pull_down:
                finish();
                overridePendingTransition(R.anim.abc_fade_in, R.anim.abc_fade_out);
                break;
            case R.id.iv_play_ui_play:
                if(musicPlayService.isPlaying()){
                    musicPlayService.pause();
                    iv_play_ui_play.setImageResource(R.drawable.play);
                }else{
                    if(musicPlayService.isPause()){
                        musicPlayService.start();
                        iv_play_ui_play.setImageResource(R.drawable.pause);
                    }else{
                        musicPlayService.play(0);
                    }
                }
                break;
            case R.id.iv_play_ui_previous:
                musicPlayService.previous();
                break;
            case R.id.iv_play_ui_next:
                musicPlayService.next();
                break;
            case R.id.iv_play_ui_play_mode:
                switch (musicPlayService.getPlay_mode()){
                    case MusicPlayService.ORDER_PLAY:
                        iv_play_ui_play_mode.setImageResource(R.drawable.random);
                        musicPlayService.setPlay_mode(MusicPlayService.RANDOM_PLAY);
                        break;
                    case MusicPlayService.RANDOM_PLAY:
                        iv_play_ui_play_mode.setImageResource(R.drawable.single_cycle);
                        musicPlayService.setPlay_mode(MusicPlayService.SINGLE_PLAY);
                        break;
                    case MusicPlayService.SINGLE_PLAY:
                        iv_play_ui_play_mode.setImageResource(R.drawable.list_cycle);
                        musicPlayService.setPlay_mode(MusicPlayService.ORDER_PLAY);
                }
                break;
            default:
                break;

        }
    }
}
BaseActivity.java 

/**
 * 自定义基础activity，用来让其他activity继承，作为工具activity，用于绑定服务
 */
public abstract class BaseActivity extends FragmentActivity {

    protected MusicPlayService musicPlayService;
    private boolean isBound = false;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    private ServiceConnection conn = new ServiceConnection() {
        @Override
        public void onServiceConnected(ComponentName componentName, IBinder iBinder) {
            MusicPlayService.PlayBinder playBinder = (MusicPlayService.PlayBinder)iBinder;
            musicPlayService = playBinder.getMusicPlayService();
            musicPlayService.setMusicUpdateListener(musicUpdateListener);
            //绑定成功后调用监听onChange方法
            musicUpdateListener.onChange(musicPlayService.getCurrentPosition());
        }

        @Override
        public void onServiceDisconnected(ComponentName componentName) {
            musicPlayService = null;
            isBound = false;
        }
    };

    private MusicPlayService.MusicUpdateListener musicUpdateListener = new MusicPlayService.MusicUpdateListener(){
        @Override
        public void onPublish(int progress) {
            publish(progress);
        }

        @Override
        public void onChange(int position) {
            change(position);
        }
    };

    public abstract void publish(int progress);
    public abstract void change(int position);

    //绑定服务
    public void bindMusicPlayService(){
        if(!isBound){
            Intent intent = new Intent(this,MusicPlayService.class);
            bindService(intent,conn,BIND_AUTO_CREATE);
            isBound = true;
        }

    }

    //解除绑定服务
    public void unbindMusicPlayService(){
        if(isBound){
            unbindService(conn);
            isBound = false;
        }

    }
}
MusicPlayService.java 

/**
 * 实现功能：
 * 1、点击列表上的某首歌播放
 * 2、点击播放按钮，从暂停转为播放状态
 * 3、点击暂停按钮，从播放状态转为暂停状态
 * 4、上一首
 * 5、下一首
 * 6、播放进度显示
 * 7、播放模式
 */
public class  MusicPlayService extends Service implements MediaPlayer.OnCompletionListener,MediaPlayer.OnErrorListener{

    private MediaPlayer mediaPlayer;
    private ArrayList<Mp3Info> mp3Infos;
    private int currentPosition;//列表当前位置
    private MusicUpdateListener musicUpdateListener;//设置属性
    private boolean isPause = false;

    //顺序播放、单曲循环、随机播放
    public static final int ORDER_PLAY = 1;
    public static final int RANDOM_PLAY = 2;
    public static final int SINGLE_PLAY = 3;
    public int play_mode = ORDER_PLAY;


    //用于设置或者获得播放模式
    public int getPlay_mode() {
        return play_mode;
    }

    public void setPlay_mode(int play_mode) {
        this.play_mode = play_mode;
    }


    //在fragment或者activity中轻松获得状态
    public boolean isPause(){
        return isPause;
    }

    //开启线程池
    private ExecutorService es = Executors.newSingleThreadExecutor();

    Runnable updateStatusRunnable = new Runnable() {
        @Override
        public void run() {
            while (true){
                if(musicUpdateListener!=null&&mediaPlayer!=null&&mediaPlayer.isPlaying()){
                    musicUpdateListener.onPublish(getCurrentProgress());
                }
            }
        }
    };

    public MusicPlayService() {

    }

    Random random = new Random();
    //用于监听当前歌曲播放完后，下一首该如何播放
    @Override
    public void onCompletion(MediaPlayer mediaPlayer) {
        switch (play_mode){
            case ORDER_PLAY:
                next();
                break;
            case RANDOM_PLAY:
                play(random.nextInt(mp3Infos.size()));
                break;
            case SINGLE_PLAY:
                play(currentPosition);
                break;
            default:
                break;
        }
    }

    @Override
    public boolean onError(MediaPlayer mediaPlayer, int i, int i1) {
        mediaPlayer.reset();
        return false;
    }

    class PlayBinder extends Binder{
        public MusicPlayService getMusicPlayService(){
            return MusicPlayService.this;
        }
    }

    @Override
    public void onCreate() {
        super.onCreate();
        mediaPlayer = new MediaPlayer();
        mp3Infos = MediaUtils.getMp3Infos(this);
        mediaPlayer.setOnCompletionListener(this);
        mediaPlayer.setOnErrorListener(this);
        //在进入每一个绑定service时，就监听进度改变事件，而状态改变监听则是在启动播放的时候
        es.execute(updateStatusRunnable);
    }

    //启动线程就得销毁
    @Override
    public void onDestroy() {
        super.onDestroy();
        if(es!=null && es.isTerminated()){
            es.shutdown();
            es = null;
        }
    }

    @Nullable
    @Override
    public IBinder onBind(Intent intent) {
        return new PlayBinder();
    }

    //点击列表上的某首歌播放
    public void play(int position){
        if(position>=0 && position<mp3Infos.size()){
            Mp3Info mp3Info = mp3Infos.get(position);
            try {
                mediaPlayer.reset();
                mediaPlayer.setDataSource(this, Uri.parse(mp3Info.getUrl()));
                mediaPlayer.prepare();
                mediaPlayer.start();
                currentPosition = position;
            }catch (IOException e){
                e.printStackTrace();
            }
            if(musicUpdateListener!=null){
                musicUpdateListener.onChange(currentPosition);
            }
        }
    }

    //点击播放按钮，从暂停转为播放状态
    public void start(){
        if(mediaPlayer!=null && !mediaPlayer.isPlaying()){
            mediaPlayer.start();
        }
    }

    //点击暂停按钮，从播放状态转为暂停状态
    public void pause(){
        if(mediaPlayer.isPlaying()){
            mediaPlayer.pause();
            isPause = true;
        }
    }

    //下一首
    public void next(){
        if(currentPosition >= mp3Infos.size()-1){
            currentPosition = 0;
        }else{
            currentPosition++;
        }
        play(currentPosition);
    }

    //上一首
    public void previous(){
        if(currentPosition<=0){
            currentPosition = mp3Infos.size()-1;
        }else{
            currentPosition--;
        }
        play(currentPosition);
    }

    //更新状态的接口
    public interface MusicUpdateListener{
        public void onPublish(int progress);
        public void onChange(int position);
    }

    public void setMusicUpdateListener(MusicUpdateListener musicUpdateListener) {
        this.musicUpdateListener = musicUpdateListener;
    }

    //在音乐播放中，获得播放的位置信息
    public int getDuration(){
        return mediaPlayer.getDuration();
    }

    //跳转到某个地方
    public void seekTo(int msec){
        mediaPlayer.seekTo(msec);
    }

    //返回当前的位置
    public int getCurrentPosition(){

        return currentPosition;
    }

    //获得当前位置
    public int getCurrentProgress(){
        if(mediaPlayer!=null && mediaPlayer.isPlaying()){
            return mediaPlayer.getCurrentPosition();
        }
        return 0;
    }

    //反馈状态
    public boolean isPlaying(){
        if(mediaPlayer!=null&&mediaPlayer.isPlaying()){
            return mediaPlayer.isPlaying();
        }
        return false;
    }


}


扣丁学堂（六）——音乐播放独立页面的实现

标签：

原文地址：http://blog.csdn.net/dt235201314/article/details/51360013
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！