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