1.仿 涨乐财富通 详情页面 买入卖出占比扇形图

原图：

image.png

本文需要仿写的就是这个扇形图

2.思路分析

2.1：画出扇形（共四个扇形，绿色，浅绿色，红色，浅红色）
2.2：将绿色和红色扇形沿y轴负向拉伸
2.3：在绿色扇形和红色扇形的中线位置绘制虚线
2.4：在绿色扇形和红色扇形上部绘制弧线条
2.5：在绿色扇形和红色扇形上部绘制折线

3.具体实现

3.1 创建cmStockPieChartView自定义View类

创建好自定义View类后，画出四个扇形
    //画笔
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    //扇形半径
    private static final float RADIOUS = DpToPxUtil.dp2px(120);
    //扇形所在的矩形区域
    private RectF mRectF = new RectF();
    //起始角度值
    private int currentAngle = 270;
    //每块扇形所对应的角度
    private int[] angles = {60,120,120,60};
    //每块扇形所对应的颜色
    private int[] colors = {Color.parseColor("#ea0200"),Color.parseColor("#f96362"),Color.parseColor("#85c263"),Color.parseColor("#5e9e3e")};
//设置所对应的矩形区域
mRectF.set(getWidth()/2 - RADIOUS,getHeight()/2 - RADIOUS,getWidth()/2 + RADIOUS,getHeight()/2 + RADIOUS);
在onDraw()方法中绘制扇形
@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        for (int i = 0;i < angles.length; i++){
            Log.e("===角度=angles[0]=",angles[i] + "  i:" + i);
            mPaint.setColor(colors[i]);
            canvas.save();
            //绘制扇形
            canvas.drawArc(mRectF,currentAngle,angles[i],true,mPaint);
            canvas.restore();
            currentAngle += angles[i];
        }
    }

效果

image.png

3.2 创建将绿色跟红色扇形沿y轴负向平移

这里需要注意的是，绿色跟红色的扇形比另外两个扇形的半径大，所以在绘制的时候需要扩大绿色跟红色扇形所在的矩形范围。

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

        for (int i = 0;i < angles.length; i++){
            mPaint.setColor(colors[i]);
            canvas.save();
            //平移绿色，红色扇形
            if(i == 0 || i == 3){
                canvas.translate(0, -PULLED_OUT_INDEX);
                //绘制绿色与红色扇形
                canvas.drawArc(mRectF_Remove,currentAngle,angles[i],true,mPaint);
            }else{
                //绘制扇形
                canvas.drawArc(mRectF,currentAngle,angles[i],true,mPaint);
            }
            canvas.restore();
            currentAngle += angles[i];
        }
    }

上面绿色部分为新增代码，单独绘制绿色与红色扇形

image.png

2.3 在绿色扇形和红色扇形的中线位置绘制虚线

这里画虚线需要用到DashPathEffect（自定义View paint-02 2.5.3中有讲到）
这里绘制绿色与红色扇形中的虚线需要用到三角函数。
这里绘制虚线实际上是先将绘制点移动到上半部分扇形的圆心处，然后再用三角函数求出虚线终点出的坐标（绿色扇形圆心x坐标减去上扇形半径乘以绿色扇形角度一半的sin值为x坐标，绿色扇形圆心纵坐标减去扇形半径乘以绿色扇形角度一半的cos值为y坐标，同理，做红色半径虚线）。

//绘制虚线
        mPaint.reset();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(DpToPxUtil.dp2px(1));
        mPaint.setPathEffect(mDashPathEffect);
        mPaint.setColor(Color.WHITE);
        //红色扇形上的虚线
        mPath.moveTo(getWidth()/2 ,getHeight()/2 - PULLED_OUT_INDEX);
        mPath.lineTo((float) getWidth()/2 + (float) Math.sin(Math.toRadians(angles[0]/2))*(RADIOUS + PULLED_OUT_INDEX),(float) (getHeight()/2 - PULLED_OUT_INDEX) - (float) Math.cos(Math.toRadians(angles[0]/2))*(RADIOUS + PULLED_OUT_INDEX));
        //绿色扇形上的虚线
        mPath.moveTo(getWidth()/2 ,getHeight()/2 - PULLED_OUT_INDEX);
        mPath.lineTo((float) getWidth()/2 - (float) Math.sin(Math.toRadians(angles[3]/2))*(RADIOUS + PULLED_OUT_INDEX),(float) (getHeight()/2 - PULLED_OUT_INDEX) - (float) Math.cos(Math.toRadians(angles[3]/2))*(RADIOUS + PULLED_OUT_INDEX));
        //绘制
        canvas.drawPath(mPath,mPaint);
        mPaint.setPathEffect(null);

image.png

2.4：在绿色扇形和红色扇形上部绘制弧线条

这里绘制绿色扇形和红色扇形上的弧线，跟绘制绿色扇形与红色扇形原理相同，区别在于这里绘制的是弧形。

//绘制弧形
mPaint.reset();
mPaint.setAntiAlias(true);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(DpToPxUtil.dp2px(1));
mPaint.setColor(colors[0]);
canvas.drawArc(mRectF_Arc,currentAngle + 1,angles[0]/2 - 2,false,mPaint);

mPaint.setColor(colors[3]);
canvas.drawArc(mRectF_Arc,currentAngle - angles[3]/2,angles[3]/2 - 1,false,mPaint);

image.png

2.5：在绿色扇形和红色扇形上部绘制折线

这里的折线条就个人根据个人需求来实现就可以了
成品图：

image.png

image.png

这里再来看一下涨乐财付通的原图

image.png

image.png

Demo：CMViewDemo Github地址