簡介

靈感源自360手機衛，主要功能就是實現顯示評分或等級的效果。并稍微改良了一下，有更好的實用性和擴展性。

因為主要用途就是顯示“分數”，“評價”，所以暫且叫它RatingView。

RatingView由多個可自定義的RatingBar組成，RatingBar代表要顯示的單個條目。

效果圖：

360手機衛士截圖：

效果圖1：包含4個RatingBar。

效果圖2：可以自由設置RatingBar個數。

效果圖3：可自定義顏色

效果圖4：在我自己做的戶外探子上的效果。

組成：

RatingView

控件整體為一個RatingView，控件的外圍由多個可自定義的RatingBar組成。控件中心區域可以自由添加布局或控件。

RatingBar

RatingBar代表要顯示的單個條目。由3部分組成：

最外圈虛線：順時針旋轉。

打分條：逆時針旋轉。

文字：旋轉結束后漸隱顯示。

實現思路：

思路很簡單，控件本身可以理解成一個圓，這個圓分為外圈和內圈。

外圈：可以顯示打分和文字，并且有一個旋轉動畫。

內圈：可以添加任意的布局和控件。

難點在于外圈，外圈可以看成一個圓環，圓環內包含多個等分的扇形，而每一個等份可以看做一個扇形圓環。

現在思路清晰了，只要畫出等分的扇形圓環這個控件已經完成一半了。

畫扇形：

Android中畫圖使用Canvas類，具體就不介紹了。里面有一個函數可以用來畫弧線。

public void drawArc(RectF oval, float startAngle, float sweepAngle, boolean useCenter, Paint paint)

oval :指定圓弧的外輪廓矩形區域。

startAngle: 圓弧起始角度，單位為度。

sweepAngle: 圓弧掃過的角度，順時針方向，單位為度。

useCenter: 如果為True時，在繪制圓弧時將圓心包括在內，通常用來繪制扇形。

paint: 繪制圓弧的畫板屬性，如顏色，是否填充等。

下面代碼就可以畫出一個60度的扇形圓環：

/** 定義畫筆 **/

Paint paint = new Paint();

paint.setAntiAlias(true); // 抗鋸齒

paint.setStyle(Paint.Style.STROKE); // 帶輪廓

paint.setStrokeWidth(10); // 輪廓寬度(輪廓寬度就是圓環寬度)

/** 定義繪制區域 **/

RectF oval = new RectF(0, 0, 100, 100); // 100 * 100的區域

/** 在onDraw方法中畫弧線 **/

canvas.drawArc(oval, 0, 60, false, paint); // 弧度0-60，不包括圓心的圓弧

旋轉扇形：

扇形畫好后，就該讓它旋轉起來了。Canvas已經提供了旋轉的函數。

public void rotate(float degrees, float px, float py)

degrees :旋轉的角度

px: 旋轉點x坐標

py: 旋轉點y坐標

可以通過Android提供的ValueAnimator，給出動畫的旋轉角度，然后在onDraw方法中調用旋轉函數，這個扇形圓環就轉起來了。

鎖定畫布：

前面說了，外圈還細分為最外圈的虛線，需要順時針轉，內環打分條需要逆時針轉，所以這時候就需要鎖定畫布，讓不同的扇形圓環按不同的角度旋轉。

鎖定畫布需要使用canvas.save()和canvas.restore()兩個函數。

save：用來保存Canvas的狀態。save之后，可以調用Canvas的平移、放縮、旋轉、錯切、裁剪等操作。

restore：用來恢復Canvas之前保存的狀態。防止save后對Canvas執行的操作對后續的繪制有影響。

畫文字：

在視圖的最外側有一個貼著扇形圓環的文字，所以這里就需要使用另一個canvas提供的方法來畫帶弧度的文字。

public void drawTextOnPath(String text,Path path,float hOffset,float vOffset,Paint paint)

Path繪制文本的路徑

hOffset水平偏移

vOffset垂直偏移

計算：

剩下的任務就是數學計算了，需要根據Ratingbar的個數將圓環等分，并計算文字大小和位置，計算Ratingbar的每個刻度大小位置，處理動畫，設置顏色等，就不一一介紹了。

使用&源碼：

PS:

目前我獨自開發了一款戶外工具類的App戶外探子，主要為進藏等長途戶外路線提供攻略和幫助。

最開始只是個人興趣，給自己用的，因為我自己騎行過川藏線和新藏線。后來慢慢的東西越加越多，就做上線了。

以后博客應該會寫一些做這個app時，用到的知識點、開源項目、遇到的各種問題。

總結

以上是生活随笔為你收集整理的android 360旋转动画,ANDROID——仿360手机卫士的旋转打分控件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。