Android自定義View之酷炫數(shù)字圓環(huán)
本文實(shí)例為大家分享了Android自定義View之酷炫數(shù)字圓環(huán)的具體代碼,供大家參考,具體內(nèi)容如下
先看下最終的效果
一、開(kāi)始實(shí)現(xiàn)
新建一個(gè)DoughnutView繼承View
public class DoughnutView extends View { }
先重寫onMeasure方法。
/** * 當(dāng)布局為wrap_content時(shí)設(shè)置默認(rèn)長(zhǎng)寬 * * @param widthMeasureSpec * @param heightMeasureSpec */ @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { setMeasuredDimension(measure(widthMeasureSpec), measure(heightMeasureSpec)); } private int measure(int origin) { int result = DEFAULT_MIN_WIDTH; int specMode = MeasureSpec.getMode(origin); int specSize = MeasureSpec.getSize(origin); if (specMode == MeasureSpec.EXACTLY) { result = specSize; } else { if (specMode == MeasureSpec.AT_MOST) { result = Math.min(result, specSize); } } return result; }
下面就是最重要的重寫onDraw方法,大致流程如下
1、畫白色圓環(huán)(背景),記得改下Activity背景色不然白色圓環(huán)看不出來(lái)。
//畫背景白色圓環(huán) initPaint(); float doughnutWidth = Math.min(width, height) / 2 * 0.15f; paint.setStrokeWidth(doughnutWidth); paint.setStyle(Paint.Style.STROKE); paint.setColor(Color.WHITE); paint.setAntiAlias(true); RectF rectF = new RectF((width > height ? Math.abs(width - height) / 2 : 0) + doughnutWidth / 2, (height > width ? Math.abs(height - width) / 2 : 0) + doughnutWidth / 2, width - (width > height ? Math.abs(width - height) / 2 : 0) - doughnutWidth / 2, height - (height > width ? Math.abs(height - width) / 2 : 0) - doughnutWidth / 2); canvas.drawArc(rectF, 0, 360, false, paint);
2、畫彩色圓環(huán)
使用SweepGradient來(lái)實(shí)現(xiàn)圓環(huán)漸變的效果,這里有個(gè)判斷當(dāng)設(shè)置的顏色數(shù)組只有一個(gè)顏色的時(shí)候,直接'setColor',有多個(gè)顏色才使用SweepGradient實(shí)現(xiàn)漸變色。這樣就能既支持漸變色又支持單色。
這里還有一點(diǎn)要注意,SweepGradient默認(rèn)是從3點(diǎn)鐘位置開(kāi)始漸變的,為了能讓它從12點(diǎn)鐘位置開(kāi)始漸變所以將畫布旋轉(zhuǎn)了-90°。
//畫彩色圓環(huán) initPaint(); canvas.rotate(-90, width / 2, height / 2); paint.setStrokeWidth(doughnutWidth); paint.setStyle(Paint.Style.STROKE); if (doughnutColors.length > 1) { paint.setShader(new SweepGradient(width / 2, height / 2, doughnutColors, null)); } else { paint.setColor(doughnutColors[0]); } canvas.drawArc(rectF, 0, currentValue, false, paint);
3、畫中間數(shù)值的白色背景(只是為了讓數(shù)值顯示更明顯一些)
//畫中間數(shù)值的背景 int fontSize = 50; initPaint(); paint.setStyle(Paint.Style.FILL); paint.setColor(Color.WHITE); canvas.drawCircle(width / 2, height / 2, fontSize * 2, paint);}
4、畫中間數(shù)值
//畫中間數(shù)值 canvas.rotate(90, width / 2, height / 2); initPaint(); paint.setColor(ColorUtils.getCurrentColor(currentValue / 360f, doughnutColors)); paint.setTextSize(fontSize); paint.setTextAlign(Paint.Align.CENTER); float baseLine = height / 2 - (paint.getFontMetrics().descent + paint.getFontMetrics().ascent) / 2; canvas.drawText((int) (currentValue / 360f * 100) + "%", width / 2, baseLine, paint);
這里有兩點(diǎn)比較坑:
1、數(shù)值的顏色
要實(shí)現(xiàn)的效果是讓數(shù)值的顏色是跟彩色圓環(huán)終點(diǎn)的顏色是一樣的。尋尋覓覓很久也沒(méi)有找到獲取SweepGradient渲染到某一個(gè)角度時(shí)顏色的方法=_=
最終花了差不多半天時(shí)間寫了個(gè)顏色漸變算法,代碼如下:
/** * 顏色漸變算法 * 獲取某個(gè)百分比下的漸變顏色值 * * @param percent * @param colors * @return */ public static int getCurrentColor(float percent, int[] colors) { float[][] f = new float[colors.length][3]; for (int i = 0; i < colors.length; i++) { f[i][0] = (colors[i] & 0xff0000) >> 16; f[i][1] = (colors[i] & 0x00ff00) >> 8; f[i][2] = (colors[i] & 0x0000ff); } float[] result = new float[3]; for (int i = 0; i < 3; i++) { for (int j = 0; j < f.length; j++) { if (f.length == 1 || percent == j / (f.length - 1f)) { result = f[j]; } else { if (percent > j / (f.length - 1f) && percent < (j + 1f) / (f.length - 1)) { result[i] = f[j][i] - (f[j][i] - f[j + 1][i]) * (percent - j / (f.length - 1f)) * (f.length - 1f); } } } } return Color.rgb((int) result[0], (int) result[1], (int) result[2]); }
2、數(shù)值居中對(duì)齊問(wèn)題
drawText是根據(jù)baseLine來(lái)定位的。具體可以看下下面兩篇文章的分析:文章一、文章二。數(shù)字跟文字字母的居中方式可能還略有不同。
二、動(dòng)畫效果的實(shí)現(xiàn)
先上代碼:
public void setValue(float value) { ValueAnimator valueAnimator = ValueAnimator.ofFloat(currentValue, value); valueAnimator.setDuration(300); valueAnimator.setInterpolator(new Interpolator() { @Override public float getInterpolation(float v) { return 1-(1-v)*(1-v)*(1-v); } }); valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator valueAnimator) { currentValue = (float) valueAnimator.getAnimatedValue(); invalidate(); } }); valueAnimator.start(); }
使用ValueAnimator來(lái)實(shí)現(xiàn)動(dòng)畫效果。還可以設(shè)置不同的插值器來(lái)實(shí)現(xiàn)不同的動(dòng)畫效果:
valueAnimator.setInterpolator(new AccelerateInterpolator());//加速 valueAnimator.setInterpolator(new DecelerateInterpolator());//減速 valueAnimator.setInterpolator(new AccelerateDecelerateInterpolator());//加速減速 valueAnimator.setInterpolator(new LinearInterpolator());//云速
常用插值器介紹可以看這篇文章。
當(dāng)然也可以自己實(shí)現(xiàn)一個(gè)簡(jiǎn)單的插值器:
valueAnimator.setInterpolator(new Interpolator() { @Override public float getInterpolation(float v) { return 1-(1-v)*(1-v)*(1-v); } });
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助。
- Android實(shí)現(xiàn)長(zhǎng)按圓環(huán)動(dòng)畫View效果的思路代碼
- Android自定義View實(shí)現(xiàn)圓環(huán)進(jìn)度條
- Android自定義View實(shí)現(xiàn)圓環(huán)帶數(shù)字百分比進(jìn)度條
- Android自定義view實(shí)現(xiàn)圓環(huán)效果實(shí)例代碼
- android自定義View實(shí)現(xiàn)圓環(huán)顏色選擇器
- Android自定義view繪制圓環(huán)占比動(dòng)畫
- Android自定義View實(shí)現(xiàn)圓環(huán)交替效果
- Android中自定義View實(shí)現(xiàn)圓環(huán)等待及相關(guān)的音量調(diào)節(jié)效果
- Android開(kāi)發(fā)筆記之:在ImageView上繪制圓環(huán)的實(shí)現(xiàn)方法
- Android自定義view實(shí)現(xiàn)半圓環(huán)效果
相關(guān)文章
Android 自定義AlertDialog對(duì)話框樣式
實(shí)際的項(xiàng)目開(kāi)發(fā)當(dāng)中,經(jīng)常需要根據(jù)實(shí)際的需求來(lái)自定義AlertDialog。最近在開(kāi)發(fā)一個(gè)WIFI連接的功能,點(diǎn)擊WIFI需要彈出自定義密碼輸入框,具體代碼大家參考下本文2017-09-09Android Studio實(shí)現(xiàn)簡(jiǎn)易進(jìn)制轉(zhuǎn)換計(jì)算器
這篇文章主要為大家詳細(xì)介紹了Android Studio實(shí)現(xiàn)簡(jiǎn)易進(jìn)制轉(zhuǎn)換計(jì)算器,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-05-05Android Flutter實(shí)現(xiàn)上拉加載組件的示例代碼
既然列表有下拉刷新外當(dāng)然還有上拉加載更多操作了,本次就為大家詳細(xì)介紹如何利用Flutter實(shí)現(xiàn)為列表增加上拉加載更多的交互,感興趣的可以了解一下2022-08-08Android適配器Adapter與ListView和RecycleView的簡(jiǎn)單使用
本文將為大家介紹Android開(kāi)發(fā)中常用的適配器(Adapter)概念,以及ListView和RecycleView的簡(jiǎn)單使用方法,需要的朋友可以參考下2023-05-05Android鬧鈴服務(wù)AlarmManager用法深入分析
這篇文章主要介紹了Android鬧鈴服務(wù)AlarmManager用法,結(jié)合實(shí)例形式深入分析了鬧鈴服務(wù)AlarmManager的功能、原理、定義與使用方法,需要的朋友可以參考下2016-08-08Android開(kāi)發(fā)之button事件監(jiān)聽(tīng)簡(jiǎn)單實(shí)例
這篇文章主要介紹了Android開(kāi)發(fā)之button事件監(jiān)聽(tīng)實(shí)現(xiàn)方法,實(shí)例分析了事件監(jiān)聽(tīng)的使用技巧與注意事項(xiàng),需要的朋友可以參考下2015-05-05android:TextView簡(jiǎn)單設(shè)置文本樣式和超鏈接的方法
這篇文章主要介紹了android:TextView簡(jiǎn)單設(shè)置文本樣式和超鏈接的方法,涉及TextView常見(jiàn)文字屬性的相關(guān)操作技巧,需要的朋友可以參考下2016-08-08