Android自定義環(huán)形LoadingView效果
最近項目有要用到環(huán)形的進度條,Github上有一個類似的DashedCircularProgress控件,但是他畫的進度是通過設(shè)置畫筆的虛線效果來實現(xiàn)間隔的:progressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));如果內(nèi)層還有一層圓環(huán),在動態(tài)設(shè)置時,內(nèi)層和外層有細(xì)微的偏差.于是我在原有基礎(chǔ)上改了一個,實現(xiàn)了我要的效果(設(shè)置進度時可以選擇加動畫或者不加動畫):
控件實現(xiàn):
這個控件繼承RelativeLayout,在onDraw時做了兩件事:
1、先畫出底部的黑色環(huán)形;
2、按照當(dāng)時的進度值畫出對應(yīng)比例的外層綠色環(huán)形.
對外提供一個接口,回調(diào)當(dāng)前進度值:
public interface OnValueChangeListener { void onValueChange(float value); }
核心繪制類:
InternalCirclePainterImp2,繪制內(nèi)層的黑色的環(huán)形:
/** * @author Chuck */ public class InternalCirclePainterImp2 implements InternalCirclePainter { private RectF internalCircle;//畫出圓弧時,圓弧的外切矩形 private Paint internalCirclePaint; private int color; private float startAngle = 270f; int arcQuantity=100;//等分(圓弧加間隔),比如arcQuantity=100時,表示將有100個圓弧,和100個空白間隔 float ratio=0.5f;//每段圓弧與圓弧加間隔之和的比例,ratio=0.5表示每個圓弧與相鄰的間隔弧度比是1:1 private int width; private int height; private int internalStrokeWidth = 48;//圓環(huán)寬度 public InternalCirclePainterImp2(int color, int progressStrokeWidth, int arcQuantity,float ratio) { this.color = color; this.internalStrokeWidth = progressStrokeWidth; this.arcQuantity = arcQuantity; if(ratio>0&&ratio<1){ this.ratio = ratio; } init(); } private void init() { initExternalCirclePainter(); } private void initExternalCirclePainter() { internalCirclePaint = new Paint(); internalCirclePaint.setAntiAlias(true); internalCirclePaint.setStrokeWidth(internalStrokeWidth); internalCirclePaint.setColor(color); internalCirclePaint.setStyle(Paint.Style.STROKE); } //圓弧外切矩形 private void initExternalCircle() { internalCircle = new RectF(); float padding = internalStrokeWidth * 0.5f; internalCircle.set(padding, padding , width - padding, height - padding); initExternalCirclePainter(); } @Override public void draw(Canvas canvas) { float eachAngle=360f/arcQuantity; float eachArcAngle=eachAngle*ratio; for(int i=0;i<arcQuantity*2;i++){ if(i%2==0){//遇到偶數(shù)就畫圓弧,基數(shù)則跳過 canvas.drawArc(internalCircle, startAngle+eachAngle*i/2, eachArcAngle, false, internalCirclePaint); } else{ continue; } } } public void setColor(int color) { this.color = color; internalCirclePaint.setColor(color); } @Override public int getColor() { return color; } @Override public void onSizeChanged(int height, int width) { this.width = width; this.height = height; initExternalCircle(); } }
ProgressPainterImp2,繪制內(nèi)層的黑色的環(huán)形:
/** * @author Chuck */ public class ProgressPainterImp2 implements ProgressPainter { private RectF progressCircle; private Paint progressPaint; private int color = Color.RED; private float startAngle = 270f; private int internalStrokeWidth = 48; private float min; private float max; private int width; private int height; private int currentPecent;//當(dāng)前的百分比 int arcQuantity=100;//等分(圓弧加間隔),比如arcQuantity=100時,表示將有100個圓弧,和100個空白間隔 float ratio=0.5f;//每段圓弧與圓弧加間隔之和的比例,ratio=0.5表示每個圓弧與相鄰的間隔弧度比是1:1 public ProgressPainterImp2(int color, float min, float max, int progressStrokeWidth, int arcQuantity,float ratio) { this.color = color; this.min = min; this.max = max; this.internalStrokeWidth = progressStrokeWidth; this.arcQuantity = arcQuantity; this.ratio = ratio; init(); Log.e("ProgressPainterImp","構(gòu)造函數(shù)執(zhí)行"); } private void init() { initInternalCirclePainter(); } private void initInternalCirclePainter() { progressPaint = new Paint(); progressPaint.setAntiAlias(true); progressPaint.setStrokeWidth(internalStrokeWidth); progressPaint.setColor(color); progressPaint.setStyle(Paint.Style.STROKE); } //初始化外切的那個矩形 private void initInternalCircle() { progressCircle = new RectF(); float padding = internalStrokeWidth * 0.5f; progressCircle.set(padding, padding , width - padding, height - padding); initInternalCirclePainter(); } @Override public void draw(Canvas canvas) { float eachAngle=360f/arcQuantity; float eachArcAngle=eachAngle*ratio; int quantity=2*arcQuantity*currentPecent/100; for(int i=0;i<quantity;i++){ if(i%2==0){//遇到偶數(shù)就畫圓弧,基數(shù)則跳過 canvas.drawArc(progressCircle, startAngle+eachAngle*i/2, eachArcAngle, false, progressPaint); } else{ continue; } } } public float getMin() { return min; } public void setMin(float min) { this.min = min; } public float getMax() { return max; } public void setMax(float max) { this.max = max; } public void setValue(float value) { this.currentPecent = (int) (( 100f * value) / max); } @Override public void onSizeChanged(int height, int width) { Log.e("ProgressPainterImp","onSizeChanged執(zhí)行"); this.width = width; this.height = height; initInternalCircle(); } public int getColor() { return color; } public void setColor(int color) { this.color = color; progressPaint.setColor(color); } }
可以自定義的屬性:
<declare-styleable name="CircularLoadingView"> <attr name="base_color" format="color" /> <!--內(nèi)層圓環(huán)的顏色--> <attr name="progress_color" format="color" /><!--進度圓環(huán)的顏色--> <attr name="max" format="float" /><!--最小值--> <attr name="min" format="float" /><!--最大值--> <attr name="duration" format="integer" /><!--動畫時長--> <attr name="progress_stroke_width" format="integer" /><!--圓環(huán)寬度--> <!--等分(圓弧加間隔),比如arcQuantity=100時,表示將有100個圓弧,和100個空白間隔--> <attr name="argQuantity" format="integer" /> <!--每段圓弧與圓弧加間隔之和的比例,ratio=0.5表示每個圓弧與相鄰的間隔弧度比是1:1--> <attr name="ratio" format="float" /> </declare-styleable>
調(diào)用:
main_activity.xml:
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" xmlns:custom="http://schemas.android.com/apk/res-auto" android:background="#ffffff" > <!--自定義控件,繼承RelativeLayout--> <qdong.com.mylibrary.CircularLoadingView android:id="@+id/simple" custom:base_color="@color/pager_bg" custom:min="0" custom:max="100" custom:argQuantity="100" custom:ratio="0.6" custom:progress_color="@android:color/holo_green_light" custom:progress_icon="@mipmap/ic_launcher" custom:duration="1000" custom:progress_stroke_width="28" android:layout_centerInParent="true" android:layout_width="200dp" android:layout_height="200dp"> <RelativeLayout android:layout_centerInParent="true" android:layout_width="match_parent" android:layout_height="match_parent"> <TextView android:layout_centerInParent="true" android:textSize="20sp" android:layout_centerHorizontal="true" android:id="@+id/number" android:text="0" android:gravity="center" android:textColor="@color/pager_bg" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> </qdong.com.mylibrary.CircularLoadingView> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Set_Value" android:id="@+id/button" android:layout_alignParentBottom="true" android:layout_alignParentStart="true"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Animation" android:id="@+id/button3" android:layout_alignTop="@+id/button" android:layout_alignParentEnd="true"/> </RelativeLayout>
MainActivity:
findViewById(R.id.button).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { try { mDashedCircularProgress.setValue(66);//沒有動畫的,直接設(shè)置 } catch (Exception e) { e.printStackTrace(); } } }); findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { try { mDashedCircularProgress.setValue(0);//無動畫,歸零 mDashedCircularProgress.setValueWithAnimation(100,2000);//帶動畫 } catch (Exception e) { e.printStackTrace(); } } });
Github地址:https://github.com/506954774/AndroidCircularLoadingView
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android 自定義View實現(xiàn)多節(jié)點進度條功能
這篇文章主要介紹了Android 自定義View實現(xiàn)多節(jié)點進度條,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05