扣丁音乐(七)——音乐进度条拖动 循环模式 专辑图片倒影功能实现

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

代码上传到github,欢迎start:https://github.com/JinBoy23520/TingTingMusic

一丶效果演示


二丶实现功能介绍及思路设计

前几篇的博客被指出:纯贴代码没什么用,解释下,本博客是由视频转博客的笔记及自己加深的一些功能,觉得提供代码是最有效的,虽然如此还是觉得屡一下思路是很有必要的,前面几篇博客思路待博客完成后再整理

1.图片倒影实现是采用工具类ImageUtils,在歌曲独立播放页面调用ImageUtils类方法得到倒影图片即可

2.音乐播放进度的拖动,前面实现了随音乐播放进度改变,这里只需要实现seekbar监听即可完成

3.循环模式的实现,这里只实现的歌曲播放完成后下一首该怎样自动播放,实现MediaPlayer.OnCompletionListener,MediaPlayer.OnErrorListener两个接口方法就能达到目的都是用的MediaPlayer自身的方法,然后就是UI的切换变换

三丶代码实现

1.图片倒影功能

xml里两个并挨着的imageview,一个获取歌曲大图,一个获取歌曲大图的倒影

ImageUtils工具类(这个只能贴,有的地方目前也不是很理解,后期可以多玩玩)

public class ImageUtils {
    /**图片的八个位置**/
    public static final int TOP = 0;            //上
    public static final int BOTTOM = 1;         //下
    public static final int LEFT = 2;           //左
    public static final int RIGHT = 3;          //右
    public static final int LEFT_TOP = 4;       //左上
    public static final int LEFT_BOTTOM = 5;    //左下
    public static final int RIGHT_TOP = 6;      //右上
    public static final int RIGHT_BOTTOM = 7;   //右下

    /**
     * 图像的放大缩小方法
     * @param src       源位图对象
     * @param scaleX    宽度比例系数
     * @param scaleY    高度比例系数
     * @return 返回位图对象
     */
    public static Bitmap zoomBitmap(Bitmap src, float scaleX, float scaleY) {
        Matrix matrix = new Matrix();
        matrix.setScale(scaleX, scaleY);
        Bitmap t_bitmap = Bitmap.createBitmap(src, 0, 0, src.getWidth(), src.getHeight(), matrix, true);
        return t_bitmap;
    }

    /**
     * 图像放大缩小--根据宽度和高度
     * @param src
     * @param width
     * @param height
     * @return
     */
    public static Bitmap zoomBimtap(Bitmap src, int width, int height) {
        return Bitmap.createScaledBitmap(src, width, height, true);
    }

    /**
     * 将Drawable转为Bitmap对象
     * @param drawable
     * @return
     */
    public static Bitmap drawableToBitmap(Drawable drawable) {
        return ((BitmapDrawable)drawable).getBitmap();
    }


    /**
     * 将Bitmap转换为Drawable对象
     * @param bitmap
     * @return
     */
    public static Drawable bitmapToDrawable(Bitmap bitmap) {
        Drawable drawable = new BitmapDrawable(bitmap);
        return drawable;
    }

    /**
     * Bitmap转byte[]
     * @param bitmap
     * @return
     */
    public static byte[] bitmapToByte(Bitmap bitmap) {
        ByteArrayOutputStream out = new ByteArrayOutputStream();
        bitmap.compress(Bitmap.CompressFormat.PNG, 100, out);
        return out.toByteArray();
    }

    /**
     * byte[]转Bitmap
     * @param data
     * @return
     */
    public static Bitmap byteToBitmap(byte[] data) {
        if(data.length != 0) {
            return BitmapFactory.decodeByteArray(data, 0, data.length);
        }
        return null;
    }

    /**
     * 绘制带圆角的图像
     * @param src
     * @param radius
     * @return
     */
    public static Bitmap createRoundedCornerBitmap(Bitmap src, int radius) {
        final int w = src.getWidth();
        final int h = src.getHeight();
        // 高清量32位图
        Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);
        Paint paint = new Paint();
        Canvas canvas = new Canvas(bitmap);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(0xff424242);
        // 防止边缘的锯齿
        paint.setFilterBitmap(true);
        Rect rect = new Rect(0, 0, w, h);
        RectF rectf = new RectF(rect);
        // 绘制带圆角的矩形
        canvas.drawRoundRect(rectf, radius, radius, paint);

        // 取两层绘制交集,显示上层
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        // 绘制图像
        canvas.drawBitmap(src, rect, rect, paint);
        return bitmap;
    }

    /**
     * 创建选中带提示图片
     * @param context
     * @param srcId
     * @param tipId
     * @return
     */
    public static Drawable createSelectedTip(Context context, int srcId, int tipId) {
        Bitmap src = BitmapFactory.decodeResource(context.getResources(), srcId);
        Bitmap tip = BitmapFactory.decodeResource(context.getResources(), tipId);
        final int w = src.getWidth();
        final int h = src.getHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);
        Paint paint = new Paint();
        Canvas canvas = new Canvas(bitmap);
        //绘制原图
        canvas.drawBitmap(src, 0, 0, paint);
        //绘制提示图片
        canvas.drawBitmap(tip, (w - tip.getWidth()), 0, paint);
        return bitmapToDrawable(bitmap);
    }

    /**
     * 带倒影的图像
     * @param src
     * @return
     */
    public static Bitmap createReflectionBitmap(Bitmap src) {
        // 两个图像间的空隙
        final int spacing = 4;
        final int w = src.getWidth();
        final int h = src.getHeight();
        // 绘制高质量32位图
        Bitmap bitmap = Bitmap.createBitmap(w, h + h / 2 + spacing, Config.ARGB_8888);
        // 创建燕X轴的倒影图像
        Matrix m = new Matrix();
        m.setScale(1, -1);
        Bitmap t_bitmap = Bitmap.createBitmap(src, 0, h / 2, w, h / 2, m, true);

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        //  绘制原图像
        canvas.drawBitmap(src, 0, 0, paint);
        // 绘制倒影图像
        canvas.drawBitmap(t_bitmap, 0, h + spacing, paint);
        // 线性渲染-沿Y轴高到低渲染
        Shader shader = new LinearGradient(0, h + spacing, 0, h + spacing + h / 2, 0x70ffffff, 0x00ffffff, Shader.TileMode.MIRROR);
        paint.setShader(shader);
        // 取两层绘制交集,显示下层。
        paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
        // 绘制渲染倒影的矩形
        canvas.drawRect(0, h + spacing, w, h + h / 2 + spacing, paint);
        return bitmap;
    }


    /**
     * 独立的倒影图像
     * @param src
     * @return
     */
    public static Bitmap createReflectionBitmapForSingle(Bitmap src) {
        final int w = src.getWidth();
        final int h = src.getHeight();
        // 绘制高质量32位图
        Bitmap bitmap = Bitmap.createBitmap(w, h / 2, Config.ARGB_8888);
        // 创建沿X轴的倒影图像
        Matrix m = new Matrix();
        m.setScale(1, -1);
        Bitmap t_bitmap = Bitmap.createBitmap(src, 0, h / 2, w, h / 2, m, true);

        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        // 绘制倒影图像
        canvas.drawBitmap(t_bitmap, 0, 0, paint);
        // 线性渲染-沿Y轴高到低渲染
        Shader shader = new LinearGradient(0, 0, 0, h / 2, 0x70ffffff,
                0x00ffffff, Shader.TileMode.MIRROR);
        paint.setShader(shader);
        // 取两层绘制交集。显示下层。
        paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
        // 绘制渲染倒影的矩形
        canvas.drawRect(0, 0, w, h / 2, paint);
        return bitmap;
    }


    public static Bitmap createGreyBitmap(Bitmap src) {
        final int w = src.getWidth();
        final int h = src.getHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        Paint paint = new Paint();
        // 颜色变换的矩阵
        ColorMatrix matrix = new ColorMatrix();
        // saturation 饱和度值,最小可设为0,此时对应的是灰度图;为1表示饱和度不变,设置大于1,就显示过饱和
        matrix.setSaturation(0);
        ColorMatrixColorFilter filter = new ColorMatrixColorFilter(matrix);
        paint.setColorFilter(filter);
        canvas.drawBitmap(src, 0, 0, paint);
        return bitmap;
    }

    /**
     * 保存图片
     * @param src
     * @param filepath
     * @param format:[Bitmap.CompressFormat.PNG,Bitmap.CompressFormat.JPEG]
     * @return
     */
    public static boolean saveImage(Bitmap src, String filepath, CompressFormat format) {
        boolean rs = false;
        File file = new File(filepath);
        try {
            FileOutputStream out = new FileOutputStream(file);
            if(src.compress(format, 100, out)) {
                out.flush();    //写入流
            }
            out.close();
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        } catch (IOException e) {
            e.printStackTrace();
        }
        return rs;
    }

    /**
     * 添加水印效果
     * @param src       源位图
     * @param watermark 水印
     * @param direction 方向
     * @param spacing 间距
     * @return
     */
    public static Bitmap createWatermark(Bitmap src, Bitmap watermark, int direction, int spacing) {
        final int w = src.getWidth();
        final int h = src.getHeight();
        Bitmap bitmap = Bitmap.createBitmap(w, h, Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        canvas.drawBitmap(src, 0, 0, null);
        if(direction == LEFT_TOP) {
            canvas.drawBitmap(watermark, spacing, spacing, null);
        } else if(direction == LEFT_BOTTOM){
            canvas.drawBitmap(watermark, spacing, h - watermark.getHeight() - spacing, null);
        } else if(direction == RIGHT_TOP) {
            canvas.drawBitmap(watermark, w - watermark.getWidth() - spacing, spacing, null);
        } else if(direction == RIGHT_BOTTOM) {
            canvas.drawBitmap(watermark, w - watermark.getWidth() - spacing, h - watermark.getHeight() - spacing, null);
        }
        return bitmap;
    }


    /**
     * 合成图像
     * @param direction
     * @param bitmaps
     * @return
     */
    public static Bitmap composeBitmap(int direction, Bitmap... bitmaps) {
        if(bitmaps.length < 2) {
            return null;
        }
        Bitmap firstBitmap = bitmaps[0];
        for (int i = 0; i < bitmaps.length; i++) {
            firstBitmap = composeBitmap(firstBitmap, bitmaps[i], direction);
        }
        return firstBitmap;
    }

    /**
     * 合成两张图像
     * @param firstBitmap
     * @param secondBitmap
     * @param direction
     * @return
     */
    private static Bitmap composeBitmap(Bitmap firstBitmap, Bitmap secondBitmap,
                                        int direction) {
        if(firstBitmap == null) {
            return null;
        }
        if(secondBitmap == null) {
            return firstBitmap;
        }
        final int fw = firstBitmap.getWidth();
        final int fh = firstBitmap.getHeight();
        final int sw = secondBitmap.getWidth();
        final int sh = secondBitmap.getHeight();
        Bitmap bitmap = null;
        Canvas canvas = null;
        if(direction == TOP) {
            bitmap = Bitmap.createBitmap(sw > fw ? sw : fw, fh + sh, Config.ARGB_8888);
            canvas = new Canvas(bitmap);
            canvas.drawBitmap(secondBitmap, 0, 0, null);
            canvas.drawBitmap(firstBitmap, 0, sh, null);
        } else if(direction == BOTTOM) {
            bitmap = Bitmap.createBitmap(fw > sw ? fw : sw, fh + sh, Config.ARGB_8888);
            canvas = new Canvas(bitmap);
            canvas.drawBitmap(firstBitmap, 0, 0, null);
            canvas.drawBitmap(secondBitmap, 0, fh, null);
        } else if(direction == LEFT) {
            bitmap = Bitmap.createBitmap(fw + sw, sh > fh ? sh : fh, Config.ARGB_8888);
            canvas = new Canvas(bitmap);
            canvas.drawBitmap(secondBitmap, 0, 0, null);
            canvas.drawBitmap(firstBitmap, sw, 0, null);
        } else if(direction == RIGHT) {
            bitmap = Bitmap.createBitmap(fw + sw, fh > sh ? fh : sh,
                    Config.ARGB_8888);
            canvas = new Canvas(bitmap);
            canvas.drawBitmap(firstBitmap, 0, 0, null);
            canvas.drawBitmap(secondBitmap, fw, 0, null);
        }
        return bitmap;
    }


}

播放页面java代码(注意这里albumBitmap !=null判断很重要,有的歌曲没有大图,参考的博客这里出了问题)

@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);
    }
    if(albumBitmap !=null) {
        imageView1_ablum_reflection.setImageBitmap(ImageUtils.createReflectionBitmapForSingle(albumBitmap));//显示倒影
    }

2.seekbar实现歌曲进度拖动功能

前实现了歌曲随进度播放,后面只需要实现监听即可

页面实现监听

public class PlayUIActivity extends BaseActivity implements View.OnClickListener,SeekBar.OnSeekBarChangeListener
监听方法实现

@Override
public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
    if(fromUser){
        musicPlayService.pause();//暂停
        musicPlayService.seekTo(progress);//拖动
        musicPlayService.start();//播放
    }
}

@Override
public void onStartTrackingTouch(SeekBar seekBar) {

}

@Override
public void onStopTrackingTouch(SeekBar seekBar) {

}

3.循环模式的实现

service定义几种模式及get set方法

//顺序播放、单曲循环、随机播放
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;
}
实现MediaPlayer.OnCompletionListener,MediaPlayer.OnErrorListener两个接口方法

public class  MusicPlayService extends Service implements MediaPlayer.OnCompletionListener,MediaPlayer.OnErrorListener
方法实现

//用于监听当前歌曲播放完后,下一首该如何播放
@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;
}
剩下的就是播放页面的UI显示变换

@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);
                    Toast.makeText(getApplicationContext(), "随机播放", Toast.LENGTH_SHORT).show();
                    break;
                case MusicPlayService.RANDOM_PLAY:
                    iv_play_ui_play_mode.setImageResource(R.drawable.single_cycle);
                    musicPlayService.setPlay_mode(MusicPlayService.SINGLE_PLAY);
                    Toast.makeText(getApplicationContext(),"单曲循环",Toast.LENGTH_SHORT).show();
                    break;
                case MusicPlayService.SINGLE_PLAY:
                    iv_play_ui_play_mode.setImageResource(R.drawable.list_cycle);
                    musicPlayService.setPlay_mode(MusicPlayService.ORDER_PLAY);
                    Toast.makeText(getApplicationContext(),"顺序播放",Toast.LENGTH_SHORT).show();
                    break;
            }
            break;
        default:
            break;

    }
}
这里简单理一下思路及部分代码段,前面的思路后期补上,这里其实还有其他很多功能可以自己完善

整体代码会在最后贴出,如有疑问可加群讨论


猜你喜欢

转载自blog.csdn.net/dt235201314/article/details/51367931