Android中的自定义进度条-IGI

时间：2020-02-23 14:29:26 　来源:igfitidea点击:

android应用程序中的自定义进度条使其具有个人风格。
在本教程中，我们将通过在应用程序中实现旋转徽标图标来创建自定义进度列。
大多数情况下，在加载数据时，我们最终使用ProgressBar作为加载图标。
按照当前的趋势，Reddit，UBER，Foodpanda和Twitter等应用已将其常用的进度列替换为应用程序的图标作为加载图标。
这为他们的应用程序和徽标品牌提供了一种触感，使它们与众不同。

Android中的自定义进度条

让我们看看在应用程序的活动中显示加载图标的经典方式。

上面布局的代码应如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.theitroad.spinninglogo.MainActivity">

  <ProgressBar
      android:id="@+id/progressBarLarge"
      style="?android:attr/progressBarStyleLarge"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

  <ProgressBar
      android:id="@+id/progressBarSmall"
      style="?android:attr/progressBarStyleSmall"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginTop="8dp"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toBottomOf="@+id/progressBarLarge" 

  <ProgressBar
      android:id="@+id/progressBarMedium"
      style="?android:attr/progressBarStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="8dp"
      app:layout_constraintBottom_toTopOf="@+id/progressBarLarge"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent" 

</android.support.constraint.ConstraintLayout>

我们设置了三个圆形的ProgressBar，它们在上述布局中不断旋转。
现在，让我们尝试添加一个可无限旋转图标的ProgressBar。

Android自定义进度条

ProgressBar类包含一个属性" indeterminateDrawable"，该属性将默认指示符替换为指定的drawable。
让我们看看在进度列中放置一个图标会发生什么。

activity_main.xml的代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.theitroad.spinninglogo.MainActivity">

  <ProgressBar
      android:id="@+id/progressBar"
      style="?android:attr/progressBarStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:indeterminateDrawable="@mipmap/ic_launcher"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

</android.support.constraint.ConstraintLayout>

上面的布局在我们的应用程序中反映的输出如下。

糟糕！ ProgressBar有什么问题？为什么不旋转？

好吧，我们需要将RotateDrawable设置为属性的值。

通过封装当前可绘制对象并为其分配旋转角度和角度，在xml中定义了" RotateDrawable"。
标记<rotate>用于在xml中这样做，如下所示。

下面给出了progress_icon.xml RotateDrawable的代码。

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android" >
  <item>
      <rotate
          android:drawable="@mipmap/ic_launcher"
          android:fillAfter="true"
          android:fromDegrees="0"
          android:pivotX="50%"
          android:pivotY="50%"
          android:toDegrees="360" 
  </item>
</layer-list>

" android：fillAfter"属性指示动画结束后应用转换。

可以增加或者减少android：toDegrees值来更改旋转速度。
通常，建议将其设置为360的倍数。

让我们在activity_main.xml中的ProgressBar中设置上述可绘制对象。

<ProgressBar
      android:id="@+id/progressBar"
      style="?android:attr/progressBarStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:indeterminateDrawable="@drawable/progress_icon"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent"

应用程序中反映的输出如下所示。

让我们创建一个基本的应用程序，该应用程序在延迟后在ArrayList的TextView中显示一个字符串。

xml布局文件" activity_main.xml"的代码如下。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="https://schemas.android.com/apk/res/android"
  xmlns:app="https://schemas.android.com/apk/res-auto"
  xmlns:tools="https://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context="com.theitroad.spinninglogo.MainActivity">

  <ProgressBar
      android:id="@+id/progressBar"
      style="?android:attr/progressBarStyle"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:indeterminateDrawable="@drawable/progress_icon"
      android:visibility="gone"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

  <Button
      android:id="@+id/button"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_marginBottom="32dp"
      android:text="TAP ME TO GET A RANDOM QUOTE"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent" 

  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="A Greeting Message Awaits You"
      android:textSize="24sp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" 

</android.support.constraint.ConstraintLayout>

请注意上面代码中ConstraintLayout的有效使用。

MainActivity.java的代码如下。

package com.theitroad.spinninglogo;

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

  TextView textView;
  List<String> quotesList;
  ProgressBar progressBar;
  int i = 0;

  Handler handler = new Handler();

  @Override
  protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      quotesList = new ArrayList<>();

      quotesList.add("Hi");
      quotesList.add("Happy New Year");
      quotesList.add("Hope you have a good day");
      quotesList.add("Merry Christmas");

      Button btnTap = findViewById(R.id.button);
      textView = findViewById(R.id.textView);
      progressBar = findViewById(R.id.progressBar);

      btnTap.setOnClickListener(new View.OnClickListener() {
          @Override
          public void onClick(View v) {
              progressBar.setVisibility(View.VISIBLE);
              textView.setVisibility(View.GONE);
              handler.postDelayed(new Runnable() {
                  @Override
                  public void run() {

                      if (i == quotesList.size())
                          i = 0;

                      textView.setVisibility(View.VISIBLE);
                      textView.setText(quotesList.get(i++));
                      progressBar.setVisibility(View.GONE);

                  }
              }, 3000);
          }
      });

  }

}

Android中的自定义进度条