自定义view留声机样式--音乐播放器

最新推荐文章于 2022-07-26 11:11:38 发布
最新推荐文章于 2022-07-26 11:11:38 发布
阅读量1k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41673194/article/details/80482655
版权

效果：

播放、暂停、进度条、循环播放


attrs.xml：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="GramophoneView">
        <attr name="picture_radiu" format="dimension"/>//中间图片的半径
        <attr name="src" format="reference"/>//图片
        <attr name="disk_rotate_speed" format="float"/>//唱片旋转的速度
    </declare-styleable>
</resources>
GramophoneView： 
public class GramophoneView extends View {
    private final float DEFUALT_DISK_ROTATE_SPEED = 1f;      //磁盘旋转的速度
    private final float DEFUALT_PICTURE_RAUID = 200;         //中间图片默认半径
    private final float DEFUALT_PAUSE_NEEDLE_DEGREE = -45;  //暂停状态时唱针的旋转角度
    private final float DEFUALT_PLAYING_NEEDLE_DEGREE = -15;     //播放状态时唱针的旋转角度

    private int pictrueRadio;   //中间图片的半径

    //指针
    private int smallCircleRadiu = 10;  //唱针顶部小圆半径,减小了一半
    private int bigCircleRadiu = 15;    //唱针顶部大圆半径,减小了一半

    private int shortArmLength;
    private int longArmleLength;         // 唱针手臂，较长那段的长度
    private int shortHeadLength;         // 唱针的头，较短那段的长度
    private int longHeadLength;
    private Paint needlePaint;

    //唱片
    private float halfMeasureWidth;
    private int diskRingWidth;            // 黑色圆环宽度
    private float diskRotateSpeed;        // 唱片旋转速度
    private Bitmap pictureBitmap;
    private Paint diskPaint;

    //状态控制
    private boolean isPlaying;
    private float currentDiskDegree;            // 唱片旋转角度
    private float currentNeddleDegree = DEFUALT_PLAYING_NEEDLE_DEGREE;

    public GramophoneView(Context context) {
        super(context, null);
    }

    public GramophoneView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        needlePaint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
        diskPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.GramophoneView);

        //拿到xml中的图片和图片半径和，旋转的度数
        pictrueRadio = (int) typedArray.getDimension(R.styleable.GramophoneView_picture_radiu,
                DEFUALT_PICTURE_RAUID);
        diskRotateSpeed = typedArray.getFloat(R.styleable.GramophoneView_disk_rotate_speed,
                DEFUALT_DISK_ROTATE_SPEED);
        Drawable drawable = typedArray.getDrawable(R.styleable.GramophoneView_src);
        if (drawable == null) {
            pictureBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        } else {
            pictureBitmap = ((BitmapDrawable)drawable).getBitmap();
        }

        //初始化唱片的变量
        diskRingWidth = pictrueRadio >> 1;

        //图片半径和黑色圆环的和 等于 指针的总长度
        shortHeadLength = (pictrueRadio + diskRingWidth) / 15;
        longHeadLength = shortHeadLength << 1;    //左移相当于乘以2
        shortArmLength = longHeadLength << 1;
        longArmleLength = shortArmLength << 1;
    }

    public GramophoneView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = (pictrueRadio+diskRingWidth)*2;
        int hight = (pictrueRadio+diskRingWidth)*2+longArmleLength;

        //根据我们理想的宽和高 和xml中设置的宽高，按resolveSize规则做最后的取舍
        //resolveSize规则 1、精确模式，按
        int measurewidth = resolveSize(width,widthMeasureSpec);
        int measurehight = resolveSize(hight,heightMeasureSpec);
        setMeasuredDimension(measurewidth,measurehight);//设置测量的长度
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        halfMeasureWidth = getMeasuredWidth() >> 1;
        drawDisk(canvas);   //画唱片
        drawNeedle(canvas);//画指针
        if (currentNeddleDegree > DEFUALT_PAUSE_NEEDLE_DEGREE) {
            invalidate();
        }
    }

    private void drawNeedle(Canvas canvas) {
        canvas.save();//保存

        //移动坐标原点，画指针第一段
        canvas.translate(halfMeasureWidth, 0);
        canvas.rotate(currentNeddleDegree);
        needlePaint.setColor(Color.parseColor("#C0C0C0"));
        needlePaint.setStrokeWidth(10);
        canvas.drawLine(0, 0, 0, longArmleLength, needlePaint);

        //画指针第二段
        canvas.translate(0, longArmleLength);
        canvas.rotate(-30);//
        needlePaint.setStrokeWidth(10);
        canvas.drawLine(0, 0, 0, shortArmLength, needlePaint);

        //画指针第三段
        canvas.translate(0, shortArmLength);
        needlePaint.setStrokeWidth(15);
        canvas.drawLine(0, 0, 0, longHeadLength, needlePaint);

        //画指针的第四段
        canvas.translate(0, longHeadLength);
        needlePaint.setStrokeWidth(25);
        canvas.drawLine(0, 0, 0, shortHeadLength, needlePaint);
        canvas.restore();

        //画指针的支点
        canvas.save();
        canvas.translate(halfMeasureWidth, 0);
        needlePaint.setColor(Color.parseColor("#8A8A8A"));
        needlePaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(0, 0, bigCircleRadiu, needlePaint);

        needlePaint.setColor(Color.parseColor("#C0C0C0"));
        canvas.drawCircle(0, 0, smallCircleRadiu, needlePaint);
        canvas.restore();

        if (isPlaying) {
            if (currentNeddleDegree < DEFUALT_PLAYING_NEEDLE_DEGREE) {
                currentNeddleDegree += 3;
            }
        } else {
            if (currentNeddleDegree > DEFUALT_PAUSE_NEEDLE_DEGREE) {
                currentNeddleDegree -= 3;
            }
        }
    }

    private void drawDisk(Canvas canvas) {
        currentDiskDegree = currentDiskDegree % 360 + diskRotateSpeed;

        canvas.save();
        canvas.translate(halfMeasureWidth, longArmleLength + diskRingWidth + pictrueRadio);
        canvas.rotate(currentDiskDegree);
        diskPaint.setColor(Color.BLACK);
        diskPaint.setStyle(Paint.Style.STROKE);
        diskPaint.setStrokeWidth(pictrueRadio / 2);
        //diskPaint.setStrokeWidth(20);
        canvas.drawCircle(0, 0, pictrueRadio + diskRingWidth / 2, diskPaint);

        Path path = new Path();
        path.addCircle(0, 0, pictrueRadio, Path.Direction.CW);
        canvas.clipPath(path);

        Rect src = new Rect();
        src.set(0, 0, pictureBitmap.getWidth(), pictureBitmap.getHeight());
        Rect dst = new Rect();
        dst.set(-pictrueRadio, -pictrueRadio, pictrueRadio, pictrueRadio);
        canvas.drawBitmap(pictureBitmap, src, dst, null);
        canvas.restore();
    }

    public void pauseOrstart(){
        isPlaying =!isPlaying;
        invalidate();
    }

    /**
     * 设置图片半径
     */
    public void setPictureRadius(int pictureRadius) {
        this.pictrueRadio = pictureRadius;
    }

    /**
     * 设置唱片旋转速度
     */
    public void setDiskRotateSpeed(float diskRotateSpeed) {
        this.diskRotateSpeed = diskRotateSpeed;
    }

    /**
     * 设置图片资源id
     */
    public void setPictureRes(int resId) {
        pictureBitmap = BitmapFactory.decodeResource(getContext().getResources(), resId);
        invalidate();
    }
}

MainActivity：

public class MainActivity extends BaseActivity<MainPresenter> implements IMainView, View.OnClickListener {

    private GramophoneView gramophone;
    private SeekBar seek_bar;
    private Button btn_play;
    private Button btn_dan;
    private boolean flag=false;
    private boolean isOne=true;
    private MediaPlayer player;
    private Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            switch (msg.what){
                case 0:
                    seek_bar.setProgress(getMusicCurrentPosition());
                    handler.sendEmptyMessageDelayed(0,500);
                    break;
                case 1:
                    //设置按钮状态
                    btn_play.setBackgroundResource(R.drawable.play);
                    //停止同步进度条与音乐进度
                    handler.removeMessages(0);
                    //控制圆盘停止
                    gramophone.pauseOrstart();
                    //初始化进度条
                    seek_bar.setProgress(0);
                    //初始为重新播放
                    isOne=true;
                    break;
            }
        }
    };

    @Override
    void initView() {
        gramophone = findViewById(R.id.gramophone);
        seek_bar = findViewById(R.id.seek_bar);
        btn_play = findViewById(R.id.btn_play);
        btn_dan = findViewById(R.id.btn_dan);
        btn_play.setOnClickListener(this);
        btn_dan.setOnClickListener(this);
    }

    @Override
    void initData() {
        player = new MediaPlayer();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_play:
                if (isOne){
                    try {
                        //重置资源 *****
                        player.reset();
                        //加载音乐资源3:加载assets目录下的音乐资源
                        AssetFileDescriptor openFd = getAssets().openFd("aaa.mp3");
                        player.setDataSource(openFd.getFileDescriptor(), openFd.getStartOffset(), openFd.getLength());
                        //3.准备
                        player.prepareAsync();//异步的准备
                        //4.播放
                        //准备完成的监听
                        player.setOnPreparedListener(new MediaPlayer.OnPreparedListener() {
                            @Override
                            public void onPrepared(MediaPlayer mp) {
                                player.start();//开始播放
                                //设置按钮状态
                                btn_play.setBackgroundResource(R.drawable.pause);
                                //控制圆盘转动
                                gramophone.pauseOrstart();
                                //设置最大进度为音乐长度
                                seek_bar.setMax(getMusicDuration());
                                //设置拖动进度条监听，播放结束监听
                                setProgressListener();
                                //同步进度条与音乐进度
                                handler.sendEmptyMessage(0);
                            }
                        });
                    } catch (Exception e) {
                        e.printStackTrace();
                    }
                    isOne=false;
                }else {
                    if (flag) {//处于暂停状态
                        player.start();//继续播放
                        //设置按钮状态
                        btn_play.setBackgroundResource(R.drawable.pause);
                        //同步进度条与音乐进度
                        handler.sendEmptyMessage(0);
                        //控制圆盘转动
                        gramophone.pauseOrstart();
                        //更改状态值
                        flag=false;
                    } else {
                        if (player!=null&&player.isPlaying()) {
                            player.pause();//暂停播放
                            //设置按钮状态
                            btn_play.setBackgroundResource(R.drawable.play);
                            //停止同步进度条与音乐进度
                            handler.removeMessages(0);
                            //控制圆盘停止
                            gramophone.pauseOrstart();
                            //更改状态值
                            flag=true;
                        }
                    }
                }
                break;
            case R.id.btn_dan:
                if (player != null&&player.isPlaying()) {
                    //设置是否单曲循环播放
                    player.setLooping(!player.isLooping());
                    if (player.isLooping()){
                        Toast.makeText(this, "开始单曲循环", Toast.LENGTH_SHORT).show();
                    }else {
                        Toast.makeText(this, "关闭单曲循环", Toast.LENGTH_SHORT).show();
                    }
                    Log.e("myMessage", "handleMessage: "+player.isLooping());
                }
                break;
        }
    }

    private void setProgressListener() {
        seek_bar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                if (fromUser){
                    //设置播放进度
                    seekTo(progress);
                }
            }
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) { }
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) { }
        });
        player.setOnCompletionListener(new MediaPlayer.OnCompletionListener() {
            @Override
            public void onCompletion(MediaPlayer mp) {
                if (!player.isLooping()){
                    handler.sendEmptyMessage(1);
                }
            }
        });
    }

    //获取歌曲长度
    public int getMusicDuration() {
        int rtn = 0;
        if (player != null) {
            rtn = player.getDuration();
        }
        return rtn;
    }
    //获取当前播放进度
    public int getMusicCurrentPosition() {
        int rtn = 0;
        if (player != null) {
            rtn = player.getCurrentPosition();
        }
        return rtn;
    }

    public void seekTo(int position) {
        if (player != null) {
            player.seekTo(position);
        }
    }

    @Override
    public void onSuccess(Object o) {

    }

    @Override
    MainPresenter initPresenter() {
        return new MainPresenter();
    }

    @Override
    int setChildContentView() {
        return R.layout.activity_main;
    }

    @Override
    protected void onDestroy() {
        super.onDestroy();
        if (player!=null) {
            player.release();//释放音乐资源
            player=null;
        }
        getPresenter().detachView();
    }
}
activity_main.xml： 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="@drawable/bei"
    tools:context=".view.activity.MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="3"
        android:gravity="center_horizontal">
        <com.example.kaoshi.view.customview.GramophoneView
            android:id="@+id/gramophone"
            app:src="@drawable/n"
            app:picture_radiu="150dp"
            app:disk_rotate_speed="1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">
        <SeekBar
            android:id="@+id/seek_bar"
            android:layout_width="match_parent"
            android:max="100"
            android:layout_height="wrap_content" />
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal"
            android:gravity="center">
            <Button
                android:id="@+id/btn_pre"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/pre"/>
            <Button
                android:id="@+id/btn_play"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="20dp"
                android:background="@drawable/play" />
            <Button
                android:id="@+id/btn_next"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:background="@drawable/next" />
            <Button
                android:id="@+id/btn_dan"
                android:layout_width="wrap_content"
                android:layout_height="50dp"
                android:text="单曲循环" />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>



梵韵
关注
Android MP3音频播放器 仿唱片机播放动画，仿网易云播放动画，旋转动画，MediaPlayer AudioManager
legedelove的博客
11-12 2430
废话不多说上代码 private AudioManager audioManager; private SimpleDateFormat format; private SeekBar seekBar; private TextView musicLength; private TextView musicCur; private MediaPlayer mediaPlayer = new MediaPlayer(); private ImageButt
【前端 H5】模仿网易云音乐 CSS 加js 实现留声机效果 H5
悟空—
08-06 1316
效果实现还是很基础的 主要是动画 简单的动画使用了css的transition 过渡加 hover实践实现 盘转动的 使用了js 因考虑到停止时暂不能解决停留在原处 故使用的setInterval 定时器 改变样式 废话不多说 直接上代码和效果 效果有点卡顿 直接复制代码 自己看效果 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>悟空留声机</ti..
仿唱片机音乐播放器
03-17
仿唱片机音乐播放器源码是仿照老式留声机样式的播放器，使用之前先选几首歌然后添加到一个半圆形的歌曲列表里，然后先按右上角的开关按钮，会有一个留声机唱针缓缓右移的动画效果。
仿唱片机音乐播放器源码.zip
07-16
仿唱片机音乐播放器源码是仿照老式留声机样式的播放器，使用之前先选几首歌然后添加到一个半圆形的歌曲列表里，然后先按右上角的开关按钮，会有一个留声机唱针缓缓右移的动画效果。  
Android应用源码仿唱片机音乐播放器
06-10
一款很个性的音乐播放器，是仿照老式留声机样式的播放器，使用之前先选几首歌然后添加到一个半圆形的歌曲列表里，然后先按右上角的开关按钮，会有一个留声机唱针缓缓右移的动画效果。项目工程量不大，源码注释比较少。项目的亮点是动画效果。 涉及模块&技术 绘图 音乐
Android仿唱片机音乐播放器源码.zip
12-22
Android仿唱片机音乐播放器源码
android 声波曲线动画,(自定义view实现）音量波形图
weixin_36068199的博客
05-25 2886
标签： 自定义view 音量波形 音波本文目的：主要是记录自己在实现自定义view的时候，一些思路和解决方案。目标音量波形图绘制两个音量波形，并且能够向右运动，上面的波形移动速度慢，下面的波形移动速度快，并且振幅能够根据音量的高低进行改变。分解目标先考虑静止状态，上图有两个波形图，现只考虑一个波形图，每个波形图类似于两个正弦函数的闭合。所以我们第一步要绘制一个正弦图形。正弦函数图像绘制正弦函数关于...
【Vue知识点- No8.】网易云音乐案例（vant组件库的使用）
qq_48687155的博客
07-26 1065
掌握vant组件库的使用-找组件,引组件,用组件能够对vant组件自带样式进行覆盖自定义遇到重复的标签,自己也封装了一个复用的组件掌握查询文档和使用每个属性的方式。
Android开发笔记（一百二十五）自定义视频播放器
aqi00的博客
09-12 7822
视频播放方式 在Android中播放视频的方式有两种： 1、使用MediaPlayer结合SurfaceView进行播放。其中通过SurfaceView显示视频的画面，通过MediaPlayer来设置播放参数、并控制视频的播放操作；该方式的具体说明参见《Android开发笔记（五十七）录像录音与播放》。 该方式的好处是灵活性强，可随意定制。缺点是编码复杂，连开始/暂停的按钮都要自己实现。
API 25 (Android 7.1.1 API) view.View——属性分析
上帝也疯狂
11-18 3882
View public class View extends Object implements Drawable.Callback, KeyEvent.Callback, AccessibilityEventSource Added in API level 1   java.lang.Object    ↳ android.view.View   已知直接子类
实现安卓音乐播放器中的旋转动画效果
07-26
实现安卓主流音乐播放器中的旋转动画效果，其中包括如何对任意形状的图片进行圆形截取，以及如何从相册和拍照中获取图片
ym——Andorid-15k+的面试题。
热门推荐
陈宇明
08-07 2万+
最近才开的博客，希望大家多多关注，andorid开发也做了3年有余了，也面试很多加企业，借此机会分享一下，我们中遇到过的问题以及解决方案吧，希望能够对正在找工作的andoird程序员有一定的帮助。学完本人博客发表《ym--andorid从零开始教程》+面试题目全理解，年薪18w以上绝对没问题。 特别献上整理过的50道面试题目 1.listView的优化方式 重用conve
调用网易云Api接口实现移动Web网易云部分功能(搜索+列表+播放）
qq_43372180的博客
06-12 1万+
调用网易云Node.js实现网易云音乐部分功能的实现
Android仿网易云音乐播放界面
xiangzhihong8的专栏
01-11 2万+
概述网易云音乐是一款非常优秀的音乐播放器，尤其是播放界面，使用唱盘机风格，显得格外古典优雅。这里抛砖引玉，原文地址：http://www.jianshu.com/p/cb54990219d9 首先来看一下网易的播放效果。 要实现上面的功能，我们需要对界面进行一个拆分，拆分后大概包含如下结构： 主界面布局设计 唱盘布局设计 动态布局 唱盘控件DiscView对外接口及方法 音乐状态控制时序图
自定义View(留声机)
Gybk123的博客
03-02 311
//自定义GramophoneViewpackage bwei.com.changji_zidingyi; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Bitmap; import android.graphics.BitmapFactory; imp...
自定义View_留声机效果
天纵神武的博客
03-01 738
代码...attrs.xml&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;resources&gt; &lt;declare-styleable name="GramophoneView"&gt; &lt;attr name="picture_radiu" format="dimensio
Android自定义View分享——仿网易云音乐留声机效果
Kingfar Ou
01-06 4578
写在前面 这是笔者自学习自定义View以来，分享的第六篇效果，之前写过一篇打钩小动画，有兴趣的可以看看： Android自定义View分享——打钩动画 之前的博客笔者一般都会说，这是不太复杂但是“长得”还可以的效果，这次的分享也长得挺好看的，但是不敢说“不太复杂”。虽然没有用到很高级的API（这篇分享还是以canvas的各个API调用为主），但是在涉及到计算的地方，确实是有些复杂（繁琐）。让
高仿QQ音乐之旋转专辑图片的实现—仿留声机效果
SoulQw（思忆）
06-03 6321
前言：应个人毕业设计的需求，要做一款音乐播放器，其中一个页面效果就是仿照QQ音乐的播放界面做一个可旋转的圆形专辑图片，效果如下： 通过最终设计与实现，我们的效果如下：
Android自定义View实现打字机动画与音效
在Android开发中，自定义View的实现功能可以非常丰富，本文档将介绍如何通过创建一个名为`TypeTextView`的自定义View来实现打字机效果。打字机效果通常指的是文本逐字符地在界面上显示，仿佛是实时输入，这在某些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值