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

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

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

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

用到的知识点:

  1. shader 实现图片平铺效果
  2. canvas 画布
  3. paint 画笔
  4. 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();
    }
}

  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值