編輯:關於Android編程
<喎?/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxoMiBpZD0="模仿效果">模仿效果
PNG
GIF
根據進度值繪制等級進度
關鍵在於坐標的計算(三角函數的運用,哈哈),與旋轉角度的掌控。
/** * 繪制中心線 * * @param canvas */ private void center(Canvas canvas) { //繪制七邊形中心線 canvas.save();//保存當前狀態 canvas.rotate(0, center, center); float startY = getPaddingTop() + 2 * str_rect.height(); float endY = center; float du = (float) (360 / 7 + 0.5); for (int i = 0; i < 7; i++) { canvas.drawLine(center, startY, center, endY, center_paint); canvas.rotate(du, center, center); } canvas.restore();//恢復之前狀態 }
先計算出圓心到A點的坐標,
在計算出旋轉的角度(360/7),
然後旋轉7次Canvas,繪制7條中心線。
為了加深顯示效果,先繪制一個綠色背景作參考。
各坐標點的計算主要用到了三角函數。
A點
x : 對應圓心center。
y :paddingTop+2個字體高度的距離
B點
seorRUI8L3A+DQo8cD7A+9PDyP29x7qvyv25q8q9o6xCRT1zaW4oQUK1xLzQvccpKk9CPC9wPg0KPHA+1eLA79PQuPa/06OsTWF0aC5zaW4oeCnA77XEeMrHu6G2yKOstviyu8rHvce2yKGjPC9wPg0KPHA+yOe5+9KqvMbL473HtsjU8tDo0qq808nPTWF0aC5zaW4oTWF0aC50b1JhZGlhbnMoeCkpPC9wPg0KPHA+Y2VudGVyKyBNYXRoLnNpbihNYXRoLnRvUmFkaWFucygzNjAvNykpICpvbmVfcmFkaXVzPC9wPg0KPHA+eSCjukG147XEedf4seorQUU8L3A+DQo8cD7NrMDtQUU9T0EtT0UsT0U9Y29zKEFCtcS80L3HKSpPQjwvcD4NCjxwPk9FPWNvcyhBQrXEvNC9xykqT0I8L3A+DQo8cD5NYXRoLmFicyhNYXRoLmNvcyhNYXRoLnRvUmFkaWFucygzNjAvNykpICpvbmVfcmFkaXVzPC9wPg0KPHA+08nT2tPgz9LT0NX9uLrWtaOs1eLA79KqyKG++LbU1rU8L3A+DQo8cD5BRT1PQS1PRTwvcD4NCjxwPihnZXRQYWRkaW5nVG9wKCkgKzIqc3RyX3JlY3QuaGVpZ2h0KCkgK29uZV9yYWRpdXM8L3A+DQpNYXRoLmFicyhNYXRoLmNvcyhNYXRoLnRvUmFkaWFucygzNjAvNykpICpvbmVfcmFkaXVzKSkNCjxwPkO14zxiciAvPg0KPGltZyBhbHQ9"這裡寫圖片描述" src="/uploadfile/Collfiles/20160929/20160929092109199.png" title="\" />
x :圓心X+FC
Math.sin(Math.toRadians(360/7+360/7/2)) *one_radius
y: 圓心Y+OF
(Math.cos(Math.toRadians(360/7+360/7/2)) *one_radius) +center
D點
x :圓心x+HD
center+ Math.sin(Math.toRadians(360/7/2)) *one_radius
y:圓心y+OH
Math.cos(Math.toRadians(360/7/2)) *one_radius) +center
右邊點繪制完後,左邊點自然就簡單了,y位置一樣,x位置只需要把相加改成相減即可。
繪制完最外層七邊形後,剩下來的就好辦了,只需要計算出每個七邊形的間距即可。
由原型圖分析,每一個正七邊形占半徑的四分之一。
/** * 繪制第二層多邊形 * * @param canvas */ private void twoPolygons(Canvas canvas) { distance = one_radius / 4; Path path = new Path(); path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance); //起始點 path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance)))); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance)))); path.close(); canvas.drawPath(path, two_paint); } /** * 繪制第三層多邊形 * * @param canvas */ private void threePolygons(Canvas canvas) { distance = one_radius / 2; Path path = new Path(); path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance); //起始點 path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance)))); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance)))); path.close(); canvas.drawPath(path, three_paint); } /** * 繪制最內層多邊形 * * @param canvas */ private void fourPolygons(Canvas canvas) { distance = one_radius / 2 + one_radius / 4; Path path = new Path(); path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + distance); //起始點 path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance)))); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - distance)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - distance)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - distance)))); path.close(); canvas.drawPath(path, four_paint); }
去掉綠色背景後,顯示的效果
根據最外層多邊形各點坐標以及字體的長度高度 微調。
privateRectstr_rect;//字體矩形 String[]str= {"擊殺","生存","助攻","物理","魔法","防御","金錢"}; /** * 繪制字體 * * @param canvas */ private void PaintFout(Canvas canvas) { canvas.drawText(str[0], center - str_rect.width() / 2, (float) (getPaddingTop() + 1.5 * str_rect.height()), str_paint); canvas.drawText(str[1], (float) (center + Math.sin(Math.toRadians(360 / 7)) * one_radius + str_rect.height() / 2), (float) ((getPaddingTop() + 2 * str_rect.height() + one_radius - Math.abs(Math.cos(Math.toRadians(360 / 7)) * one_radius))), str_paint); canvas.drawText(str[2], (float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius + str_rect.height() / 2), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius) + center + str_rect.height() / 2, str_paint); canvas.drawText(str[3], (float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * one_radius - str_rect.height() / 2 + str_rect.width() / 2), (float) ((Math.cos(Math.toRadians(360 / 7 / 2)) * one_radius) + center + str_rect.height()), str_paint); canvas.drawText(str[4], (float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * one_radius + str_rect.height() / 2 - str_rect.width() * 1.5), (float) ((Math.cos(Math.toRadians(360 / 7 / 2)) * one_radius) + center + str_rect.height()), str_paint); canvas.drawText(str[5], (float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius - str_rect.height() / 2 - str_rect.width()), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * one_radius) + center + str_rect.height() / 2, str_paint); canvas.drawText(str[6], (float) (center - Math.sin(Math.toRadians(360 / 7)) * one_radius - str_rect.height() / 2 - str_rect.width()), (float) ((getPaddingTop() + 2 * str_rect.height() + one_radius - Math.abs(Math.cos(Math.toRadians(360 / 7)) * one_radius))), str_paint); }
/** * 繪制等級進度 */ private void PaintRank(Canvas canvas) { Path path = new Path(); path.moveTo(center, getPaddingTop() + 2 * str_rect.height() + f1); //起始點 path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7)) * (one_radius - f2)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - f2)))); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f3)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f3)) + center); path.lineTo((float) (center + Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - f4)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - f4)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 / 2)) * (one_radius - f5)), (float) (Math.cos(Math.toRadians(360 / 7 / 2)) * (one_radius - f5)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f6)), (float) (Math.cos(Math.toRadians(360 / 7 + 360 / 7 / 2)) * (one_radius - f6)) + center); path.lineTo((float) (center - Math.sin(Math.toRadians(360 / 7)) * (one_radius - f7)), (float) (getPaddingTop() + 2 * str_rect.height() + (one_radius) - Math.abs(Math.cos(Math.toRadians(360 / 7)) * (one_radius - f7)))); path.close(); canvas.drawPath(path, mPaint); }
感興趣的同學可直接到github下載源碼查看。
如果你覺得還不錯,可以給個star,支持下,謝謝了!
https://github.com/jiangzehui/polygonsview
圖像狀態資源只能定義有限的幾種狀態。如果需要更多的狀態,就要使用圖像級別資源。在該資源文件中可以定義任意多個圖像級別。每個圖像級別是一個整數區間,可以通過ImageVie
功能描述菜單分左右兩側,整體可以滑動,效果如下功能分析widthMeasureSpec:期望值組成: 32位的010101010101011010101組成 頭2位:代表
Android開發之向桌面添加快捷方式 對於一個希望擁有更多用戶的應用來說,用戶桌面可以說是所有軟件的必爭之地,如果用戶在手機桌面上建立了該軟件的快捷方式,用戶將會更頻繁
先給大家展示下效果圖,大家覺效果滿意,請參考實現代碼。直接上代碼:private void setDialog(){View view = getLayoutInflat