相信每个 Android 开发者都接触过自定义View，但是要说清楚其中细节时又都捋不清楚，所以我决定做一系列的文章，一步一步介绍如何用自定义view 做出炫酷的效果。

一、API 储备

在开始自定义view时，我们要先熟悉一些常用的 API，推荐以下几篇文章熟悉一下：

• 自定义view 1-1 绘制基础
• 自定义view 1-2 Paint 详解

二、三角函数知识储备

2.1 三角函数相关知识

角

    角可以看作平面内一条射线绕着它的端点从一个位置旋转到另一个位置所形成的图形，射线的端点叫做角的顶点，旋转开始时的射线叫做角的起始边，终止时的射线叫做角的终止边。普遍规定按逆时针旋转的角为正角，顺时针旋转的角为负角，当射线没有任何旋转时则为零角。

    弧度制：规定长度等于半径的圆弧所对应的圆心角为1个弧度（radian）的角，那么根据圆周长为2πr 的圆心角为360°得到 1 弧度 = (360/2π)°。

    建立直角坐标系，以坐标原点为圆心画半径为1的圆，那么任意角a的终止边与圆相交的点P（x,y），则有：

三角函数

Java 中的三角函数在 java.lang.Math 中：注意在以下的 Java 方法中传入的参数都是弧度，因此需要先将角度转换为弧度

Math.sin(double s);
Math.asin(double s);
        
Math.cos(double s);
Math.acos(double s);
        
Math.tan(double s);
Math.atan(double s);

//以上方法的参数都是弧度，传入度数时需要用下面这个方法转换为弧度
Math.toRadians(double s);

public static double toRadians(double angdeg) {
        return angdeg / 180.0 * PI;
 }
//这个方法也印证了上面我们的 1 弧度 = (360/2π)° 

三、仪表盘

仪表盘

    绘制仪表盘主要分为三个步骤：

• 绘制圆弧
• 绘制刻度
• 绘制指针

3.1 绘制圆弧

绘制圆弧主要是用到了以下API：

Canvas.drawArc(float left, float top, float right, float bottom, float startAngle,
                 float sweepAngle, boolean useCenter, Paint paint) 
//绘制弧形或扇形

drawArc() 是使用一个椭圆来描述弧形的。

left, top, right, bottom 描述的是这个弧形所在的椭圆；

startAngle 是弧形的起始角度（x 轴的正向，即正右的方向，是 0 度的位置；顺时针为正角度，逆时针为负角度）；

sweepAngle 是弧形划过的角度；

useCenter 表示是否连接到圆心，如果不连接到圆心，就是弧形，如果连接到圆心，就是扇形。

还有另外一个API—Path 同样也可以达到绘制圆弧的效果：

Path.addArc(float left, float top, float right, float bottom, float startAngle, float sweepAngle)

Canvas.drawPath(Path path, Paint paint) //画自定义图形

先在 Path 中添加一个圆，其中参数的意义与上面的一致，会发现这里少了 useCenter 的参数，这里默认是 false，也就是画圆弧。

3.2 绘制刻度

接着是绘制刻度，如果一个个去绘制的话会很麻烦，Paint 中可以设置一个 PathEffect 来达到这样的效果：

PathEffect 分为两类，单一效果的 CornerPathEffect、DiscretePathEffect、DashPathEffect、PathDashPathEffect ，和组合效果的 SumPathEffect、ComposePathEffect。这里我们要用到 PathDashPathEffect。

它的构造方法 PathDashPathEffect(Path shape, float advance, float phase, PathDashPathEffect.Style style) 中， shape 参数是用来绘制的 Path ； advance是两个相邻的 shape 段之间的间隔，不过注意，这个间隔是两个 shape 段的起点的间隔，而不是前一个的终点和后一个的起点的距离； phase 和 DashPathEffect 中一样，是虚线的偏移；最后一个参数 style，是用来指定拐弯改变的时候 shape 的转换方式。style 的类型为 PathDashPathEffect.Style，是一个 enum ，具体有三个值：TRANSLATE：位移、ROTATE：旋转、MORPH：变体

最后是绘制指针，直接用 Canvas.drawLine 就可以了，其中要利用到三角函数的知识来确定指针的终点。

首先是两个工具方法，分别是转化dp 以及解析BitMap的，其中解析BitMap时对BitMap进行了二次压缩：

public class Util {

    /**
     * dip转px
     */
    public static float dp2px(int dipValue) {
        return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dipValue, Resources.getSystem().getDisplayMetrics());
    }

    /**
     * 解析 BitMap
     * @param res 资源
     * @param resId 资源id
     * @param reqWidth 所需宽度
     * @return bitMap对象
     */
    public static Bitmap decodeBitMap(Resources res, @DrawableResint resId, int reqWidth) {
        BitmapFactory.Options options = new BitmapFactory.Options();
        options.inJustDecodeBounds = true;
        BitmapFactory.decodeResource(res, resId, options);
        options.inJustDecodeBounds = false;
        options.inDensity= options.outWidth;
        options.inTargetDensity = reqWidth;
        return BitmapFactory.decodeResource(res,resId,options);
    }
}

接下来是完整代码：

public class DashBoardView extends View {

    private static final int ANGLE = 120;
    private static float RADIUS = Util.dp2px(150);
    private static float LENGTH = Util.dp2px(138);

    Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿
    Path mArcPath = new Path();//弧线
    Path mDashBoardPath = new Path();//刻度
    PathEffect mPathDashEffect;

    private float driveNum;

    public void setDriveNum(float driveNum) {
        this.driveNum = driveNum;
        invalidate();
    }

    public DashBoardView(Context context) {
        super(context);
    }

    public DashBoardView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public DashBoardView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int width, int h, int oldw, int oldh) {
        super.onSizeChanged(width, h, oldw, oldh);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(3);

        mArcPath.addArc(getWidth() / 2 - RADIUS, getHeight() / 2 - RADIUS, getWidth() / 2 + RADIUS,
                getHeight() / 2 + RADIUS, 90 + ANGLE / 2f, 360f - ANGLE);
        mDashBoardPath.addRect(0f, 0f, Util.dp2px(2), Util.dp2px(10), Path.Direction.CW);//绘制出单个刻度的大小
        PathMeasure measure = new PathMeasure(mArcPath, false);//测量圆弧这段 path ，获取这段path 的信息
        mPathDashEffect = new PathDashPathEffect(mDashBoardPath, (measure.getLength() - Util.dp2px(2)) / 20, 0f,
                PathDashPathEffect.Style.ROTATE); //这里减去最后一个刻度所占宽度

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制弧线
        canvas.drawPath(mArcPath, mPaint);
        //绘制刻度
        mPaint.setPathEffect(mPathDashEffect);
        canvas.drawPath(mArcPath, mPaint);
        mPaint.setPathEffect(null);
       //绘制指针
        canvas.drawLine(getWidth() / 2f, getHeight() / 2f, (float)
                        (getWidth() / 2f + Math.cos(Math.toRadians(getAngleFromMark(5.5f))) * LENGTH),
                (float) (getHeight() / 2f + Math.sin(Math.toRadians(getAngleFromMark(5.5f))) * LENGTH),
                mPaint);
    }

    //求出指针所指角度对应的角度
    private double getAngleFromMark(float mark) {
        return (90 + ANGLE / 2 + (360 - ANGLE) / 20 * mark);//起始角度 + 扫过角度/刻度 * 指针对应的角度
    }
}

运行结果：

仪表盘

四、饼状图

饼状图

画饼状图主要分为以下两个步骤：

• 画扇形
• 将某一块往外位移一部分

//使用 Canvas 来做常见的二维变换：
//Canvas.translate(float dx, float dy) 平移，参数里的 dx 和 dy 表示横向和纵向的位移。
canvas.translate(200, 0);
canvas.draw
canvas.restore();

那么我们这里要变换的位置如何计算呢？也要利用到三角函数的知识，偏移的方向是扇形的 角平分线。完整代码如下：

public class PieView extends View {

    private int colors[] = {
            Color.parseColor("#2979FF"), Color.parseColor("#C2185B"),
            Color.parseColor("#009688"), Color.parseColor("#FF8F00")
    };

    private float angles[] = {
            60f, 100f, 120f, 80f
    };

    private final static int PULL_OUT_INDEX = 2;

    private float RADIUS = Utils.dp2px(150);

    private float OUT_LENGTH = Utils.dp2px(20);

    private RectF mBounds = new RectF();

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿


    public PieView(Context context) {
        super(context);
    }

    public PieView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public PieView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBounds.set(w / 2 - RADIUS, h / 2 - RADIUS, w / 2 + RADIUS, h / 2 + RADIUS);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        float curStartAngle = 0f;
        for (int i = 0; i < angles.length; i++) {
            mPaint.setColor(colors[i]);
            canvas.save();
            if (i == PULL_OUT_INDEX) {
                canvas.translate((float) (Math.cos(Math.toRadians(curStartAngle + angles[i] / 2)) * OUT_LENGTH),
                        (float) (Math.sin(Math.toRadians(curStartAngle + angles[i] / 2)) * OUT_LENGTH));
            }
            canvas.drawArc(mBounds, curStartAngle, angles[i], true, mPaint);
            canvas.restore();
            curStartAngle += angles[i];
        }
    }
}

运行结果：

饼状图

五、头像图

头像图

如上图所示，需要一个图片，并将图片切成圆形，另外在绘制一个外边框。需要涉及到的知识主要是：

setXfermode(Xfermode xfermode)

以及 Canvas.saveLayer() 设置离屏缓冲
完整代码如下：

public class IconView extends View {


    private static float WIDTH = Util.dp2px(300);
    private static float PADDING = Util.dp2px(50);
    private static float EDGE_WIDTH = Util.dp2px(10);

    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);//抗锯齿

    private Xfermode mXfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);//DST_IN 表示只目标图像与源图像重合的区域相交的部分

    private Bitmap mBitMap = Util.decodeBitMap(getResources(), R.drawable.man_icon, (int) WIDTH);

    public IconView(Context context) {
        super(context);
    }

    public IconView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public IconView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

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

        canvas.drawOval(PADDING, PADDING, PADDING + WIDTH, PADDING + WIDTH, mPaint);
        int saved = canvas.saveLayer(PADDING, PADDING, PADDING + WIDTH, PADDING + WIDTH, mPaint);
        mPaint.setColor(Color.RED);
        canvas.drawOval(PADDING + EDGE_WIDTH, PADDING + EDGE_WIDTH, PADDING + WIDTH - EDGE_WIDTH, PADDING + WIDTH - EDGE_WIDTH, mPaint);
        mPaint.setXfermode(mXfermode);
        canvas.drawBitmap(mBitMap, PADDING, PADDING, mPaint);
        mPaint.setXfermode(null);
        canvas.restoreToCount(saved);
    }
}

运行结果：

头像图

希望对你有所帮助