类似网易云播放进度条按钮简单实现

gali gali     2022-09-29     135

关键词:

1:先看效果图

  就是画了个外层的底色(一个圆),进度层颜色绘制(画了一个圆弧),中心的部分(这个就是个三角形或矩形)。

 

2:view的属性

 /*** view 环形的底色*/
 private int bgColor;
 /**** view 进度颜色 */
 private int progressColor;
 /*** view 的宽高,(宽高应当相等)*/
 private float viewHeight, viewWidth;
 /*** view 圆环的宽度*/
 private float viewRoundWidth;
 /*** view 的进度值,初始为0*/
 private int progressValue=0;
 /*** view 的进度最大值,默认为100 */
 private int progressMax=100;
 /**** 画笔*/
 private Paint paint;
 /**** 标识播放状态: 1是暂停  ; 2是播放*/
 private  int pauseOrPlay=1;

3:自定义的view属性   values\attrs.xml

 <declare-styleable name="ProgressButton">
        <attr name="bgColor" format="color"/>
        <attr name="progressColor" format="color"/>
        <attr name="viewWidth" format="dimension"/>
        <attr name="viewHeight" format="dimension"/>
        <attr name="viewRoundWidth" format="dimension"/>
</declare-styleable>

4:直接贴代码吧

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.util.Log;
import android.view.View;

/**
 * Created by guoxw on 2017/11/9.
 */

public class ProgressButton extends View {


    private static final String TAG = "ProgressButton";
    /*** view 环形的底色*/
    private int bgColor;
    /**** view 进度颜色 */
    private int progressColor;
    /*** view 的宽高,(宽高应当相等)*/
    private float viewHeight, viewWidth;
    /*** view 圆环的宽度*/
    private float viewRoundWidth;

    /*** view 的进度值,初始为0*/
    private int progressValue=0;
    /*** view 的进度最大值,默认为100 */
    private int progressMax=100;

    /**** 画笔*/
    private Paint paint;

    /**** 标识播放状态: 1是暂停  ; 2是播放*/
    private  int pauseOrPlay=1;

    public ProgressButton(Context context) {
        this(context, null);
    }

    public ProgressButton(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
       
    }

    public ProgressButton(Context context, @Nullable AttributeSet attrs, int deStyleAttr) {
        super(context, attrs, deStyleAttr);
        paint = new Paint();
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.ProgressButton);
        bgColor = array.getColor(R.styleable.ProgressButton_bgColor, Color.GRAY);
        progressColor = array.getColor(R.styleable.ProgressButton_progressColor, Color.RED);
        viewHeight = array.getDimension(R.styleable.ProgressButton_viewHeight, 20);
        viewWidth = array.getDimension(R.styleable.ProgressButton_viewWidth, 20);
        viewRoundWidth = array.getDimension(R.styleable.ProgressButton_viewRoundWidth, 2);
        array.recycle();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        /*** 画外层的圆环*/
        canvas.save();
        int centre = getWidth() / 2;
        Log.d(TAG, "onDraw: ----输出;center--"+centre);
        int radius = (int) (centre - viewRoundWidth/2);
        Log.d(TAG, "onDraw: ----输出;radius--"+radius);
        paint.setColor(bgColor); //设置圆环的颜色
        paint.setStyle(Paint.Style.STROKE); //设置空心
        paint.setStrokeWidth(viewRoundWidth); //设置圆环的宽度
        paint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, paint); //画出圆环
        canvas.save();
        /***画进度层颜色*/
        paint.setColor(progressColor);
        paint.setStrokeWidth(viewRoundWidth);
        RectF oval = new RectF(centre - radius, centre - radius, centre
                + radius, centre + radius);
        canvas.drawArc(oval, -90, 360 * progressValue / progressMax, false, paint);

        /*****绘制中心的暂停,播放标识*/
        int x=centre*2;
        if(pauseOrPlay==1){
            Path path = new Path();
            path.moveTo(3*x/8,3*x/8);
            path.lineTo(3*x/8,5*x/8);
            path.lineTo(5*x/8,4*x/8);
            paint.setColor(Color.RED);
            paint.setStyle(Paint.Style.FILL);
            paint.setStrokeWidth(1);
            canvas.drawPath(path,paint);
        }else if(pauseOrPlay==2){
            RectF rectF=new RectF(3*x/8,3*x/8,5*x/8,5*x/8);
            paint.setColor(Color.RED);
            paint.setStyle(Paint.Style.FILL);
            paint.setStrokeWidth(1);
            canvas.drawRect(rectF,paint);
        }

    }



    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    public int getProgressValue() {
        return progressValue;
    }

    public void setProgressValue(int progressValue) {
        if(progressValue<0){
            throw new IllegalArgumentException("progress not less than 0");
        }else if(progressValue>progressMax){
            this.progressValue=progressMax;
        }else{
            this.progressValue=progressValue;
        }

        postInvalidate();
    }

    public int getProgressMax() {
        return progressMax;
    }

    public void setProgressMax(int progressMax) {
        this.progressMax = progressMax;
    }

    public int getPauseOrPlay() {
        return pauseOrPlay;
    }

    public void setPauseOrPlay(int pauseOrPlay) {
        this.pauseOrPlay = pauseOrPlay;
        postInvalidate();
    }

xml使用

<com.example.playprogressbar.ProgressButton
        android:id="@+id/image"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp"
        android:layout_width="100dp"
        android:layout_height="100dp"
        app:viewHeight="100dp"
        app:viewWidth="100dp"
        app:bgColor="@color/colorAccent"
        app:progressColor="@color/colorPrimary"
        app:viewRoundWidth="10dp"
        />

  

 

5:加上示例代码 playprogressbar

 

链接: https://pan.baidu.com/s/1b1Rm3s 

6:顺便学习下怎么传到GitHub做成library

 

https://github.com/galibujianbusana/progressBtn1

  

vue项目实现音乐播放器-------设计播放进度条+播放控制按钮(代码片段)

...各位,今天我们来进行一个很炫酷的页面开发——播放器控制页面(srccomponentsPlay.vue),如下图:                            ... 查看详情

1600802038

android音乐播放器实现功能:实现了5首歌曲的播放,暂停,停止,上一首和下一首的切换;音乐播放进度条;歌曲播放时间显示;播放按钮对应着播放和暂停两个功能,点击时,不同的功能对应着不同的图标。音乐播放器界面以... 查看详情

播放器进度条组件

参考技术A播放器进度条由如下部分组成:中间的进度条由如下部分组成:根据以上的分析,首先我们需要知道歌曲播放的时长,以此来改变黄色进度条和进度条按钮的位置。歌曲播放使用的是audio控件,可以通过控件的timeupdate... 查看详情

在每个 TableViewcell 中播放带有进度条的音频

】在每个TableViewcell中播放带有进度条的音频【英文标题】:PlayingaudiowithprogressbarineachTableViewcell【发布时间】:2013-06-2410:04:38【问题描述】:有一个UITableView,我在我的每个单元格中放置了一个音频按钮,点击该按钮有一个进度... 查看详情

微信小程序学习网易云音乐歌曲详情页代码实现(代码片段)

这里记录一下做网易云小程序的音乐播放详情页面的代码。音乐播放界面的主要的重点有几个: 1、磁盘和摇杆的旋转效果,这里运用了css的动画属性 2、音乐播放和暂停,下一首/上一首等播放效果的实现 3、进度... 查看详情

在wpf中怎么实现像windowsmeidaplayer播放器那样的隐藏进度条

...dowsmeidaplayer下方的进度条那样我的意思是像windowsmeidaplayer播放器这样,当鼠标移动进来的时候(进度条,暂停按钮这些)显示,移动出去时候就隐藏建议你用BLEND来做这个动画,通过自定义控件http://blog.csdn.net/klo220/article/details/17... 查看详情

简单实用的进度条加载组件loader.js

...这个功能,首先要考虑怎样实现一个静态的进度条效果,类似下面这样的:这个倒是比较简单,两个div即可,bootstrap官方就提供有多种主题的进度条组件。如果自己要用,参照下别人的代码,写成自己的风格即可,实际上也非常... 查看详情

ue4音乐时长进度条

参考技术A1.创建UMG添加Slider(用来调节播放进度)和Text(显示总时长和当前时长)2.创建fnSecondsToText函数用来计算播放时长3.创建4个变量  Audio(音乐组件)bManualTimeChange(是否滑动) PlayingMovedToPercentage(进度条滑动... 查看详情

封装mediaplayer实现网易云音乐播放器

本文授权发布公众号【刘桂林】,星球【HiAndroid】此文后续将出配套视频,星球成员免费观看本文将来实现一个音乐播放器,播放File和播放Url实际上是一致的,我会封装好所需文件便于你直接阅读代码和使用首先... 查看详情

unity简单的进度条实现(代码片段)

制作进度条所需的资源:用以载入进度条显示的场景进度条背景以及进度条本身(颜色区别)展示百分制进度情况的Text文本需要载入的场景(这里使用的是自带场景)载入时的场景布局:要将Load的ImageType修改为Filled,FillMethod修... 查看详情

js代码实现视频进度条点到哪个位置就播放那个位置的视频。进度条是用css样式另做的。

...处进度条的百分比。2.用这个百分比和时长相乘,3.设置播放位置(currentTime)4.播放追问谢谢本回答被提问者采纳 参考技术B用currentTime可以实现追问怎么写求代码 参考技术C我觉得你应该先把video标签的js内置方法和属性先看一下... 查看详情

alpha版本测试报告

...示通过测试,N表示未通过测试。功能描述效果测试结果播放按钮点击播放音乐音乐播放Y暂停按钮点击暂停音乐音乐暂停Y下一首按钮点击播放下一首音乐切换下一首音乐Y上一首按钮点击播放上一首音乐切换上一首音乐Y添加本地... 查看详情

阿里云aliplayer高级功能介绍:进度条标记(代码片段)

...时间和内容的获取,基本UI如下图所示:接口和属性介绍播放器提供了progressMakers属性,是一个数组类型,每一条记录包含offset时间和text打点的内容,还可以包含其他属性,此属性用于告诉播放器进度条打点记录,记录内容属性... 查看详情

基于我们3组的网易云app制作,找的aplayerh5音乐播放器

APlayer是一个非常漂亮的HTML5音频播放器,UI参考自网易云音乐外链播放器。它将audio标签封装,并结合CSS制作出漂亮的播放器UI,它支持设置歌名、歌手和歌词,可以设置是否自动播放,支持缩略图,支持播放进度以及设置播放源... 查看详情

chrome手机版全屏播放加载进度条

chrome手机版全屏播放加载进度条手机要看视频网页全屏的话,可以将手机设置为横屏就可以播放了。在你的手机设置那里,选择显示。在显示的下一级菜单中,选中允许自动横屏,下次在网页上看视频就可以全屏了。如果有一些... 查看详情

网易云音乐锁屏界面效果实现

最终效果:完整的实现思路:App如果需要在锁屏界面上显示相关的信息和按钮,必须先开启远程控制事件(RemoteControlEvent),否则锁屏界面只显示滑动解锁.实现锁屏界面信息,将歌曲的相关信息更新到锁屏界面上实现锁屏界面的事件处理,... 查看详情

实现像网易云音乐播放列表那样的弹出型dialog

如图所示是点击Test之后的弹出的Dialog (请无视我工程的命名)publicclassMyDialogextendsDialog{ContextmContext;publicMyDialog(Contextcontext){super(context,R.style.MyDialog);mContext=context;}@OverrideprotectedvoidonCreate 查看详情

vue仿网易云音乐播放器界面(代码片段)

...要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能。 前端简单的使用vue组件和audio标签实现了播放器界面,后端则是调用网易云的API获取对应的歌曲信息。 废话不... 查看详情