Android自訂環形LoadingView效果-H5教程-PHP中文網

首頁

web前端

H5教程

Android自訂環形LoadingView效果

不言

Jul 03, 2018 am 09:36 AM

android

這篇文章主要為大家詳細介紹了Android自訂環形LoadingView效果的方法，具有一定的參考價值，有興趣的小夥伴們可以參考一下

最近專案有要用到環形的進度條,Github上有一個類似的DashedCircularProgress控制,但是他畫的進度是透過設定畫筆的虛線效果來實現間隔的:progressPaint.setPathEffect(new DashPathEffect(new float[]{dashWith, dashSpace}, dashSpace));如果內層還有一層圓環,在動態設定時,內層和外層有細微的偏差.於是我在原有基礎上改了一個,實現了我要的效果(設定進度時可以選擇加動畫或不加動畫):

控制實作：

這個控制項繼承RelativeLayout,在onDraw時做了兩件事:

1、先畫出底部的黑色環形;
2、按照當時的進度值畫出對應比例的外層綠色環形.

對外提供一個接口,回調當前進度值:

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

核心繪製類別:

InternalCirclePainterImp2,繪製內層的黑色的環形:

/**
 * @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;//圆环宽度

  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){//遇到偶数就画圆弧,基数则跳过
        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,繪製內層的黑色的環形:

/**
 * @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;//当前的百分比

  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","构造函数执行");
  }

  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){//遇到偶数就画圆弧,基数则跳过
        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执行");

    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" /> <!--内层圆环的颜色-->
  <attr name="progress_color" format="color" /><!--进度圆环的颜色-->
  <attr name="max" format="float" /><!--最小值-->
  <attr name="min" format="float" /><!--最大值-->
  <attr name="duration" format="integer" /><!--动画时长-->
  <attr name="progress_stroke_width" format="integer" /><!--圆环宽度-->

  <!--等分(圆弧加间隔),比如arcQuantity=100时,表示将有100个圆弧,和100个空白间隔-->
  <attr name="argQuantity" format="integer" />
  
  <!--每段圆弧与圆弧加间隔之和的比例,ratio=0.5表示每个圆弧与相邻的间隔弧度比是1:1-->
  <attr name="ratio" format="float" />
</declare-styleable>

#呼叫:

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);//没有动画的,直接设置
    } 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

以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！

相關推薦：

jQuery實作的AJAX簡單彈出層效果

jQuery的ajax下載blob檔案的方法

以上是Android自訂環形LoadingView效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5代碼的基礎：密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等，用於構建現代網頁。 1.定義頭部內容，2.用於導航鏈接，3.表示獨立文章內容，4.組織頁面內容，5.展示側邊欄內容，6.定義頁腳，這些元素增強了網頁的結構和功能性。

HTML5和H5：了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別，H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本，增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用，適用於各種移動設備。

HTML5：現代網絡的基礎（H5）Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本，由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強，提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤，如、、、等，使網頁結構更清晰，SEO效果更好。 HTML5支持多媒體元素和，無需第三方插件，提升了用戶體驗和加載速度。 HTML5增強了表單功能，引入了新的輸入類型如、等，提高了用戶體驗和表單驗證效率。

H5代碼：編寫清潔有效的HTML5Apr 20, 2025 am 12:06 AM

如何寫出乾淨高效的HTML5代碼？答案是通過語義化標籤、結構化代碼、性能優化和避免常見錯誤。 1.使用語義化標籤如、等，提升代碼可讀性和SEO效果。 2.保持代碼結構化和可讀性，使用適當縮進和註釋。 3.優化性能，通過減少不必要的標籤、使用CDN和壓縮代碼。 4.避免常見錯誤，如標籤未閉合，確保代碼有效性。