自定义View是很重要的一个知识点，简单记录一下自己的学习。
要实现的效果图如下：
首先完成最外面的小时圆弧：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//4个时间文本 String timeText = "12"; mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect); //将双数字的范围(Rect)保存在mTextRect int textLargeWidth = mTextRect.width(); //两位数字的宽 mCanvas.drawText("12", getWidth() / 2 - textLargeWidth / 2, mPaddingTop + mTextRect.height(), mTextPaint); timeText = "3"; mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect); //保存单数字的Rect int textSmallWidth = mTextRect.width(); //一位数字的宽 mCanvas.drawText("3", getWidth() - mPaddingRight - mTextRect.height() / 2 - textSmallWidth/2, getHeight() / 2 + mTextRect.height() / 2, mTextPaint); mCanvas.drawText("6", getWidth() / 2 - textSmallWidth / 2, getHeight() - mPaddingBottom, mTextPaint); mCanvas.drawText("9", mPaddingLeft + mTextRect.height() / 2 - textSmallWidth / 2, getHeight() / 2 + mTextRect.height() / 2, mTextPaint); //画4个弧：先得到圆弧的矩形框，再画圆弧 mCircleRectF.set(mPaddingLeft + mTextRect.height() / 2 + mCircleStrokeWidth / 2, mPaddingTop + mTextRect.height() / 2 + mCircleStrokeWidth / 2, getWidth() - mPaddingRight - mTextRect.height() / 2 + mCircleStrokeWidth / 2, getHeight() - mPaddingBottom - mTextRect.height() / 2 + mCircleStrokeWidth / 2); for (int i = 0; i < 4; i++) { mCanvas.drawArc(mCircleRectF, 5 + 90 * i, 80, false, mCirclePaint); } |
接着画一圈渐变圆弧和秒针
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
//设置渐变效果并画圆弧 mScaleArcRectF.set(mPaddingLeft + 1.5f * mScaleLength + mTextRect.height() / 2, mPaddingTop + 1.5f * mScaleLength + mTextRect.height() / 2, getWidth() - mPaddingRight - mTextRect.height() / 2 - 1.5f * mScaleLength, getHeight() - mPaddingBottom - mTextRect.height() / 2 - 1.5f * mScaleLength); mGradientMatrix.setRotate(mSecondDegree - 90, getWidth() / 2, getHeight() / 2); mSweepGradient.setLocalMatrix(mGradientMatrix); mScaleArcPaint.setShader(mSweepGradient); mCanvas.drawArc(mScaleArcRectF, 0, 360, false, mScaleArcPaint); //画背景色刻度线 for (int i = 0; i < 200; i++) { mCanvas.drawLine(getWidth() / 2, mPaddingTop + mScaleLength + mTextRect.height() / 2, getWidth() / 2, mPaddingTop + 2 * mScaleLength + mTextRect.height() / 2, mScaleLinePaint); mCanvas.rotate(1.8f, getWidth() / 2, getHeight() / 2); } mCanvas.restore(); |
绘制一个指向12的三角形：
|
1 2 3 4 5 6 7 8 9 10 11 |
mCanvas.rotate(mSecondDegree, getWidth() / 2, getHeight() / 2); mSecondHandPath.reset() float offset = mPaddingTop + mTextRect.height() / 2; mSecondHandPath.moveTo(getWidth() / 2, offset + 0.26f * mRadius); mSecondHandPath.lineTo(getWidth() / 2 - 0.05f * mRadius, offset + 0.35f * mRadius); mSecondHandPath.lineTo(getWidth() / 2 + 0.05f * mRadius, offset + 0.35f * mRadius); mSecondHandPath.close(); mSecondHandPaint.setColor(mLightColor); mCanvas.drawPath(mSecondHandPath, mSecondHandPaint); mCanvas.restore(); |
接下来画时针与分针：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
//画时针，针头用了二阶贝塞尔曲线绘制 mHourHandPath.reset(); float offset = mPaddingTop + mTextRect.height() / 2; mHourHandPath.moveTo(getWidth() / 2 - 0.02f * mRadius, getHeight() / 2); mHourHandPath.lineTo(getWidth() / 2 - 0.01f * mRadius, offset + 0.5f * mRadius); mHourHandPath.quadTo(getWidth() / 2, offset + 0.48f * mRadius, getWidth() / 2 + 0.01f * mRadius, offset + 0.5f * mRadius); mHourHandPath.lineTo(getWidth() / 2 + 0.02f * mRadius, getHeight() / 2); mHourHandPath.close(); mCanvas.drawPath(mHourHandPath, mHourHandPaint); mCanvas.restore(); //画分针，与时针的绘制一样 mMinuteHandPath.reset(); mMinuteHandPath.moveTo(getWidth() / 2 - 0.01f * mRadius, getHeight() / 2); mMinuteHandPath.lineTo(getWidth() / 2 - 0.008f * mRadius, offset + 0.38f * mRadius); mMinuteHandPath.quadTo(getWidth() / 2, offset + 0.36f * mRadius, getWidth() / 2 + 0.008f * mRadius, offset + 0.38f * mRadius); mMinuteHandPath.lineTo(getWidth() / 2 + 0.01f * mRadius, getHeight() / 2); mMinuteHandPath.close(); mCanvas.drawPath(mMinuteHandPath, mMinuteHandPaint); mCanvas.restore(); |
最后盖一个圆：
|
1 2 3 4 |
mCanvas.drawCircle(getWidth() / 2, getHeight() / 2, 0.05f * mRadius, mSecondHandPaint); mSecondHandPaint.setColor(mBackgroundColor); mCanvas.drawCircle(getWidth() / 2, getHeight() / 2, 0.025f * mRadius, mSecondHandPaint); |
完工！
什么，你问我3D效果怎么实现？容我缓缓。。（下篇文章）