Android 自定义View实现带进度的下载按钮

最新推荐文章于 2024-05-07 18:00:19 发布
最新推荐文章于 2024-05-07 18:00:19 发布
阅读量2.2k 收藏 4
点赞数
分类专栏： android 自定义View 文章标签： Android 自定义View 带进度条下载按钮
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a512337862/article/details/80612225
版权

转载请注明出处：https://blog.csdn.net/a512337862/article/details/80612225

因为项目需要，所以用自定义View实现了带进度条的下载按钮。效果图如下：
这里写图片描述

思路

主要是分为三个阶段：未下载，正在下载，下载结束（成功/失败）。根据不同的进度来判断不同的状态，从而绘制不同的UI。

代码

attr.xml

    <declare-styleable name="DownloadProgressButton">
        <attr name="textColor" format="color" />
        <attr name="textSize" format="dimension" />
        <attr name="progressColor" format="color" />
        <attr name="bottomColor" format="color" />
        <attr name="topColor" format="color" />
        <attr name="progressWidthPercent" format="integer" />
    </declare-styleable>

DownloadProgressButton.java

/**
 * Author ： BlackHao
 * Time : 2018/5/18 10:25
 * Description : 自定义带圆形进度条下载控件
 * Remarks :
 */

public class DownloadProgressButton extends View implements View.OnClickListener {

    /**
     * 未下载
     */
    public static final int READY_TO_DOWNLOAD = 0;
    /**
     * 正在下载
     */
    public static final int IS_DOWNLOADING = 1;
    /**
     * 下载完成
     */
    public static final int FINISH_DOWNLOAD = 2;
    /**
     * 下载失败
     */
    public static final int FAIL_DOWNLOAD = 3;
    //进度最大值
    private int max;
    //当前进度
    private int progress;
    //进度条的颜色
    private int progressColor;
    //进度条宽度百分比
    private int progressWidthPercent;
    //底层背景色
    private int bottomColor;
    //最上层圆的颜色
    private int topColor;
    //进度文本的颜色
    private int textColor;
    //进度文本的字体大小
    private int textSize;
    //进度条画笔
    private Paint progressPaint;
    //文本画笔
    private Paint textPaint;
    //用来显示文本的矩形
    private Rect textRect;
    //当前模式
    private int downloadModel = 0;
    //
    private ProgressChangeListener clickListener;
    private Path path;

    public DownloadProgressButton(Context context) {
        this(context, null, 0);
    }

    public DownloadProgressButton(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DownloadProgressButton(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initDefault();
        TypedArray a = context.getTheme().obtainStyledAttributes(attrs, R.styleable.DownloadProgressButton, defStyleAttr, 0);
        int n = a.getIndexCount();
        for (int i = 0; i < n; i++) {
            int attr = a.getIndex(i);
            if (attr == R.styleable.DownloadProgressButton_topColor) {//最上层圆的颜色,默认绿色
                topColor = a.getColor(attr, Color.TRANSPARENT);

            } else if (attr == R.styleable.DownloadProgressButton_textColor) {//进度文本的颜色
                textColor = a.getColor(attr, Color.BLACK);

            } else if (attr == R.styleable.DownloadProgressButton_progressColor) {//进度条颜色
                progressColor = a.getColor(attr, Color.GREEN);

            } else if (attr == R.styleable.DownloadProgressButton_bottomColor) {//背景色
                bottomColor = a.getColor(attr, Color.GREEN);

            } else if (attr == R.styleable.DownloadProgressButton_textSize) {//进度文本的大小
                // 默认设置为16sp，TypeValue也可以把sp转化为px
                textSize = a.getDimensionPixelSize(attr, (int) TypedValue.applyDimension(
                        TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));

            } else if (attr == R.styleable.DownloadProgressButton_progressWidthPercent) {//进度条宽度占总宽度的百分比
                progressWidthPercent = a.getInteger(attr, 50);
            }
        }
        //Recycles the TypedArray
        a.recycle();
        /*
         * 初始化画笔
         */
        //文本画笔
        textPaint = new Paint();
        textPaint.setTextSize(textSize);
        textPaint.setColor(textColor);
        //设置抗锯齿
        textPaint.setAntiAlias(true);
        //进度条画笔
        progressPaint = new Paint();
        //设置抗锯齿
        progressPaint.setAntiAlias(true);
        //初始化textRect
        textRect = new Rect();
        path = new Path();
        //
        setOnClickListener(this);
    }

    /**
     * 设置默认值
     */
    private void initDefault() {
        //最上层默认为透明
        topColor = Color.TRANSPARENT;
        //字体颜色默认为黑色
        textColor = Color.BLACK;
        //进度条默认为绿色
        progressColor = Color.GREEN;
        //背景为灰色
        bottomColor = Color.GRAY;
        //字体大小16
        textSize = 16;
        //进度0
        progress = 0;
        //最大进度100
        max = 100;
        //进度条宽度比例50
        progressWidthPercent = 50;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //canvas的宽高
        int width = getWidth();
        int height = getHeight();
        //中点
        int centerX = getWidth() / 2;
        int centerY = getHeight() / 2;
        //获取宽高中较短的作为底层圆的半径
        int bottomRadius = width > height ? getHeight() / 2 : getWidth() / 2;
        //下载边框宽度
        int circleWidth = bottomRadius / 5;
        switch (downloadModel) {
            case READY_TO_DOWNLOAD:
                //绘制下载按钮
                progressPaint.setColor(Color.GRAY);
                progressPaint.setStrokeWidth(circleWidth);
                //绘制圆
                progressPaint.setStyle(Paint.Style.STROKE);
                canvas.drawCircle(centerX, centerY, bottomRadius - circleWidth / 2, progressPaint);
                //绘制三角箭头
                progressPaint.setStyle(Paint.Style.FILL);
                canvas.drawLine(centerX, centerY, centerX, centerY - bottomRadius / 2, progressPaint);
                //绘制三角形
                path.reset();
                path.moveTo(centerX - bottomRadius / 2, centerY);// 此点为多边形的起点
                path.lineTo(centerX + bottomRadius / 2, centerY);
                path.lineTo(centerX, centerY + bottomRadius / 2);
                path.close(); // 使这些点构成封闭的多边形
                canvas.drawPath(path, progressPaint);
                break;
            case IS_DOWNLOADING:
                //进度条宽度占的比例
                double scale = progressWidthPercent / 100.00;
                //这四个参数用来drawText以及drawArc
                int top = centerY - bottomRadius;
                int bottom = centerY + bottomRadius;
                int left = centerX - bottomRadius;
                int right = centerX + bottomRadius;
                //显示的进度
                int showProgress = progress * 100 / max;
                //绘制最底层的大圆(空心圆)
                progressPaint.setStyle(Paint.Style.STROKE);
                progressPaint.setColor(bottomColor);
                //大圆的宽度刚好等于进度条的宽度
                int strokeWidth = (int) (bottomRadius * scale);
                progressPaint.setStrokeWidth(strokeWidth);
                //这里要考虑到strokeWidth的长度
                canvas.drawCircle(centerX, centerY, bottomRadius - strokeWidth / 2, progressPaint);
                //根据进度绘制进度条
                progressPaint.setStyle(Paint.Style.STROKE);
                progressPaint.setStrokeWidth(strokeWidth);
                progressPaint.setColor(progressColor);
                //起始角度为-90度才是从正上方开始画
                canvas.drawArc(left + strokeWidth / 2, top + strokeWidth / 2, right - strokeWidth / 2, bottom - strokeWidth / 2,
                        -90, 360 * showProgress / 100, false, progressPaint);
                //绘制最上层的圆(实心圆)
                progressPaint.setStyle(Paint.Style.FILL);
                int topRadius = (int) (bottomRadius * (1 - scale));
                progressPaint.setColor(topColor);
                //设置边框宽度
                progressPaint.setStrokeWidth(0);
                canvas.drawCircle(centerX, centerY, topRadius, progressPaint);
                //在圆的中央显示进度文本
                textRect.set(left, top, right, bottom);
                drawTextOnRect(canvas, textRect, showProgress + " %");
                break;
            case FINISH_DOWNLOAD:
                //绘制下载完成
                progressPaint.setColor(Color.GREEN);
                progressPaint.setStrokeWidth(circleWidth);
                //绘制圆
                progressPaint.setStyle(Paint.Style.STROKE);
                canvas.drawCircle(centerX, centerY, bottomRadius - circleWidth / 2, progressPaint);
                //绘制完成符号（√）
                progressPaint.setStyle(Paint.Style.FILL);
                canvas.drawLine(centerX, centerY + bottomRadius / 2, centerX - bottomRadius / 2, centerY, progressPaint);
                canvas.drawLine(centerX - circleWidth / 2, centerY + bottomRadius / 2, centerX + bottomRadius / 2, centerY - bottomRadius / 2, progressPaint);
                break;
            case FAIL_DOWNLOAD:
                //下载失败
                progressPaint.setColor(Color.RED);
                progressPaint.setStrokeWidth(circleWidth);
                //绘制圆
                progressPaint.setStyle(Paint.Style.STROKE);
                canvas.drawCircle(centerX, centerY, bottomRadius - circleWidth / 2, progressPaint);
                //绘制完成符号（X）
                progressPaint.setStyle(Paint.Style.FILL);
                canvas.drawLine(centerX - bottomRadius / 2, centerY - bottomRadius / 2, centerX + bottomRadius / 2, centerY + bottomRadius / 2, progressPaint);
                canvas.drawLine(centerX - bottomRadius / 2, centerY + bottomRadius / 2, centerX + bottomRadius / 2, centerY - bottomRadius / 2, progressPaint);
                break;
        }

    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        //计算View的宽高
        int width = widthSize, height = heightSize;
        if (widthMode == MeasureSpec.EXACTLY) {
            //指定大小或者match_parent
            width = widthSize;
        } else if (widthMode == MeasureSpec.AT_MOST) {
            //wrap_content
            width = 100;
        }

        if (heightMode == MeasureSpec.EXACTLY) {
            //指定大小或者match_parent
            height = heightSize;
        } else if (heightMode == MeasureSpec.AT_MOST) {
            //wrap_content
            height = 100;
        }
        setMeasuredDimension(width, height);
    }

    /**
     * 在指定矩形中间drawText
     *
     * @param canvas     画布
     * @param targetRect 指定矩形
     * @param text       需要绘制的 Text
     */
    private void drawTextOnRect(Canvas canvas, Rect targetRect, String text) {
        Paint.FontMetricsInt fontMetrics = textPaint.getFontMetricsInt();
        // 获取baseLine
        int baseline = targetRect.top + (targetRect.bottom - targetRect.top - fontMetrics.bottom + fontMetrics.top) / 2 - fontMetrics.top;
        // 下面这行是实现水平居中，drawText对应改为传入targetRect.centerX()
        textPaint.setTextAlign(Paint.Align.CENTER);
        canvas.drawText(text, targetRect.centerX(), baseline, textPaint);
    }

    public int getProgress() {
        return progress;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        if (progress == max) {
            downloadModel = FINISH_DOWNLOAD;
            //完成回调结果
            if (clickListener != null) {
                clickListener.onSuccess(this);
            }
        } else if (progress == 0) {
            downloadModel = READY_TO_DOWNLOAD;
        } else if (progress > 0 && progress < max) {
            downloadModel = IS_DOWNLOADING;
        }else {
            downloadModel = FAIL_DOWNLOAD;
            //完成回调结果
            if (clickListener != null) {
                clickListener.onFailed(this);
            }
        }
        postInvalidate();
    }

    public int getProgressColor() {
        return progressColor;
    }

    public void setProgressColor(int progressColor) {
        this.progressColor = progressColor;
        postInvalidate();
    }

    public int getBottomColor() {
        return bottomColor;
    }

    public int getProgressWidthPercent() {
        return progressWidthPercent;
    }

    public void setProgressWidthPercent(int progressWidthPercent) {
        this.progressWidthPercent = progressWidthPercent;
        postInvalidate();
    }

    public void setBottomColor(int bottomColor) {
        this.bottomColor = bottomColor;
        postInvalidate();
    }

    public int getTopColor() {
        return topColor;
    }

    public void setTopColor(int topColor) {
        this.topColor = topColor;
        postInvalidate();
    }

    public int getTextColor() {
        return textColor;
    }

    public void setTextColor(int textColor) {
        this.textColor = textColor;
        postInvalidate();
    }

    public int getTextSize() {
        return textSize;
    }

    public void setTextSize(int textSize) {
        this.textSize = textSize;
        postInvalidate();
    }

    public void setClickListener(ProgressChangeListener clickListener) {
        this.clickListener = clickListener;
    }

    @Override
    public void onClick(View v) {
        if (clickListener != null) {
            clickListener.onPbClick(v, downloadModel);
        }
    }

    /**
     * 点击/下载完成（失败） 回调
     */
    public interface ProgressChangeListener {
        //点击监听
        void onPbClick(View view, int model);
        //下载成功
        void onSuccess(View view);
        //下载失败
        void onFailed(View view);
    }
}

结语

1.源码github地址 : https://github.com/LuoChen-Hao/BlackHaoCustomView

Black_Hao
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android自定义控件之带下载进度的下载按钮DownloadProgressButton
鲁鲁晓生
02-23 7220
前言最近要用到一个带下载进度的按钮，各种搜索了一波，很抱歉（/TДT)/ ，实在没有发现自己想要的效果，没办法只能自己尝试实现了一个了。
Android实现下载按钮
m0_65627943的博客
02-11 418
点击下载按钮，按钮文本变成“正在下载中...”。点击下载按钮显示“开始下载”小提示；
Android基础--自定义ProgressBar
最新发布
star_nwe的博客
05-07 699
ProgressBar为进度条控件，有Indeterminate不确定模式和Determinate确定模式两种：①不确定模式通常使用圆形循环动画来表示类似“正在加载”的过程，进度无法确定，具有不确定性；②确定模式是通过将已发生的进度与总量的百分比显示在进度条上，比如下载或上传文件的数量等。
Android实现显示进度条下载APP
qq_45910820的博客
05-04 1344
Android中有一个进度对话框ProgressDialog，可以实现等待进度和具有具体数值进度的显示。这里我用的okhttp3来发送请求实现在线更新。
Android开发丶一步步教你实现okhttp带进度的列表下载文件功能
u014078990的博客
06-24 4766
大家好，我又回来了！ 标题好像又起的不知所云，但是貌似也想不起更好的标题，看看效果图 现在有个文件列表，每个列表标签都有一个下载的按钮，点击以下载对应的文件，如果已下载则显示“已下载”，反之显示“点击下载”。 首先我们使用okhttp框架下载文件，并且使用progressDialog显示下载进度，至于界面主列表，则是高端大气上档次的RecyclerView，啥？你还告诉我你用listVi...
Android之---下载带进度条（okhttp）
qq_28260501的博客
10-06 1140
Android之—下载带进度条（okhttp） Android之—下载带进度条（okhttp） 一、布局文件添加进度条 <ProgressBar android:id="@+id/progressbar" android:layout_width="match_parent" android:layout_height="wrap_conten...
android 自定义view控件带图标，进度，文字
weixin_45407364的博客
09-02 1031
android自定义view控件流程（圆环控件带图标，文字，进度）
Android自定义View——圆形进度式按钮
08-16
总之，自定义View能够帮助开发者实现独特的UI设计，而"Android自定义View——圆形进度式按钮"是一个很好的实践案例，它结合了基本的按钮功能和进度反馈，同时还提供了额外的状态指示。通过学习和理解这种自定义View...
Android自定义View实现音频播放圆形进度条
08-27
本文详细介绍了Android自定义View实现音频播放圆形进度条，该进度条可以实时显示音频播放的进度。下面是实现该进度条的主要知识点： 一、自定义View的成员变量 在自定义View中，我们需要定义一些成员变量，例如： ...
Android自定义View之圆形进度条式按钮
09-01
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求定制UI组件。本文将详细介绍如何创建一个圆形进度条式按钮，该按钮在进度完成前显示两种状态：未开始和暂停。首先，我们来看一下这个自定义...
Android自定义View弧线进度控件
09-02
本文将详细讲解如何创建一个弧线进度控件，即Android自定义View弧线进度控件。这个控件在点击开始按钮后，会通过动画展示逐渐增加的进度，为用户提供直观的反馈。 首先，我们需要创建一个新的Java类，让它继承自...
Android-DownLoadProgressButton下载显示进度按钮控件
08-12
DownLoadProgressButton：下载显示进度按钮控件
带动画和下载进度的按钮
04-25
圆形按钮,点击播放动画并实时更新进度
Android点击下载时候Button背景变化下载进度条Demo
12-15
搜刮过来的资源，挺不错的自定义下载按钮进度条，借花献佛了
android文件下载进度条实现
03-25
源码 博文链接：https://xiehongdong.iteye.com/blog/1157178
自定义view实现下载进度button
Xiemarc的博客
07-19 730
先看效果图 这里有个小问题。完成的时候应该显示 完成。这个随意了下面直接开撸： public class ProgressButton extends Button { private boolean mProgressEnable; private long mMax = 100; private long mProgress; private Drawab
android 下载进度条代码实现,Android 仿vivo商店下载进度条
weixin_39851457的博客
05-26 346
vivo商店在下载应用的时候，底部有一个圆角矩形的下载进度条，中间有一个进度文字，而且进度和文字交汇的时候，交汇部分的文字会从蓝色边为白色，会有一种一半白色字，一半蓝色字的效果。最终效果和对比vivo商店效果vivo应用商店下载效果.png最终效果.gif分析1 - 计算进度进度计算就比较简单了，我们通过复写onSizeChanged()方法，获取到控件的宽后，先计算当前进度百分比，再将百分比乘以...
Android自定义View之可随时暂停、开启的圆形下载进度条
风一样的男人
08-29 3580
请尊重个人劳动成果，转载注明出处，谢谢！ http://blog.csdn.net/xiaxiazaizai01 这是一个一言不合就手撸一个自定义View的任性时代，因此最近一段时间一直在学习自定义View相关的知识，也看了很多与此相关的博客，有句话叫做不要重复造轮子，别人写好的直接拿过来改吧改吧，能用就行，但是，要想像那些任性的大牛一样，分分钟撸一个自定义View，就得不断的重复造轮子，学
Android 自定义View实现圆形加载进度条
Android_Gt
03-06 3263
Android 自定义view圆形加载进度条

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值