自定义view之扇形统计图

首先你需要在自己的的res目录下创造一个attrs.xml的文件，然后在里面写自定义view的属性例如

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="RoundBar">
        <attr name="roundColor" format="color"/>
        <attr name="roundWidth" format="dimension"></attr>
    </declare-styleable>
</resources>

然后你的layout可以这样写

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    android:layout_height="match_parent"
         android:layout_width="match_parent"
         android:orientation="vertical"
         xmlns:android="http://schemas.android.com/apk/res/android"
         xmlns:app="http://schemas.android.com/apk/res-auto">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Test"/>

         <FrameLayout
             android:layout_width="match_parent"
             android:layout_height="0dp"
             android:layout_weight="1">
             <com.example.hasee.customviewdemo.CustomView
                 android:id="@+id/custom"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 app:roundColor="#ff1ff41f"
                 app:roundWidth="2dp"/>
         </FrameLayout>
     </LinearLayout>

在引用自定义控件的时候注意写自定义控件类的绝对路径，你也可以看到在attrs定义的属性，我们已经给他赋值了，当然也别忘了，在xml的头加上这句，声明一下我们属性里的app是什么

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

CustomView的代码

package com.example.hasee.customviewdemo;

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

/**
 * Created by hasee on 2016/10/31.
 */
public class CustomView extends View {

    private float mBorderWidth;
    private int mBorderColor;
    private ProgressBean progressBean[] = {new ProgressBean(0x66555555,2)};
    private int sum;
    private RectF mOval;
    private Paint mPaint;

    private RectF mBounds;
    private float width;
    private float height;
    float radius;
    float smallLength;
    float largeLength;

    public CustomView(Context context) {
        super(context);
        init();
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //  取得自定义控件
        TypedArray typedArray = context.getTheme()
                .obtainStyledAttributes(
                        attrs,
                        R.styleable.RoundBar
                        , 0, 0);

        //  取得自定义控件的属性
        try {
            mBorderColor = typedArray.getColor(R.styleable.RoundBar_roundColor, 0xff000000);
            mBorderWidth = typedArray.getDimension(R.styleable.RoundBar_roundWidth, 2);
        } finally {
            //  回收控件
            typedArray.recycle();
        }

        init();
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //  其实代码写在第三个构造函数里也可以
    }

    private void init() {
        //  新建画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        //  空心
        mPaint.setStyle(Paint.Style.STROKE);
        //  边缘宽度
        mPaint.setStrokeWidth(mBorderWidth);
        //  颜色
        mPaint.setColor(mBorderColor);
        //  总和初始化
        sum = 100;
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mBounds = new RectF(getLeft(), getTop(), getRight(), getBottom());

        width = mBounds.right - mBounds.left;
        height = mBounds.bottom - mBounds.top;

        if (width < height) {
            radius = width / 4;
        } else {
            radius = height / 4;
        }

        smallLength = 10;
        largeLength = 20;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 画最外层的大圆环
         */
        int centre = getWidth()/2; //获取圆心的x坐标
        int radius = (int) (centre/2); //圆环的半径
        mPaint.setColor(mBorderColor);
        mPaint.setStyle(Paint.Style.STROKE); //设置空心
        mPaint.setStrokeWidth(2); //设置圆环的宽度
        mPaint.setAntiAlias(true);  //消除锯齿
        canvas.drawCircle(centre, centre, radius, mPaint); //画出圆环

        /**
         * 画圆弧 ，画圆环的进度
         */
        float startAngle = 0;
        float sweepAngle = 0;
        for(ProgressBean bean:progressBean){
            //设置进度是实心还是空心
            mPaint.setStrokeWidth(mBorderWidth); //设置圆环的宽度
            mPaint.setColor(bean.getColor());  //设置进度的颜色
            mOval = new RectF(centre - radius,centre - radius, centre
                    + radius,centre + radius);  //用于定义的圆弧的形状和大小的界限
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            sweepAngle = 360*bean.getAmount()/sum;
            canvas.drawArc(mOval, startAngle,sweepAngle, true, mPaint);  //根据进度画圆弧
            startAngle = startAngle + sweepAngle;
        }
    }

    //  UI调用该方法向view传入需求的扇形
    public void setmDegree(int sum,ProgressBean...bean) {
        this.sum = sum;
        this.progressBean = bean;
        //  调用该方法从新绘制view
        postInvalidate();
    }
}

progressBean的代码

public class ProgressBean {
    private int color;
    private int amount;

    public ProgressBean(int color,int amount){
        this.amount = amount;
        this.color = color;
    }

    public int getColor() {
        return color;
    }

    public void setColor(int color) {
        this.color = color;
    }

    public int getAmount() {
        return amount;
    }

    public void setAmount(int amount) {
        this.amount = amount;
    }
}

调用样例

        CustomView customView = (CustomView) findViewById(R.id.custom);
        final int yellow = getResources().getColor(R.color.colorYellow);
        final int red = getResources().getColor(R.color.colorRed);
        customView.setmDegree(10,new ProgressBean(yellow,9),new ProgressBean(red,8));

 

目前其实有个bug就是当你的amount总和大于sum时之前的扇形会被覆盖掉，以后会增加一些check禁止用户这么传值。。。恩就是这样