Android studio圓形進度條 百分數(shù)跟隨變化
更新時間：2017年10月23日 09:29:23 作者：飛鳥96
這篇文章主要為大家詳細介紹了Android studio圓形進度條，百分號跟隨變化，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了Android studio圓形進度條展示的具體代碼，供大家參考，具體內(nèi)容如下
MainActivity
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private Gua mGua1;
private Button play;
private Button resele;
private Button dao;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mGua1 = (Gua) findViewById(R.id.Circle);
mGua1.setTargetPercent(0);
play=(Button)findViewById(R.id.play);
resele=(Button)findViewById(R.id.resele);
dao=(Button)findViewById(R.id.dao);
play.setOnClickListener(this);
resele.setOnClickListener(this);
dao.setOnClickListener(this);
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.play:
//設(shè)置目標百分比為100
mGua1.setTargetPercent(100);
mGua1.invalidate();
break;
case R.id.resele:
//設(shè)置目標百分比為0
mGua1.setTargetPercent(0);
mGua1.invalidate();
break;
case R.id.dao:
//設(shè)置目標百分比為100
mGua1.setTargetPercent(0);
mGua1.invalidate();
break;
}
}
}
Gua
import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;
public class Gua extends View{
private Paint mCirclePaint;
private Paint mTextPaint;
private Paint mArcPaint;
private int mCircleX;
private int mCircleY;
private float mCurrentAngle;
private RectF mArcRectF;
private float mStartSweepValue;
private float mTargetPercent;
private float mCurrentPercent;
private int mRadius;
private int mCircleBackground;
private int mRingColor;
private int mTextSize;
private int mTextColor;
public Gua(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init(context);
}
public Gua(Context context, AttributeSet attrs) {
super(context, attrs);
//自定義屬性 values/attr
TypedArray typedArray = context.obtainStyledAttributes(attrs,R.styleable.PercentageRing);
//中間圓的背景顏色 默認為淺紫色
mCircleBackground = typedArray.getColor(R.styleable.PercentageRing_circleBackground, 0xffafb4db);
//外圓環(huán)的顏色 默認為深紫色
mRingColor = typedArray.getColor(R.styleable.PercentageRing_ringColor, 0xff6950a1);
//中間圓的半徑 默認為60
mRadius = typedArray.getInt(R.styleable.PercentageRing_radius, 60);
//字體顏色 默認為白色
mTextColor = typedArray.getColor(R.styleable.PercentageRing_textColor, 0xffffffff);
//最后一定要調(diào)用這個 釋放掉TypedArray
typedArray.recycle();
//初始化數(shù)據(jù)
init(context);
}
public Gua(Context context) {
super(context);
init(context);
}
private void init(Context context){
//圓環(huán)開始角度 -90° 正北方向
mStartSweepValue = -90;
//當前角度
mCurrentAngle = 0;
//當前百分比
mCurrentPercent = 0;
//設(shè)置中心園的畫筆
mCirclePaint = new Paint();
mCirclePaint.setAntiAlias(true);
mCirclePaint.setColor(mCircleBackground);
mCirclePaint.setStyle(Paint.Style.FILL);
//設(shè)置文字的畫筆
mTextPaint = new Paint();
mTextPaint.setColor(mTextColor);
mTextPaint.setAntiAlias(true);
mTextPaint.setStyle(Paint.Style.FILL);
mTextPaint.setStrokeWidth((float) (0.025*mRadius));
mTextPaint.setTextSize(mRadius/2);
mTextPaint.setTextAlign(Align.CENTER);
//設(shè)置外圓環(huán)的畫筆
mArcPaint = new Paint();
mArcPaint.setAntiAlias(true);
mArcPaint.setColor(mRingColor);
mArcPaint.setStyle(Paint.Style.STROKE);
mArcPaint.setStrokeWidth((float) (0.075*mRadius));
//獲得文字的字號 因為要設(shè)置文字在圓的中心位置
mTextSize = (int) mTextPaint.getTextSize();
}
//主要是測量wrap_content時候的寬和高，因為寬高一樣，只需要測量一次寬即可，高等于寬
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(measure(widthMeasureSpec), measure(widthMeasureSpec));
//設(shè)置圓心坐標
mCircleX = getMeasuredWidth()/2;
mCircleY = getMeasuredHeight()/2;
//如果半徑大于圓心橫坐標，需要手動縮小半徑的值，否則就畫到外面去了
if (mRadius>mCircleX) {
//設(shè)置半徑大小為圓心橫坐標到原點的距離
mRadius = mCircleX;
mRadius = (int) (mCircleX-0.075*mRadius);
//因為半徑改變了，所以要重新設(shè)置一下字體寬度
mTextPaint.setStrokeWidth((float) (0.025*mRadius));
//重新設(shè)置字號
mTextPaint.setTextSize(mRadius/2);
//重新設(shè)置外圓環(huán)寬度
mArcPaint.setStrokeWidth((float) (0.075*mRadius));
//重新獲得字號大小
mTextSize = (int) mTextPaint.getTextSize();
}
//畫中心園的外接矩形，用來畫圓環(huán)用
mArcRectF = new RectF(mCircleX-mRadius, mCircleY-mRadius, mCircleX+mRadius, mCircleY+mRadius);
}
//當wrap_content的時候，view的大小根據(jù)半徑大小改變，但最大不會超過屏幕
private int measure(int measureSpec){
int result=0;
int specMode = MeasureSpec.getMode(measureSpec);
int specSize = MeasureSpec.getSize(measureSpec);
if (specMode == MeasureSpec.EXACTLY) {
result = specSize;
}else {
result =(int) (1.075*mRadius*2);
if (specMode == MeasureSpec.AT_MOST) {
result = Math.min(result, specSize);
}
}
return result;
}
//開始畫中間圓、文字和外圓環(huán)
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//畫中間圓
canvas.drawCircle(mCircleX, mCircleY, mRadius, mCirclePaint);
//畫圓環(huán)
canvas.drawArc(mArcRectF, mStartSweepValue ,mCurrentAngle, false, mArcPaint);
//畫文字
canvas.drawText(String.valueOf(mCurrentPercent)+"%", mCircleX, mCircleY+mTextSize/4, mTextPaint);
//判斷當前百分比是否小于設(shè)置目標的百分比
if (mCurrentPercent<mTargetPercent) {
//當前百分比+1
mCurrentPercent+=1;
//當前角度+360
mCurrentAngle+=3.6;
//每10ms重畫一次
postInvalidateDelayed(10);
}/*else if(mCurrentPercent==mTargetPercent){
//當前百分比-1
mCurrentPercent=0;
//當前角度+360
mCurrentAngle=0;
//每10ms重畫一次
postInvalidateDelayed(10);
}*/else if(mCurrentPercent>mTargetPercent){
//當前百分比-1
mCurrentPercent-=1;
//當前角度+360
mCurrentAngle-=3.6;
//每10ms重畫一次
postInvalidateDelayed(10);
}
}
//設(shè)置目標的百分比
public void setTargetPercent(int percent){
this.mTargetPercent = percent;
}
}
Xml文件
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <Button android:id="@+id/but1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="改變外層圓環(huán)顏色" /> <com.bwie.test.wuxiaorui1508a20171009.Gua android:id="@+id/Circle" android:layout_width="wrap_content" android:layout_height="wrap_content" app:radius="90" app:textColor="#ffffffff" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:gravity="center" > <Button android:id="@+id/play" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="開始" /> <Button android:id="@+id/resele" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="重置" /> <Button android:id="@+id/dao" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="暫停" /> </LinearLayout> </LinearLayout>
values文件中的attrs
<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="PercentageRing"> <attr name="radius" format="integer"/> <attr name="circleBackground" format="color"/> <attr name="ringColor" format="color"/> <attr name="textColor" format = "color"/> </declare-styleable> </resources>
效果展示：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了Android自定義View實現(xiàn)標簽流效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
這篇文章主要給大家介紹了關(guān)于Android高性能日志寫入方案的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
這篇文章主要介紹了淺談Android Studio3.0更新之路（遇坑必入）,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
Android開發(fā)之TimePicker控件用法實例詳解
這篇文章主要介紹了Android開發(fā)之TimePicker控件用法,結(jié)合實例形式詳細分析了Android項目的建立及TimePicker控件的具體使用技巧,需要的朋友可以參考下2016-02-02
這篇文章主要介紹了Android中判斷屏幕是否亮屏和是否解鎖功能,需要的朋友可以參考下2017-02-02
Room是Google推出的Android架構(gòu)組件庫中的數(shù)據(jù)持久化組件庫, 也可以說是在SQLite上實現(xiàn)的一套ORM解決方案。下面通過本文給大家介紹Android架構(gòu)組件Room指南，需要的朋友參考下吧2017-12-12
這篇文章介紹了Android 文件選擇的實現(xiàn)代碼，有需要的朋友可以參考一下2013-08-08
在Android SDK中提供了4種用于跨進程通訊的方式。這篇文章主要介紹了詳解Android 進程間通信的幾種實現(xiàn)方式，有興趣的可以了解一下。2017-01-01
這篇文章主要介紹了Android 百度地圖Sha1獲取的方法的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android 老生常談LayoutInflater的新認知
今天不想去聊一些Android的新功能，新特性之類的東西，特別想聊一聊這個老生常談的話題：LayoutInflater，感興趣的朋友來看看吧2022-03-03