Android自定義環(huán)形LoadingView效果

更新時(shí)間：2017年07月23日 08:39:08 作者：lp506954774

這篇文章主要為大家詳細(xì)介紹了Android自定義環(huán)形LoadingView效果的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

最近項(xiàng)目有要用到環(huán)形的進(jìn)度條,Github上有一個(gè)類似的DashedCircularProgress控件,但是他畫的進(jìn)度是通過設(shè)置畫筆的虛線效果來實(shí)現(xiàn)間隔的:progressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));如果內(nèi)層還有一層圓環(huán),在動(dòng)態(tài)設(shè)置時(shí),內(nèi)層和外層有細(xì)微的偏差.于是我在原有基礎(chǔ)上改了一個(gè),實(shí)現(xiàn)了我要的效果(設(shè)置進(jìn)度時(shí)可以選擇加動(dòng)畫或者不加動(dòng)畫):

控件實(shí)現(xiàn):

這個(gè)控件繼承RelativeLayout,在onDraw時(shí)做了兩件事:

1、先畫出底部的黑色環(huán)形;
2、按照當(dāng)時(shí)的進(jìn)度值畫出對(duì)應(yīng)比例的外層綠色環(huán)形.

對(duì)外提供一個(gè)接口,回調(diào)當(dāng)前進(jìn)度值:

public interface OnValueChangeListener {
  void onValueChange(float value);
}

核心繪制類:

InternalCirclePainterImp2,繪制內(nèi)層的黑色的環(huán)形:

/**
 * @author Chuck
 */
public class InternalCirclePainterImp2 implements InternalCirclePainter {

  private RectF internalCircle;//畫出圓弧時(shí),圓弧的外切矩形
  private Paint internalCirclePaint;
  private int color;
  private float startAngle = 270f;
  int arcQuantity=100;//等分(圓弧加間隔),比如arcQuantity=100時(shí),表示將有100個(gè)圓弧,和100個(gè)空白間隔
  float ratio=0.5f;//每段圓弧與圓弧加間隔之和的比例,ratio=0.5表示每個(gè)圓弧與相鄰的間隔弧度比是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時(shí),表示將有100個(gè)圓弧,和100個(gè)空白間隔
  float ratio=0.5f;//每段圓弧與圓弧加間隔之和的比例,ratio=0.5表示每個(gè)圓弧與相鄰的間隔弧度比是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);

  }

  //初始化外切的那個(gè)矩形
  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" /><!--進(jìn)度圓環(huán)的顏色-->
  <attr name="max" format="float" /><!--最小值-->
  <attr name="min" format="float" /><!--最大值-->
  <attr name="duration" format="integer" /><!--動(dòng)畫時(shí)長(zhǎng)-->
  <attr name="progress_stroke_width" format="integer" /><!--圓環(huán)寬度-->

  <!--等分(圓弧加間隔),比如arcQuantity=100時(shí),表示將有100個(gè)圓弧,和100個(gè)空白間隔-->
  <attr name="argQuantity" format="integer" />
  
  <!--每段圓弧與圓弧加間隔之和的比例,ratio=0.5表示每個(gè)圓弧與相鄰的間隔弧度比是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);//沒有動(dòng)畫的,直接設(shè)置
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
});
findViewById(R.id.button3).setOnClickListener(new View.OnClickListener() {
  @Override
  public void onClick(View view) {
    try {
      mDashedCircularProgress.setValue(0);//無動(dòng)畫,歸零
      mDashedCircularProgress.setValueWithAnimation(100,2000);//帶動(dòng)畫
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
});

Github地址:https://github.com/506954774/AndroidCircularLoadingView

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: