我是第一次打自定义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的方式