MyViewDemo之饼状图

作者：张玉庭的博客

今天在空余时间学了一会关于自定义View的实现, 想着以后在MyViewDemo
做一系列的有意思的自定义View。这一次的自定义view实践主要了解一下自定义view的实现过程

• Demo展示

image

• 关于View的实现过程

1. view的测量获取其宽高
2. view的绘制
3. view的刷新

• view的测量获取其宽高

首先自定义一个view--PieChartView并让其继承View,然后重写测量View大小的方法onMeasure()并获取其宽高为绘制图做准备。

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = MeasureSpec.getSize(widthMeasureSpec);
        mHeight = MeasureSpec.getSize(heightMeasureSpec);
    }

• view的绘制

view的绘制主要用到画布Canvas，以及画笔Paint。我们这时重写View的方法onDraw()。首先将画布的圆心移到View的中间（调用 canvas.translate(mWidth / 2, mHeight / 2)）,然后获取半径的长度，通过过相关的运算画出两部分不一样的饼状图

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        canvas.translate(mWidth / 2, mHeight / 2);//饼状图圆心移到中间
        float r = (float) ((Math.min(mWidth, mHeight) / 2));//半径
        RectF rectF = new RectF(-r, -r, r, r);

        //男士的扇形图
        mPaint.setStyle(Paint.Style.FILL);//填充
        mPaint.setColor(Color.CYAN);
        canvas.drawArc(rectF, -90, percent * 360, true, mPaint);

        //女士的扇形图
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(Color.RED);
        canvas.drawArc(rectF, percent * 360 - 90, (1 - percent) * 360, true, mPaint);

    }

• view的刷新

通过在布局文件调用两个seekbar控件，并通过监听OnSeekBarChangeListener()并调用View的刷新方法
setPercent(float percent)，最终调用重新绘制画布的方法invalidate()刷新View;

SeekBar.OnSeekBarChangeListener onSeekBarChangeListener = new SeekBar.OnSeekBarChangeListener() {
        @Override
        public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
            if (seekBar.getId() == R.id.seekBar) {
                seekBar1.setProgress(progress);
                seekBar2.setProgress(100 - progress);
            } else {
                seekBar2.setProgress(progress);
                seekBar1.setProgress(100 - progress);
            }
            pieChartView.setPercent((float) (1.0 * seekBar2.getProgress() / 100));
        }

        @Override
        public void onStartTrackingTouch(SeekBar seekBar) {

        }

        @Override
        public void onStopTrackingTouch(SeekBar seekBar) {

        }
    };

参考：从零起步，从入门到懵逼的自定义View教程