自定义View————圆环和圆环进度条

可能小伙伴们感觉自定义view很高深，其实大家用多了别人的轮子，研究别人的轮子，自己也要学着造轮子，那就用最简单的练练手，教小伙伴们自定义view的一些步骤，这可能是小伙伴们最需要的。

自定义圆环

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;

import org.w3c.dom.Attr;

import example.com.mvpdesign.R;

/**
 * Created by qiang.lin
 */
public class RingView extends View {
    //画笔
    private Paint mPaint;
    //圆环的颜色
    private int ringColor;

    private int width;
    private int high;
    private int center;

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

    public RingView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
     //看了很多自定义view，也用了很多自定义view，View是会自动//调用带有两个参数的构造器，但是我看了大神的的代码，基本上都是指//向三个构造器。
    public RingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //获取自定义的属性，并赋予初始值。
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RingView);
        ringColor=  typedArray.getColor(R.styleable.RingView_ringColor, Color.RED);
        textSize=  typedArray.getDimensionPixelSize(R.styleable.RingView_ringText, 20);
        typedArray.recycle();
        //初始化画笔
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setDither(true);
        mPaint.setAntiAlias(true);
    }
    //这里获取canvas的高度和宽度，没有使用到，但是经常会使用到，可以研究下。
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        center = getWidth() / 2;
        width = getWidth();
        high = getHeight();

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //半径
        int innerCircle=60;
        //圆环宽度
        int ringWidth=30;
        //绘制圆环
        mPaint.setColor(ringColor);
        //画笔的笔触是在宽度的中间，所以后面需要
      //  ringWidth/2，这个才是真实半径
        mPaint.setStrokeWidth(ringWidth);
        canvas.drawCircle(200,200,innerCircle+ringWidth,mPaint);
        //重绘ondraw方法，这个方法就是相当于刷新
        invalidate();
    }

    /**
     * 根据手机的分辨率从 dp 的单位 转成为 px(像素)
     */
    public static int dip2px(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
}

配置文件

    <declare-styleable name="RingView">
        <attr name="ringColor" format="color"></attr>
        <attr name="ringText" format="dimension"></attr>
    </declare-styleable>

配置文件在最顶部加上这句

  xmlns:app="http://schemas.android.com/apk/res-auto"

这里一个自定义的圆环就完成了。下面来看看自定义圆环进度条。

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.view.View;

import example.com.mvpdesign.R;

/**
 * Created by qiang.lin
 */
public class RoundProgressBar extends View {
    private int textSize;
    private int textColor;
    private int ringColor;
    private int progressColor;
    private int width;
    private int high;
    private Paint mPaint;
    private int progress=50;
    private int max=100;

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

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

    public RoundProgressBar(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //初始化自定义属性
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.RoundProgressBar);
        textSize = typedArray.getDimensionPixelSize(R.styleable.RoundProgressBar_textSize, 50);
        textColor = typedArray.getColor(R.styleable.RoundProgressBar_textColor, Color.RED);
        ringColor = typedArray.getColor(R.styleable.RoundProgressBar_ringColors, Color.CYAN);
        progressColor = typedArray.getColor(R.styleable.RoundProgressBar_progessColor, Color.BLUE);
        typedArray.recycle();
        //初始化画笔
        mPaint = new Paint();


    }


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        high = getHeight();
        width = getWidth();
        //内容的半径
//        center=getWidth()/2;
    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画背景的圆环,获取的是画布的宽度
        int roundWidth = 10;
        int center = getWidth() / 2;//圆心
        int radius = center - roundWidth /2-5;
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setColor(ringColor);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(roundWidth);
        canvas.drawCircle(center, center, radius, mPaint);
        //画进度条变分比。
        mPaint.setStrokeWidth(0);
        mPaint.setColor(textColor);
        mPaint.setTextSize(textSize);
        mPaint.setTypeface(Typeface.DEFAULT_BOLD);
        int percent = (int) (((float) progress / (float) max) * 100);
        float textWidth = mPaint.measureText(percent + "%");
        if(percent!=0){
            canvas.drawText(percent+"%",center-textWidth/2,center+textSize/2,mPaint);
        }

        //画进度条
        mPaint.setStrokeWidth(roundWidth);
        mPaint.setColor(progressColor);
        //画圆形的区域。
        RectF oval=new RectF(center-radius,center-radius,center+radius,center+radius);

        mPaint.setStyle(Paint.Style.STROKE);
        canvas.drawArc(oval, 90, -360 * progress / max, false, mPaint);  //根据进度画圆弧

        invalidate();

    }

    public int getTextSize() {
        return textSize;
    }
//通过代码来设置字体大小。
    public void setTextSize(int textSize) {
        this.textSize = textSize;
        //重新绘制，走ondraw()
        invalidate();
    }
}

<declare-styleable name="RoundProgressBar">
    <attr name="textSize" format="dimension"></attr>
    <attr name="ringColors" format="color"></attr>
    <attr name="progessColor" format="color"></attr>
    <attr name="ringWidth" format="dimension"></attr>
    <attr name="textColor" format="color"></attr>
</declare-styleable>

完事，自定义View——圆环进度条就这样完成了。
总结：自定义view步骤：
1、继承View
2、重写onMeasure和onDraw方法。
3、在调用三个参数构造器，在里面做初始化自定义属性，前提需在attrs xml文件下创建自定义属性。并实例化Paint
4、在onDraw方法里开始你的画画，一大堆数学问题等着你，就是算。
5、设置你的属性的get和set方法，然后再set方法里 invalidate();，好的自定义View就这样完成了。

建议：有些系统类可能大家不是很清楚，可以上网百度，或者直接进入源码，看看源码是怎么讲的，用多了就熟了。

以上如有不恰当之处，评论可给予提出。