Android 實(shí)現(xiàn)自定義圓形進(jìn)度條的實(shí)例代碼
Android 自定義圓形進(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í)候,必須重寫該構(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);//畫實(shí)心圓
if (mschedual <= 100) {//,如果當(dāng)前進(jìn)度小于100,畫實(shí)心矩形
paint.setColor(Color.WHITE);
canvas.drawRect(width/2-circleHalf,height/2-circleHalf,width/2+circleHalf,height/2+circleHalf - mschedual*circleHalf/50, paint);
}
//畫當(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
//畫空心圓
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)單。
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
Android 帶箭頭的指引tipLayout實(shí)現(xiàn)示例代碼
本篇文章主要介紹了Android 帶箭頭的指引tipLayout實(shí)現(xiàn)示例代碼,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
android自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了android自定義環(huán)形統(tǒng)計(jì)圖動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07
Android粒子線條效果實(shí)現(xiàn)過(guò)程與代碼
這篇文章主要介紹了Android粒子線條效果的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧2023-02-02
一文詳解?Compose?Navigation?的實(shí)現(xiàn)原理
這篇文章主要介紹了一文詳解?Compose?Navigation的實(shí)現(xiàn)原理,文章通告圍繞主題展開(kāi)詳細(xì)的相關(guān)內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-08-08
Android TV 3D卡片無(wú)限循環(huán)效果
這篇文章主要為大家詳細(xì)介紹了Android TV 3D卡片無(wú)限循環(huán)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-11-11
Android啟動(dòng)頁(yè)優(yōu)化之實(shí)現(xiàn)應(yīng)用秒開(kāi)
現(xiàn)在很多應(yīng)用都會(huì)在進(jìn)入主界面之前,添加一個(gè)啟動(dòng)頁(yè),然后加入幾秒鐘的廣告,我覺(jué)得這個(gè)不能算是 “真正意義上的 “ 啟動(dòng)頁(yè),應(yīng)該叫廣告頁(yè)。2021-05-05
Android ApplicationInfo 應(yīng)用程序信息的詳解
這篇文章主要介紹了Android ApplicationInfo 應(yīng)用程序信息的詳解的相關(guān)資料,希望通過(guò)本文能幫助到大家,需要的朋友可以參考下2017-10-10
Android中的指紋識(shí)別demo開(kāi)發(fā)實(shí)例
這篇文章主要介紹了Android中的指紋識(shí)別demo開(kāi)發(fā)實(shí)例的相關(guān)知識(shí),非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-09-09

