自定义两端圆角且图片为背景的进度条

最新推荐文章于 2020-11-17 14:50:55 发布

Huangyong_csdn

最新推荐文章于 2020-11-17 14:50:55 发布

阅读量535

点赞数

CC 4.0 BY-SA版权

分类专栏：安卓开发笔记自定义View 文章标签：控件

本文链接：https://blog.youkuaiyun.com/huang_yong_/article/details/62894439

安卓开发笔记同时被 2 个专栏收录

34 篇文章

订阅专栏

自定义View

7 篇文章

订阅专栏

本文介绍了如何自定义一个两端带有圆角的进度条，使用shader实现图片平铺效果，结合canvas、paint和rectF创建圆角矩形。适合初学者了解自定义View，代码简洁易懂，可以从github链接下载源码进行学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在学习自定义控件，项目中用到了一个效果，做下整理。刚入门自定义view的同学可以看下，共同学习，非常简单，适合扫盲。

用到的知识点：

shader 实现图片平铺效果
canvas 画布
paint 画笔
rectF 圆角矩形
因为代码比较简单，直接贴出来好了，参考了gayhub一个大神的写法，做了下修改。方便移植。

这里下载源码：https://github.com/hiliving/RoundCornerImageProgressBar

package com.a4kgarden.mysimpleprogress;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;

/**
 * Created by HY on 2017/3/6.
 */

public class RadiusProgress extends View {
    private Context context;
    /**
     * 背景填充图
     */
    private Bitmap mBackgroundBitmap;
    /**
     * 背景进度条未到达时颜色
     */
    private int baColor;
    /**
     * 当前的进度，为0-100
     */
    private int progress;
    /**
     * 画笔
     */
    private Paint paint;
    /**
     * 用于图片平铺
     */
    private BitmapShader progShader;
    /**
     * 圆角半径
     */
    private int mRadius;

    public RadiusProgress(Context context) {
        this(context, null);
        this.context = context;
    }

    public RadiusProgress(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
        this.context = context;
    }

    public RadiusProgress(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;
        TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.RadiusProgress);
        mBackgroundBitmap = BitmapFactory.decodeResource(getResources(), array.getResourceId(R.styleable.RadiusProgress_thumb_src, R.drawable.seek_thumb));
        baColor = array.getColor(R.styleable.RadiusProgress_bgColor, Color.GRAY);
        mRadius = array.getDimensionPixelSize(R.styleable.RadiusProgress_radius, (int) TypedValue.applyDimension(
                TypedValue.COMPLEX_UNIT_PX, 20, getResources().getDisplayMetrics()));
        progShader = new BitmapShader(mBackgroundBitmap, Shader.TileMode.REPEAT,
                Shader.TileMode.CLAMP);
        setProgress(progress);
        array.recycle();
        paint = new Paint();
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        drawProgress(canvas, baColor);
    }

    private void drawProgress(Canvas canvas, int baColor) {
        //绘制未填充进度条
        paint.reset();
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setColor(baColor);
        RectF backgroundRectF = new RectF(0, 0, getWidth(), getHeight());
        canvas.drawRoundRect(backgroundRectF, mRadius, mRadius, paint);

        //绘制填充条
        paint.setAntiAlias(true);
        paint.setDither(true);
        paint.setShader(progShader);
        float mprogress = (float) (progress / 100.0f * getWidth());//实际进度
        RectF fillRectF = new RectF(0, 0, mprogress, getHeight());
        canvas.drawRoundRect(fillRectF, mRadius, mRadius, paint);
    }

    /**
     * dp转px
     *
     * @param dpValue
     * @return
     */
    public float dip2px(float dpValue) {
        final float scale = this.context.getResources().getDisplayMetrics().density;
        return dpValue * scale + 0.5f;
    }

    public void setProgress(int progress) {
        this.progress = progress;
        invalidate();
    }
}

  }
}