仿ios 就寢控制項

偶然有天發現朋友圈有人曬出蘋果手機的乙個就寢功能，裡面乙個顯示睡眠時間的控制項，覺得這個控制項非常好看，而且正好看了一系列的自定義控制項文章，就模仿這個試一試。

1 先看效果圖：完整原始碼在這裡

2.具體實現：

（1）初始化一些畫筆

從圖中可以分析出，我們需要如下畫筆：畫外面黑色大圓，畫時鐘數字，畫中間文字，畫時鐘刻度等等，也就是需要什麼畫筆new出來就好。

/**
* 初始化畫筆：
*/private void init()

（2）有了畫筆，我們就開始畫想要的形狀了：

可以把這個控制項理解為乙個進度控制項，就好畫多了,所以我這個控制項在外部呼叫需要傳遞乙個progrgess進度

public void setprogress(int progress)

//畫中間的文字：將進度轉化為文字：2*progress min
int number = 2*progress;
string text = "";
int hour = 0;
int min = 0;
if(number>60)else
canvas.drawtext(text, mwidth / 2, mheight / 2 + 20, textpaint);

畫好文字之後，將畫布平移到中心點，為什麼這樣做呢？因為android座標系是從左上角開始的，個人覺得這樣某些點的座標不好計算。而平移之後，就和我們數學當中的座標系保持一致了，這個大家非常熟悉，計算起來就得心應手了。

平移座標到中心的**：

//座標轉移到中心：
canvas.translate(mwidth / 2, mheight / 2);

座標轉移到中心，畫下面的就非常簡單了：

//畫外面的大圓：
canvas.drawcircle(0, 0, raduis, blackpaint);

畫圓上的數字：我這個寫得比較複雜一點，是由於實際過程中，有些數字會畫得有點偏，沒有對準，然後就針對一些具體的數字做了微調，裡面看似複雜的(raduis - 80) * math.cos(math.toradians(90))這個其實就是圓弧上座標的計算：

//畫文字：不要旋轉
for (int i = 0; i < 12; i++) else if (i <= 3) else
} else if (i <= 6) else if (i <= 9) else
} else if (i <= 11) 
}

之後是畫刻度，這比較簡單，每畫完一根就旋轉下角度就好

//畫刻度：
for (int i = 0; i < 48; i++) else 
canvas.rotate(7.5f);
}

畫總計睡眠時間走過的圓弧：

mrectf = new rectf(-mwidth / 2 + 40, -mwidth / 2 + 40, mwidth / 2 - 40, mwidth / 2 - 40);
//設定漸變色
lineargradient lineargradient = new lineargradient((float) (raduis * math.cos(math.toradians(progress / 2))), (float) (-raduis * math.sin(math.toradians(progress / 2))), (float) (raduis * math.cos(math.toradians(progress / 2))), (float) (raduis * math.sin(math.toradians(progress / 2))), color.parsecolor("#ff9801"), color.parsecolor("#ffcb05"), shader.tilemode.clamp);
yellowpaint.setshader(lineargradient);
canvas.drawarc(mrectf, -progress / 2, progress, false, yellowpaint);

首尾處也有2個半圓，這個是為了讓進度條頭尾處的弧度好看不生硬。

//畫首尾2端：頭部：尾部，角度轉化為弧度
canvas.drawcircle((float) (raduis * math.cos(math.toradians(progress / 2))), (float) (-raduis * math.sin(math.toradians(progress / 2))), 1, headtailpaint);
canvas.drawcircle((float) (raduis * math.cos(math.toradians(progress / 2))), (float) (raduis * math.sin(math.toradians(progress / 2))), 1, headtailpaint1);

最後就是首尾處各有乙個黑色小圓：

//畫中間套住的兩個圓
canvas.drawcircle((float) (raduis * math.cos(math.toradians(progress / 2 - 0.3))), (float) (-raduis * math.sin(math.toradians(progress / 2 - 0.3))), 1, smallpaint);
canvas.drawcircle((float) (raduis * math.cos(math.toradians(progress / 2 - 0.3))), (float) (raduis * math.sin(math.toradians(progress / 2 - 0.3))), 1, smallpaint);

以上畫完之後，這個控制項自定義就基本完成，但是我們要給它加點動畫效果，定義乙個方法，不斷改變progress的值即可

public void startanimation()

乙個完整的仿ios就寢控制項就做好了。

外界呼叫方法如下：

xml布局中引入此控制項

設定progress

呼叫startanimation

仿ios 就寢控制項

SwipeListView實現仿ios的側滑

仿ios垂直滾動選擇

仿android4 0 switch控制項

仿ios 就寢控制項

SwipeListView實現仿ios的側滑

仿ios垂直滾動選擇

仿android4 0 switch控制項

相關推薦