您好,登錄后才能下訂單哦!
繼續(xù)練習(xí)自定義View。。畢竟熟才能生巧。一直覺得小米的時(shí)鐘很精美,那這次就搞它~這次除了練習(xí)自定義View,還涉及到使用Camera和Matrix實(shí)現(xiàn)3D效果。
一個(gè)這樣的效果,在繪制的時(shí)候最好選擇一個(gè)方向一步一步的繪制,這里我選擇由外到內(nèi)、由深到淺的方向來繪制,代碼步驟如下:
1、首先老一套~新建attrs.xml文件,編寫自定義屬性如時(shí)鐘背景色、亮色(用于分針、秒針、漸變終止色)、暗色(圓弧、刻度線、時(shí)針、漸變起始色),新建MiClockView繼承View,重寫構(gòu)造方法,獲取自定義屬性值,初始化Paint、Path以及畫圓、弧需要的RectF等東東,重寫onMeasure計(jì)算寬高,這里不再啰嗦~剛開始學(xué)自定義View的同學(xué)建議從我的前幾篇博客看起
2、由于onSizeChanged方法在構(gòu)造方法、onMeasure之后,又在onDraw之前,此時(shí)已經(jīng)完成全局變量初始化,也得到了控件的寬高,所以可以在這個(gè)方法中確定一些與寬高有關(guān)的數(shù)值,比如這個(gè)View的半徑啊、padding值等,方便繪制的時(shí)候計(jì)算大小和位置:
@Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); //寬和高分別去掉padding值,取min的一半即表盤的半徑 mRadius = Math.min(w - getPaddingLeft() - getPaddingRight(), h - getPaddingTop() - getPaddingBottom()) / 2; //加一個(gè)默認(rèn)的padding值,為了防止用camera旋轉(zhuǎn)時(shí)鐘時(shí)造成四周超出view大小 mDefaultPadding = 0.12f * mRadius;//根據(jù)比例確定默認(rèn)padding大小 //為了適配控件大小match_parent、wrap_content、精確數(shù)值以及padding屬性 mPaddingLeft = mDefaultPadding + w / 2 - mRadius + getPaddingLeft(); mPaddingTop = mDefaultPadding + h / 2 - mRadius + getPaddingTop(); mPaddingRight = mPaddingLeft; mPaddingBottom = mPaddingTop; mScaleLength = 0.12f * mRadius;//根據(jù)比例確定刻度線長度 mScaleArcPaint.setStrokeWidth(mScaleLength);//刻度盤的弧寬 mScaleLinePaint.setStrokeWidth(0.012f * mRadius);//刻度線的寬度 //梯度掃描漸變,以(w/2,h/2)為中心點(diǎn),兩種起止顏色梯度漸變 //float數(shù)組表示,[0,0.75)為起始顏色所占比例,[0.75,1}為起止顏色漸變所占比例 mSweepGradient = new SweepGradient(w / 2, h / 2, new int[]{mDarkColor, mLightColor}, new float[]{0.75f, 1}); }
3、準(zhǔn)備工作做的差不多了,那就開始繪制,根據(jù)方向我先確定最外層的小時(shí)時(shí)間文本的位置及其旁邊的四個(gè)?。?/p>
注意兩位數(shù)字的寬度和一位數(shù)的寬度是不一樣的,在計(jì)算的時(shí)候一定要注意
String timeText = "12"; mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect); int textLargeWidth = mTextRect.width();//兩位數(shù)字的寬 mCanvas.drawText("12", getWidth() / 2 - textLargeWidth / 2, mPaddingTop + mTextRect.height(), mTextPaint); timeText = "3"; mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect); int textSmallWidth = mTextRect.width();//一位數(shù)字的寬 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);
我計(jì)算文本的寬高一般采用的方法是,new一個(gè)Rect,然后再繪制時(shí)調(diào)用
mTextPaint.getTextBounds(timeText, 0, timeText.length(), mTextRect);
將這個(gè)文本的范圍賦值給這個(gè)mTextRect,此時(shí)mTextRect.width()就是這段文本的寬,mTextRect.height()就是這段文本的高。
畫文本旁邊的四個(gè)?。?/p>
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); }
計(jì)算圓弧外接矩形的范圍別忘了加上圓弧線寬的一半
4、再往里是刻度盤,畫這個(gè)刻度盤的思路是現(xiàn)在底層畫一個(gè)mScaleLength寬度的圓,并設(shè)置SweepGradient漸變,上面再畫一圈背景色的刻度線。獲得SweepGradient的Matrix對(duì)象,通過不斷旋轉(zhuǎn)mGradientMatrix的角度實(shí)現(xiàn)刻度盤的旋轉(zhuǎn)效果:
/** * 畫一圈梯度渲染的亮暗色漸變圓弧,重繪時(shí)不斷旋轉(zhuǎn),上面蓋一圈背景色的刻度線 */ private void drawScaleLine() { 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); //matrix默認(rèn)會(huì)在三點(diǎn)鐘方向開始顏色的漸變,為了吻合 //鐘表十二點(diǎn)鐘順時(shí)針旋轉(zhuǎn)的方向,把秒針旋轉(zhuǎn)的角度減去90度 mGradientMatrix.setRotate(mSecondDegree - 90, getWidth() / 2, getHeight() / 2); mSweepGradient.setLocalMatrix(mGradientMatrix); mScaleArcPaint.setShader(mSweepGradient); mCanvas.drawArc(mScaleArcRectF, 0, 360, false, mScaleArcPaint); //畫背景色刻度線 mCanvas.save(); 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(); }
這里有一個(gè)全局變量mSecondDegree,即秒針旋轉(zhuǎn)的角度,需要根據(jù)當(dāng)前時(shí)間動(dòng)態(tài)獲取:
/** * 獲取當(dāng)前 時(shí)分秒 所對(duì)應(yīng)的角度 * 為了不讓秒針走得像老式掛鐘一樣僵硬,需要精確到毫秒 */ private void getTimeDegree() { Calendar calendar = Calendar.getInstance(); float milliSecond = calendar.get(Calendar.MILLISECOND); float second = calendar.get(Calendar.SECOND) + milliSecond / 1000; float minute = calendar.get(Calendar.MINUTE) + second / 60; float hour = calendar.get(Calendar.HOUR) + minute / 60; mSecondDegree = second / 60 * 360; mMinuteDegree = minute / 60 * 360; mHourDegree = hour / 12 * 360; }
5、然后就是畫秒針,用Path繪制一個(gè)指向12點(diǎn)鐘的三角形,通過不斷旋轉(zhuǎn)畫布實(shí)現(xiàn)秒針的旋轉(zhuǎn):
/** * 畫秒針,根據(jù)不斷變化的秒針角度旋轉(zhuǎn)畫布 */ private void drawSecondHand() { mCanvas.save(); mCanvas.rotate(mSecondDegree, getWidth() / 2, getHeight() / 2); mSecondHandPath.reset(); float offset = mPaddingTop + mTextRect.height() / 2; mSecondHandPath.moveTo(getWidth() / 2, offset + 0.27f * 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(); }
6、看實(shí)現(xiàn)圖,時(shí)針在分針之下并且比分針顏色淺,那我就先畫時(shí)針,仍然是Path,并且針頭為圓弧狀,那么就用二階貝賽爾曲線,路徑為moveTo( A),lineTo(B),quadTo(C,D),lineTo(E),close.
/** * 畫時(shí)針,根據(jù)不斷變化的時(shí)針角度旋轉(zhuǎn)畫布 * 針頭為圓弧狀,使用二階貝塞爾曲線 */ private void drawHourHand() { mCanvas.save(); mCanvas.rotate(mHourDegree, getWidth() / 2, getHeight() / 2); 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(); }
7、然后是分針,按照時(shí)針的思路:
/** * 畫分針,根據(jù)不斷變化的分針角度旋轉(zhuǎn)畫布 */ private void drawMinuteHand() { mCanvas.save(); mCanvas.rotate(mMinuteDegree, getWidth() / 2, getHeight() / 2); mMinuteHandPath.reset(); float offset = mPaddingTop + mTextRect.height() / 2; 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(); }
8、最后由于path是close的,所以干脆畫兩個(gè)圓蓋在上面:
/** * 畫指針的連接圓圈,蓋住指針path在圓心的連接線 */ private void drawCoverCircle() { mCanvas.drawCircle(getWidth() / 2, getHeight() / 2, 0.05f * mRadius, mSecondHandPaint); mSecondHandPaint.setColor(mBackgroundColor); mCanvas.drawCircle(getWidth() / 2, getHeight() / 2, 0.025f * mRadius, mSecondHandPaint); }
9、終于畫完了,onDraw部分就是這樣
@Override protected void onDraw(Canvas canvas) { mCanvas = canvas; getTimeDegree(); drawTimeText(); drawScaleLine(); drawSecondHand(); drawHourHand(); drawMinuteHand(); drawCoverCircle(); invalidate(); }
繪制的時(shí)候,尤其是像這樣圓形view,靈活運(yùn)用
canvas.save(); canvas.rotate(mDegree, mCenterX, mCenterY); <!-- draw something --> canvas.restore();
這一套組合拳可以減少不少三角函數(shù)、角度弧度相關(guān)的計(jì)算。
10、辣么接下來就是如何實(shí)現(xiàn)觸摸使鐘表3D旋轉(zhuǎn)
借助Camera類和Matrix類,在構(gòu)造方法中:
Matrix mCameraMatrix = new Matrix(); Camera mCamera = new Camera();
/** * 設(shè)置3D時(shí)鐘效果,觸摸矩陣的相關(guān)設(shè)置、照相機(jī)的旋轉(zhuǎn)大小 * 應(yīng)用在繪制圖形之前,否則無效 * * @param rotateX 繞X軸旋轉(zhuǎn)的大小 * @param rotateY 繞Y軸旋轉(zhuǎn)的大小 */ private void setCameraRotate(float rotateX, float rotateY) { mCameraMatrix.reset(); mCamera.save(); mCamera.rotateX(mCameraRotateX);//繞x軸旋轉(zhuǎn)角度 mCamera.rotateY(mCameraRotateY);//繞y軸旋轉(zhuǎn)角度 mCamera.getMatrix(mCameraMatrix);//相關(guān)屬性設(shè)置到matrix中 mCamera.restore(); //camera在view左上角那個(gè)點(diǎn),故旋轉(zhuǎn)默認(rèn)是以左上角為中心旋轉(zhuǎn) //故在動(dòng)作之前pre將matrix向左移動(dòng)getWidth()/2長度,向上移動(dòng)getHeight()/2長度 mCameraMatrix.preTranslate(-getWidth() / 2, -getHeight() / 2); //在動(dòng)作之后post再回到原位 mCameraMatrix.postTranslate(getWidth() / 2, getHeight() / 2); mCanvas.concat(mCameraMatrix);//matrix與canvas相關(guān)聯(lián) }
這段代碼除了camera的旋轉(zhuǎn)、平移、縮放之類的操作之外,剩下的代碼一般是固定的
全局變量mCameraRotateX和mCameraRotateY應(yīng)該與此時(shí)手指觸摸坐標(biāo)相關(guān)聯(lián)動(dòng)態(tài)獲?。?/p>
@Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: getCameraRotate(event); break; case MotionEvent.ACTION_MOVE: //根據(jù)手指坐標(biāo)計(jì)算camera應(yīng)該旋轉(zhuǎn)的大小 getCameraRotate(event); break; } return true; }
Camera的坐標(biāo)系和View的坐標(biāo)系是不一樣的
View坐標(biāo)系是二維的,原點(diǎn)在屏幕左上角,右為x軸正方向,下為y軸正方向;而Camera坐標(biāo)系是三維的,原點(diǎn)在屏幕左上角,右為x軸正方向,上為y軸正方向,屏幕向里為z軸正方向
/** * 獲取camera旋轉(zhuǎn)的大小 * 注意view坐標(biāo)與camera坐標(biāo)方向的轉(zhuǎn)換 */ private void getCameraRotate(MotionEvent event) { float rotateX = -(event.getY() - getHeight() / 2); float rotateY = (event.getX() - getWidth() / 2); //求出此時(shí)旋轉(zhuǎn)的大小與半徑之比 float percentX = rotateX / mRadius; float percentY = rotateY / mRadius; if (percentX > 1) { percentX = 1; } else if (percentX < -1) { percentX = -1; } if (percentY > 1) { percentY = 1; } else if (percentY < -1) { percentY = -1; } //最終旋轉(zhuǎn)的大小按比例勻稱改變 mCameraRotateX = percentX * mMaxCameraRotate; mCameraRotateY = percentY * mMaxCameraRotate; }
11、最后在onTouchEvent中松開手指時(shí)加一個(gè)復(fù)原并晃動(dòng)的動(dòng)畫
case MotionEvent.ACTION_UP: //松開手指,時(shí)鐘復(fù)原并伴隨晃動(dòng)動(dòng)畫 ValueAnimator animX = getShakeAnim(mCameraRotateX, 0); animX.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mCameraRotateX = (float) valueAnimator.getAnimatedValue(); } }); ValueAnimator animY = getShakeAnim(mCameraRotateY, 0); animY.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { mCameraRotateY = (float) valueAnimator.getAnimatedValue(); } }); break;
/** * 使用OvershootInterpolator完成時(shí)鐘晃動(dòng)動(dòng)畫 */ private ValueAnimator getShakeAnim(float start, float end) { ValueAnimator anim = ValueAnimator.ofFloat(start, end); anim.setInterpolator(new OvershootInterpolator(10)); anim.setDuration(500); anim.start(); return anim; }
終于寫完了,這個(gè)MiClockView適配也做的差不多了,時(shí)間也是同步的手機(jī)時(shí)間,一般可以拿來就用了~
demo下載地址:http://xiazai.jb51.net/201701/yuanma/MiClockView_jb51.rar
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。