画笔实现的一个简单自定义控件

主要是最近项目有个用到一个圆环的自定义控件菜单动画，就大概说明下简单的布局， 直接贴代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

/**
 * Created by admin on 2017/4/12.
 * 扇形每次在圆环上转动角度的weight
 */

public class CustomView extends View {

    /**
     * 圆圈画笔
     */
    private Paint mCirclePaint;
    /**
     * 大扇形画笔
     */
    private Paint mBigSectorPaint;

    /**
     * 小扇形画笔
     */
    private Paint mSmoolSectorPaint;

    public CustomView(Context context) {
        super(context);
        initPaint();
    }

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

    private void initPaint() {
        mCirclePaint = new Paint();
        mCirclePaint.setAntiAlias(true);
        mCirclePaint.setColor(getResources().getColor(R.color.circlr));
        mCirclePaint.setStyle(Paint.Style.STROKE);
        mCirclePaint.setStrokeWidth(1);

        mBigSectorPaint = new Paint();
        mBigSectorPaint.setAntiAlias(true);
        mBigSectorPaint.setColor(getResources().getColor(R.color.bigsector));
        mBigSectorPaint.setStyle(Paint.Style.FILL);
        mBigSectorPaint.setStrokeWidth(1);

        mSmoolSectorPaint = new Paint();
        mSmoolSectorPaint.setAntiAlias(true);
        mSmoolSectorPaint.setColor(getResources().getColor(R.color.smoolSector));
        mSmoolSectorPaint.setStyle(Paint.Style.FILL);
        mSmoolSectorPaint.setStrokeWidth(1);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        /**
         * 圆中心点的坐标为（getWidth() / 2,getHeight() / 2）
         * 半径为 getWidth() *2/ 5
         */
        int xCenter = getWidth() / 2;
        int yCenter = (getHeight() - 136) / 2;
        int rCircleSmoll = 80;
        int rCircleBig = getWidth() / 2-10;
        //外切大圆半径
        int rExcircleBig;
        rExcircleBig = (int) Math.round(rCircleBig / Math.sin(Math.toRadians(45)));

        canvas.drawCircle(xCenter, yCenter, rCircleSmoll, mCirclePaint);
        canvas.drawCircle(xCenter, yCenter, rCircleBig, mCirclePaint);
        //大圆外切正方形左上角坐标  (正方向的左上角为圆上-135度角)
        int xb, yb;
        //大圆外切正方形右下角坐标  (正方形的右下角为圆上45度角)
        int Xb, Yb;

        xb = (int) Math.round(rExcircleBig * Math.cos(Math.toRadians(-135))) + xCenter;
        yb = (int) Math.round(rExcircleBig * Math.sin(Math.toRadians(-135))) + yCenter;
        Xb = (int) Math.round(rExcircleBig * Math.cos(Math.toRadians(45))) + xCenter;
        Yb = (int) Math.round(rExcircleBig * Math.sin(Math.toRadians(45))) + yCenter;

        RectF ovalB = new RectF(xb, yb, Xb, Yb);
        canvas.drawArc(ovalB, mStartAngle, 60, true, mBigSectorPaint);

        //外切小圆半径
        int rExcircleSmoll;
        rExcircleSmoll = (int) Math.round(rCircleSmoll / Math.sin(Math.toRadians(45)));

        //小圆外切正方形左上角坐标
        int xs, ys;
        //小圆外切正方形右下角坐标
        int Xs, Ys;

        xs = (int) Math.round(rExcircleSmoll * Math.cos(Math.toRadians(-135))) + xCenter;
        ys = (int) Math.round(rExcircleSmoll * Math.sin(Math.toRadians(-135))) + yCenter;
        Xs = (int) Math.round(rExcircleSmoll * Math.cos(Math.toRadians(45))) + xCenter;
        Ys = (int) Math.round(rExcircleSmoll * Math.sin(Math.toRadians(45))) + yCenter;

        RectF ovalS = new RectF(xs, ys, Xs, Ys);
        canvas.drawArc(ovalS, mStartAngle, 360, true, mSmoolSectorPaint);
    }

    private float mStartAngle = -120;

    /**
     * 每次旋转的角度
     * @param angle
     */

    public void setStartAngle(int angle) {
        this.mStartAngle = angle;
        //重新绘制
        postInvalidate();
    }
}

大概就是这样的一个代码；都是很简单的  我主要是为了记忆下，就写出来  有什么不好的地方可以回复；

中间有些旋转角度问题；因为在手机屏幕上左上角为（0,0）坐标，往下为Y正方向，所以0度为X轴正方向，Y轴负方向为-90度，以此类推，

还有就是边的计算问题，这都属于一些简单的数学三角函数，sinA = 对边/斜边  cosA = 邻边/斜边，根据自己需要计算

因为我做的是属于智能家居遥控器方面的app，所以需要硬件控制

activity代码是通过onkeyUp事件处理；

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    if (keyCode == KeyEvent.KEYCODE_PAGE_UP) {

        mStartAngle = mStartAngle + 60;
        mCustomView.setStartAngle(mStartAngle);

    } else if (keyCode == KeyEvent.KEYCODE_PAGE_DOWN) {

        mStartAngle = mStartAngle - 60;
        mCustomView.setStartAngle(mStartAngle);

    } else {
        return false;
    }

    return true;
}

xml直接饮用该布局就ok,没有什么难度就不贴代码了

加载出来默认图片

通过事件处理转动后图片