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

最近在学习自定义控件,项目中用到了一个效果,做下整理。刚入门自定义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();
    }
}

  }
}

你可能感兴趣的:(控件)