Android画各种圆，饼图，环图，圆形图片

最近在学习android的画图所以就学习了一下。看了很多资料。特别是爱哥的博客，学习了很多，我也要分享一下：

首先画个圆（简单的很）：
自定义的View
设置好paint,canvas.drawCircle()就行，上代码

public Circle02(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        paint = new Paint();
        //抗锯齿
        paint.setAntiAlias(true);
        //Style.FILL就是实心的圆，Style.STROKE只画圆的边，Style.FILL_AND_STROKE有边有实心
        paint.setStyle(Style.FILL);
    }
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //获得圆心
        center_x = getMeasuredWidth() / 2 ; 
        center_y = getMeasuredHeight() / 2 ;
        //取小的为半径
        r = Math.min(getMeasuredWidth() / 2, getMeasuredHeight() / 2);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        paint.setARGB(255, 255, 0, 255);
        canvas.drawCircle(center_x, center_y, r, paint);
getRight(), getBottom(), paint);
        super.onDraw(canvas);
    }

画饼图：再画一个扇形呗，改一下onDraw就行了

@Override
    protected void onDraw(Canvas canvas) {
        paint.setARGB(255, 255, 0, 255);
        canvas.drawCircle(center_x, center_y, r, paint);

        //onDraw尽量不要new,这样很耗内存，这里我偷懒了
        RectF oval = new RectF(center_x - r, center_y - r, center_x + r, center_y + r);
        paint.setColor(Color.parseColor("#FFFF00"));
        //第一个参数数为RectF，第二个参数是起始角度（-90到270），第三个参数扫过多少角度
        //第四个参数要不要过中心试一试就知道有什么不同，第五个就是画笔
        canvas.drawArc(oval,0,97,true,paint);
        super.onDraw(canvas);
    }

知道画圆，画环就差不多，很多记录步数，就可以用这样的图
代码中我会有注解，应该能明白

@Override
    protected void onDraw(Canvas canvas) {

        RectF oval = new RectF(center_x-r, center_y - r, center_x + r, center_y + r);
        //出现颜色渐变的过程，第一，二两个参数就是渐变开始的X,Y坐标
        //new int[]{0xFFE9E9E9,0xFFFFFFFF}渐变的颜色
        mShader = new SweepGradient( center_x , center_y - r ,new int[]{0xFFE9E9E9,0xFFFFFFFF},null );
        paint.setARGB(255, 255, 222, 226);
        paint.setStrokeCap(Cap.ROUND);
        paint.setStrokeWidth(10);
        paint.setShader(mShader);
        canvas.drawArc(oval,-70, 320, false, paint);        

        //第二个环，通过progress控制环扫过多少，是不是可以用来设置步数
        paint.reset();
        paint.setStrokeCap(Cap.ROUND);
        paint.setAntiAlias(true);
        paint.setStyle(Style.STROKE);
        paint.setStrokeWidth(circleWidth);
        paint.setARGB(255, 138, 43, 226);
        canvas.drawArc(oval, -90, progress, false, paint);

        //画中间的数字
        paint.setColor(Color.parseColor("#000000"));
        paint.setTextSize(30);
        paint.setStrokeWidth(1);
        //水平居中
        paint.setTextAlign(Align.CENTER);
        FontMetricsInt fontMetricsInt = paint.getFontMetricsInt();
        canvas.drawText(String.valueOf(progress), center_x, center_y - fontMetricsInt.ascent / 2, paint);

        super.onDraw(canvas);
    }

这样的圆用来计步的会更加多一点，是如何做到的呢？其实就多了一个PathEffect，看代码吧

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        center_x = getWidth() / 2 ; 
        center_y = getHeight() / 2 ;

        oval.left = center_x - r;
        oval.right = center_x + r;
        oval.top = center_y - r;
        oval.bottom = center_y + r;
        //出现断断续续的效果，2表示画实的距离，3表示空的距离
        effect = new DashPathEffect(new float[]{2,3},0);
        paint.setPathEffect(effect);
        /* 
         * 设置描边的粗细，单位：像素px 
         * 注意：当setStrokeWidth(0)的时候描边宽度并不为0而是只占一个像素 
         */  
        paint.setStrokeWidth(width);
        paint.setColor(Color.RED);      
        canvas.drawArc(oval, -90, 360, false, paint);

    }

    @Override
    protected void onDraw(Canvas canvas) {

        BitmapDrawable drawable = (BitmapDrawable) getDrawable();
        if (null != drawable) {
            Bitmap b = drawable.getBitmap();
            b = getCircleBitmap(b);
            rectSrc.left = 0;
            rectSrc.top = 0;
            rectSrc.right = b.getWidth();
            rectSrc.bottom = b.getHeight();

            rectDest.left = 0;
            rectDest.top = 0;
            rectDest.right = getWidth();
            rectDest.bottom = getHeight();
            paint.reset();
            canvas.drawBitmap(b, rectSrc, rectDest, paint);

        } else {
            super.onDraw(canvas);
        }
    }

    Canvas mCanvas;

    /**
     * 通过设置paint的setXfermode,两张图片叠加的不同模式。来达到圆形图片的效果 1.画DST 2.setXfermode 3.画SRC
     * 
     * @param bitmap
     *            圆形图片
     * @return
     */
    private Bitmap getCircleBitmap(Bitmap bitmap) {

        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Config.ARGB_8888);
        mCanvas = new Canvas(output);
        int color = 0xff424242;
        Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        paint.setAntiAlias(true);
        paint.setColor(color);

        // 准备一张src图，（中间一个圆，四周透明）
        Bitmap srcBitmap = Bitmap.createBitmap(bitmap.getWidth(),
                bitmap.getHeight(), Config.ARGB_8888);
        Canvas mCanvas2 = new Canvas(srcBitmap);
        // 透明度为0很关键
        mCanvas2.drawARGB(0, 0, 0, 0);
        int x = bitmap.getWidth();
        int y = bitmap.getHeight();
        paint.setStyle(Style.FILL);
        paint.setColor(Color.RED);
        mCanvas2.drawCircle(x / 2, y / 2, Math.min(x / 2, y / 2), paint);

        // 1.画DST 2.setXfermode 3.画SRC
        mCanvas.drawBitmap(bitmap, rect, rect, null);
        paint.setXfermode(new PorterDuffXfermode(Mode.DST_IN));
        mCanvas.drawBitmap(srcBitmap, rect, rect, paint);

        return output;

    }

跟据PorterDuffXfermode.Mode可以画出很多图像，也可以用其他模式化圆形图片