Android實(shí)現(xiàn)自定義圓形進(jìn)度條
今天無(wú)意中發(fā)現(xiàn)一個(gè)圓形進(jìn)度,想想自己實(shí)現(xiàn)一個(gè),如下圖:
基本思路是這樣的:
1.首先繪制一個(gè)實(shí)心圓
2.繪制一個(gè)白色實(shí)心的正方形,遮住實(shí)心圓
3.在圓的中心動(dòng)態(tài)繪制當(dāng)前進(jìn)度的百分比字符
4.繪制一個(gè)與之前實(shí)心圓相同顏色的空心圓
5.逐漸改變當(dāng)前的百分比
6.根據(jù)百分比,逐漸改變正方形的大小,逐漸減小正方形的底部y軸的坐標(biāo),不斷重繪,直到達(dá)到100%
首先看看自定義的屬性
在values目錄下新建attrs.xml內(nèi)容如下:
定義繪制圓形的背景色,和繪制圓形的半徑大小
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="circlecolor" format="color"></attr> <attr name="half" format="dimension"></attr> <declare-styleable name="myCircleImage"> <attr name="circlecolor"></attr> <attr name="half"></attr> </declare-styleable> </resources>
自定義視圖
import android.annotation.SuppressLint; import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.text.TextPaint; import android.util.AttributeSet; import android.util.Log; import android.view.View; public class CirclePro extends View { private Paint paint; private int circleBack;//圓的背景色 private int mschedual = 0;//用于控制動(dòng)態(tài)變化 float circleHalf; //圓的半徑 String percent = "";//繪制百分比的字符串 @SuppressLint("Recycle") public CirclePro(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); paint = new Paint(); TypedArray array = context.getTheme().obtainStyledAttributes(attrs, R.styleable.myCircleImage, defStyleAttr,0); @SuppressWarnings("unused") int leng = array.length(); //獲取自定義的屬性,這里注意是R.styleable.myCircleImage_circlecolor而不是R.attr.circlecolor circleBack = array.getColor(R.styleable.myCircleImage_circlecolor,Color.GREEN); circleHalf = array.getDimension(R.styleable.myCircleImage_half,200.f); System.out.println(circleBack); } /** * 這個(gè)構(gòu)造參數(shù),當(dāng)在布局文件中引用該view的時(shí)候,必須重寫(xiě)該構(gòu)造函數(shù) * @param context * @param attrs */ public CirclePro(Context context, AttributeSet attrs) { this(context, attrs, 0);//調(diào)用自己的構(gòu)造函數(shù) } /** * 根據(jù)文本的 * @param text * @param textSize * @return */ public float getTextWidth(String text,float textSize) { TextPaint textPaint = new TextPaint(); textPaint.setTextSize(textSize); return textPaint.measureText(text); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); float height = getHeight(); float width = getWidth(); // float circleHalf = (float) (width*0.7/2); paint.setColor(circleBack); paint.setAntiAlias(true); paint.setStyle(Paint.Style.FILL); canvas.drawCircle(width/2,height/2,circleHalf, paint);//畫(huà)實(shí)心圓 if (mschedual <= 100) {//,如果當(dāng)前進(jìn)度小于100,畫(huà)實(shí)心矩形 paint.setColor(Color.WHITE); canvas.drawRect(width/2-circleHalf,height/2-circleHalf,width/2+circleHalf,height/2+circleHalf - mschedual*circleHalf/50, paint); } //畫(huà)當(dāng)前進(jìn)度的字符串 paint.setColor(Color.BLACK); paint.setTextSize(30.f); percent = mschedual+" %"; canvas.drawText(percent, width/2-getTextWidth(percent,30)/2,height/2+paint.getTextSize()*3/8, paint);//字體的高度=paint.getTextSize()*3/4 //畫(huà)空心圓 paint.setColor(circleBack); paint.setStyle(Paint.Style.STROKE); canvas.drawCircle(width/2,height/2,circleHalf, paint); if (mschedual < 100) {//更改當(dāng)前進(jìn)度值,并重繪 mschedual++; invalidate(); } } }
在activity_main.xml中,需要用到自定義的屬性,首先添加命名空間: xmlns:liu=”http://schemas.android.com/apk/res/com.example.androidcirclepro”
其中l(wèi)iu是自定義的一個(gè)前綴,隨意命名的,com.example.androidcirclepro是我們的應(yīng)用的包名
activity_main.xmln內(nèi)容如下:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:liu="http://schemas.android.com/apk/res/com.example.androidcirclepro" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity" > <com.example.androidcirclepro.CirclePro android:layout_width="match_parent" android:layout_height="match_parent" liu:half="90dp" liu:circlecolor="#fff0f0" /> </RelativeLayout>
至此一個(gè)自定義的圓形進(jìn)度條就完成了,是不是很簡(jiǎn)單。
相關(guān)文章
Android實(shí)現(xiàn)平滑翻動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)平滑翻動(dòng)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04詳解Flutter Image組件如何處理圖片加載過(guò)程中的錯(cuò)誤
在Flutter中,Image組件可以通過(guò)監(jiān)聽(tīng)加載過(guò)程中的錯(cuò)誤來(lái)處理圖片加載過(guò)程中的錯(cuò)誤,本文小編將給大家詳細(xì)介紹了Flutter Image組件是如何處理圖片加載過(guò)程中的錯(cuò)誤,文中有詳細(xì)的代碼示例供大家參考,需要的朋友可以參下2023-10-10Android面向單Activity開(kāi)發(fā)示例解析
這篇文章主要為大家介紹了Android面向單Activity開(kāi)發(fā)示例解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02Android通過(guò)交互實(shí)現(xiàn)貝塞爾曲線的繪制
本篇我們將介紹簡(jiǎn)單的交互式繪圖,通過(guò)獲取觸控位置來(lái)設(shè)定貝塞爾曲線的控制點(diǎn),從而實(shí)現(xiàn)交互式繪制曲線,感興趣的小伙伴可以了解一下2022-05-05Android 圓角邊框的實(shí)現(xiàn)方式匯總
這篇文章主要介紹了Android 圓角邊框的實(shí)現(xiàn)方式匯總的相關(guān)資料,需要的朋友可以參考下2016-03-03android基于ListView和CheckBox實(shí)現(xiàn)多選和全選記錄的功能
本篇文章主要介紹了android基于ListView和CheckBox實(shí)現(xiàn)多選和全選記錄的功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2016-11-11Android控件SeekBar仿淘寶滑動(dòng)驗(yàn)證效果
這篇文章主要為大家詳細(xì)介紹了Android控件SeekBar仿淘寶滑動(dòng)驗(yàn)證效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11android打開(kāi)應(yīng)用所在的市場(chǎng)頁(yè)面進(jìn)行評(píng)分操作的方法
這篇文章主要介紹了android打開(kāi)應(yīng)用所在的市場(chǎng)頁(yè)面進(jìn)行評(píng)分操作的方法,涉及Android操作市場(chǎng)頁(yè)面評(píng)分效果的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04Android開(kāi)發(fā)中Intent.Action各種常見(jiàn)的作用匯總
今天小編就為大家分享一篇關(guān)于Android開(kāi)發(fā)中Intent.Action各種常見(jiàn)的作用匯總,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2018-12-12