Android 自訂View - 餅圖

標籤：螢幕   gets   public   ons   ble   attrs   ddl   dimens   最大   

　　最近有看到一個自訂等分圓的View，自己嘗試做了一個類似的，如（1）所示：

圖（1）

　　實現方法：自訂View-ColorCircle，需要的知道的值有圓的半徑，等分個數以及扇形顏色。

    /**     * 定義幾種顏色     */    private static int COLOR[] = {Color.RED, Color.BLUE, Color.GREEN, Color.YELLOW, Color.BLACK};    /**     * 圓等分預設數目     */    private static int DIV_SIZE = 3;    private Paint mPaint; 　　/** 
　　　* 圓預設半徑 
　　　*/    private static final int DEFAULT_RADIUS = 200;    private int mRadius = DEFAULT_RADIUS;
    public ColorCircle(Context context) {        this(context, null);    }    public ColorCircle(Context context, @Nullable AttributeSet attrs) {        this(context, attrs, 0);    }    public ColorCircle(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {        super(context, attrs, defStyleAttr);        mPaint = new Paint();        mPaint.setStyle(Paint.Style.FILL);    }

　　在onMeasure中我們需要根據widthMeasureSpec & heightMeasureSpec重新計算ColorCircle View的尺寸以及圓的半徑（因為預設圓的直徑可能會大於View的高 or 寬）。

    @Override    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {        super.onMeasure(widthMeasureSpec, heightMeasureSpec);        int widthMode = MeasureSpec.getMode(widthMeasureSpec);        int widthSize = MeasureSpec.getSize(widthMeasureSpec);        int heightMode = MeasureSpec.getMode(heightMeasureSpec);        int heightSize = MeasureSpec.getSize(heightMeasureSpec);        int width;        int height;        if (widthMode == MeasureSpec.EXACTLY) {            width = widthSize;        } else {            width = mRadius * 2 + getPaddingLeft() + getPaddingRight();            if (widthMode == MeasureSpec.AT_MOST) {                width = Math.min(width, widthSize);            }        }        if (heightMode == MeasureSpec.EXACTLY) {            height = heightSize;        } else {            height = mRadius * 2 + getPaddingTop() + getPaddingBottom();            if (heightMode == MeasureSpec.AT_MOST) {                height = Math.min(width, heightSize);            }        }        setMeasuredDimension(width, height);        mRadius = (int) (Math.min(width - getPaddingLeft() - getPaddingRight(),                height - getPaddingTop() - getPaddingBottom()) * 1.0f / 2);    }

　　最後在onDraw裡通過canvas.drawArc()來繪製扇形。

    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);
        //平移Canvas到螢幕中心，之後的繪製以中心點為初始點        canvas.translate((getWidth() + getPaddingLeft() - getPaddingRight()) / 2, 
　　　　　　　　　　　　　(getHeight() + getPaddingTop() - getPaddingBottom()) / 2);
        //定義一個RectF對象，表示扇形繪製地區        RectF oval = new RectF(-mRadius, -mRadius, mRadius, mRadius);        float firstAngle = 0.0f;        float divideAngle = (360 * 1.0f) / DIV_SIZE;//根據DIV_SIZE來算每個扇形的角度        for (int i=0; i<DIV_SIZE; i++) {            mPaint.setColor(COLOR[i]);            canvas.drawArc(oval, (firstAngle + i * divideAngle), divideAngle, true, mPaint);        }    }

    public void setDivSize(int size){
        DIV_SIZE = size;
        invalidate();
    }

    public int getDivSize(){
        DIV_SIZE = size;
    }

　　最後還預留了一個setDivSize()介面，方便自訂ColorCircle View動態變化扇形數目。我這裡是通過Seekbar來動態切換DIV_SIZE。

    mColorCircle = (ColorCircle)findViewById(R.id.color_circle);    mSeekBar = (SeekBar)findViewById(R.id.seek_bar);    mSeekBar.setMax(4);//因為顏色數目原因，這裡seekBar的最大值設定為了4。
    int pro = mColorCircle.getSize();    mSeekBar.setProgress(pro);    mSeekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {        @Override        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {            mColorCircle.setDivSize(progress + 1);        }        @Override        public void onStartTrackingTouch(SeekBar seekBar) {        }        @Override        public void onStopTrackingTouch(SeekBar seekBar) {        }    });

　　如下：

 

Android 自訂View - 餅圖