偶然有天發現朋友圈有人曬出蘋果手機的乙個就寢功能,裡面乙個顯示睡眠時間的控制項,覺得這個控制項非常好看,而且正好看了一系列的自定義控制項文章,就模仿這個試一試。
1 先看效果圖:完整原始碼在這裡
2.具體實現:
(1)初始化一些畫筆
從圖中可以分析出,我們需要如下畫筆:畫外面黑色大圓,畫時鐘數字,畫中間文字,畫時鐘刻度等等,也就是需要什麼畫筆new出來就好。
(2)有了畫筆,我們就開始畫想要的形狀了:/**
* 初始化畫筆:
*/private void init()
可以把這個控制項理解為乙個進度控制項,就好畫多了,所以我這個控制項在外部呼叫需要傳遞乙個progrgess進度
public void setprogress(int progress)
畫好文字之後,將畫布平移到中心點,為什麼這樣做呢?因為android座標系是從左上角開始的,個人覺得這樣某些點的座標不好計算。而平移之後,就和我們數學當中的座標系保持一致了,這個大家非常熟悉,計算起來就得心應手了。//畫中間的文字:將進度轉化為文字: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);
平移座標到中心的**:
座標轉移到中心,畫下面的就非常簡單了://座標轉移到中心:
canvas.translate(mwidth / 2, mheight / 2);
畫圓上的數字:我這個寫得比較複雜一點,是由於實際過程中,有些數字會畫得有點偏,沒有對準,然後就針對一些具體的數字做了微調,裡面看似複雜的(raduis - 80) * math.cos(math.toradians(90))這個其實就是圓弧上座標的計算://畫外面的大圓:
canvas.drawcircle(0, 0, raduis, blackpaint);
之後是畫刻度,這比較簡單,每畫完一根就旋轉下角度就好//畫文字:不要旋轉
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);
}
首尾處也有2個半圓,這個是為了讓進度條頭尾處的弧度好看不生硬。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端:頭部:尾部,角度轉化為弧度
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);
以上畫完之後,這個控制項自定義就基本完成,但是我們要給它加點動畫效果,定義乙個方法,不斷改變progress的值即可//畫中間套住的兩個圓
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);
public void startanimation()
乙個完整的仿ios就寢控制項就做好了。
外界呼叫方法如下:
xml布局中引入此控制項
設定progress
呼叫startanimation
SwipeListView實現仿ios的側滑
今天介紹乙個swipemenulistview實現側滑刪除的例子,其實和listview的用法一樣,就是多了建立刪除等view的步驟,然後通過addview新增到父布局中。效果如果 當然你也也可以根據自己的需要增加更多的自定義view。直接看 吧 compile com.baoyz.swipemen...
仿ios垂直滾動選擇
注 必須在手機模式下才有效 初始化reload array option2 北京 上海 廣州 深圳 武漢 成都 重慶 s1.reload option2 getvalue 獲取使用者當前選擇資料 例 s1.getvalue 滾動選擇 移動端 function a scrollselect div t...
仿android4 0 switch控制項
最近工作有需求做乙個如同android4.0 switch開關控制那樣的控制項,我覺的很受益,尤其是自定義控制項的寫法,也可以稱為畫法,就總結了一下,以便下次可以參考,如果有需要的朋友也可以多多受益 注 當點開時,ischecked就變成true見附件,文字的開關on和off是畫上去的 對於上文sw...