自定义view初学习（仿小米闹钟）

  我是第一次打自定义view相关代码，说错了大家请多多包涵

  首先前导知识是自定义view创建时候要重写的方法onMeasure确定相当于父容器当前自定义view的位置

                          onDraw  用Canvas、曲线、直线来画出自定义view，tips：其他地方通过invaliate再调用onDraw

                          onSizeChanged 用来定义View大小

  首先放一下效果

第一步做的肯定是初始化画笔以及Canvas对象，在java中大家应该实践了很多

 private Canvas mCanvas;//整个view画布
    private Paint mTextPaint;//画出表盘上的数字画笔
    private Rect mTextRect = new Rect();//测量表盘上文本宽高的矩形
    private Paint mCirclePaint;//画出小时圆圈画笔
    private  float mCircleStrokeWidth=4;//时钟圆圈的线条宽度
    private RectF mCircleRectF = new RectF();

    private int mLightColor;//亮颜色，用于分钟
    private int mDarkColor;//暗颜色，用于时针等等
    private int mBackgroundColor;//背景颜色
    /* 小时文本字体大小 */
    private float mTextSize;

    /* 时钟半径，不包括padding值 */
    private float mRadius;
    /* 刻度线长度 */
    private float mScaleLength;

    /* 时针角度 */
    private float mHourDegree;
    /* 分针角度 */
    private float mMinuteDegree;
    /* 秒针角度 */
    private float mSecondDegree;
    /* 时针画笔 */
    private Paint mHourHandPaint;
    /* 分针画笔 */
    private Paint mMinuteHandPaint;
    /* 秒针画笔 */
    private Paint mSecondHandPaint;
    /* 时针路径 */
    private Path mHourHandPath = new Path();
    /* 分针路径 */
    private Path mMinuteHandPath = new Path();
    /* 秒针路径 */
    private Path mSecondHandPath = new Path();

    /* 加一个默认的padding值，为了防止用camera旋转时钟时造成四周超出view大小 */
    private float mDefaultPadding;
    private float mPaddingLeft;
    private float mPaddingTop;
    private float mPaddingRight;
    private float mPaddingBottom;

    /* 梯度扫描渐变 */
    private SweepGradient mSweepGradient;
    /* 渐变矩阵，作用在SweepGradient */
    private Matrix mGradientMatrix;

    /* 指针的在x轴的位移 */
    private float mCanvasTranslateX;
    /* 指针的在y轴的位移 */
    private float mCanvasTranslateY;
    /* 指针的最大位移 */
    private float mMaxCanvasTranslate;

    /* 刻度圆弧画笔 */
    private Paint mScaleArcPaint;
    /* 刻度圆弧的外接矩形 */
    private RectF mScaleArcRectF = new RectF();
    /* 刻度线画笔 */
    private Paint mScaleLinePaint;

第二步处理onMeasure，这里onMeasure有三个参数，可以参考https://www.jianshu.com/p/c84693096e41

        int defaultSize  = 800;
        int model = MeasureSpec.getMode(measureSpec);
        int size = MeasureSpec.getSize(measureSpec);
        switch (model){
            case MeasureSpec.EXACTLY:
                return size;
            case MeasureSpec.AT_MOST:
                return Math.min(size,defaultSize);
            case MeasureSpec.UNSPECIFIED:
                return defaultSize;
            default:
                return defaultSize;
        }
    

第三步是画出图形，这里大致思想是画出刻度线、时针、分钟、刻度盘上的数字以及转过位置的渐变效果

这里详细的都是数学相关的曲线弧度的，可以看我的代码https://github.com/whiteyen/ViewPractice

需要注意的地方以及知识点总结  一、参数在xml的使用  二、measure的方式