Android 中带有 Seekbar 的圆形可填充加载器

androidmobile developmentapps/applications更新于 2026/2/9 0:07:17

什么是 Android 中的圆形可填充加载器?

在本教程中，我们将学习如何使用 Kotlin 编程语言在我们的 Android 应用程序中实现圆形可填充加载器。

圆形可填充加载器是一个动画 UI 小部件，用于在 Android 应用程序中使用动画小部件显示加载屏幕。借助此小部件，我们将创建一个加载器，并借助进度条进行填充。

圆形可填充加载器的实现

我们将创建一个简单的应用程序，其中我们将简单地显示一个圆形可填充加载器和一个 Seekbar。当将 Seekbar 上的进度从 0 更改为 100 时，圆形可填充加载器将相应地从下到上填充。我们将按照分步指南在 Android 应用程序中实现循环可填充加载器。

步骤 1:在 Android Studio 中创建新项目

如下图所示，导航到 Android Studio。在下方屏幕中，点击"新建项目"以创建一个新的 Android Studio 项目。

点击"新建项目"后，您将看到以下屏幕。

在此屏幕中，我们只需选择"空活动"，然后点击"下一步"。点击"下一步"后，您将看到以下屏幕。

在此屏幕中，我们只需指定项目名称。然后包名称将自动生成。

注意− 确保选择"语言"为 Kotlin。

指定所有详细信息后，点击"完成"即可创建一个新的 Android Studio 项目。

项目创建完成后，我们将看到两个打开的文件，即 activity_main.xml 和 MainActivity.kt 文件。

步骤 2:在 build.gradle 文件中添加依赖项以使用此库

导航至 Gradle Scripts>build.gradle 文件，并在依赖项部分添加以下依赖项。

implementation 'com.mikhaellopez:circularfillableloaders:1.3.2'

添加上述依赖项后，您将在 IDE 的右上角看到"立即同步"选项。只需点击该选项即可同步您的项目并在项目中安装此依赖项。

步骤 3:使用 activity_main.xml

导航至 activity_main.xml。如果此文件不可见，请打开此文件。在左侧窗格中，导航至 app>res>layout>activity_main.xml 并打开此文件。打开此文件后，添加以下代码。代码中添加了注释，以便您详细了解。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   tools:context=".MainActivity">

   <!-- creating text view for displaying heading-->
   <TextView
      android:id="@+id/idTVHeading"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_above="@id/idCFL"
      android:layout_margin="20dp"
      android:gravity="center"
      android:text="Circular Fillable Loader in Android"
      android:textAlignment="center"
      android:textAllCaps="false"
      android:textColor="#FF000000"
      android:textSize="20sp"
      android:textStyle="bold" />

   <!--Creating Circular Fallible Loader on below line-->
   <com.mikhaellopez.circularfillableloaders.CircularFillableLoaders
      android:id="@+id/idCFL"
      android:layout_width="200dp"
      android:layout_height="200dp"
      android:layout_centerInParent="true"
      android:padding="4dp"
      android:src="@drawable/logo"
      app:cfl_border="true"
      app:cfl_border_width="5dp"
      app:cfl_progress="80"
      app:cfl_wave_amplitude="0.06"
      app:cfl_wave_color="#FF000000" />

   <!--Creating a Seek bar to increase fallible part-->
   <SeekBar
      android:id="@+id/seekBar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_below="@+id/idCFL"
      android:layout_centerHorizontal="true"
      android:layout_marginStart="10dp"
      android:layout_marginTop="40dp"
      android:layout_marginEnd="10dp" />

</RelativeLayout>

说明− 在上面的代码中，根元素是 Android 中的相对布局。此布局是一个视图组，用于将其中的所有元素彼此对齐。我们可以借助 ID 或位置来相对对齐相对布局中的所有元素。在这个相对布局中，我们首先创建一个文本视图，用于显示应用程序标题的简单文本视图。

添加标题文本视图后，我们创建了圆形可填充加载器。首先，在这个小部件中，我们指定小部件的唯一 ID。然后，我们指定小部件的高度和宽度。为了将此加载器与屏幕中心对齐，我们在父级中添加布局中心为 true，以使此小部件与屏幕中心对齐。然后，我们从各个方向为加载器添加填充。之后，我们指定一个可绘制图像，该图像必须在加载器中显示。最后，我们指定是否必须为加载器显示边框。我们将其设置为 true 以显示边框。然后，我们添加边框宽度。之后，我们将加载器的默认进度指定为 80。然后，我们添加波浪振幅，即波浪在加载器内动画的速度。最后，我们为加载器内的波浪添加颜色。

创建这个圆形可填充加载器后，我们将创建一个 seekbar 小部件，我们将使用它来更改圆形可填充加载器的进度。

最后，我们为相对布局添加一个结束标记，因为文本视图和按钮包含在相对布局中。

步骤 4:使用 MainActivity.kt

导航到 MainActivity.kt。如果此文件不可见，要打开此文件，请在左侧窗格中导航至 app>java>您的应用包名称>MainActivity.kt 以打开此文件。打开此文件后，将以下代码添加到其中。代码中添加了注释，可以详细了解。

package com.gtappdevelopers.androidapplication

import android.os.Bundle
import android.widget.SeekBar
import android.widget.SeekBar.OnSeekBarChangeListener
import androidx.appcompat.app.AppCompatActivity
import com.mikhaellopez.circularfillableloaders.CircularFillableLoaders

class MainActivity : AppCompatActivity() {
   // 为加载器、搜索栏和进度创建变量。
   var circularFillableLoaders: CircularFillableLoaders? = null
   lateinit var seekBar: SeekBar
   private var loadingProgress: Int = 80

   override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // 下面一行初始化加载器和搜索栏的变量。
        circularFillableLoaders = findViewById(R.id.idCFL)
        seekBar = findViewById(R.id.seekBar)
        // 下面一行，我们根据上面创建的加载进度设置加载器的进度。
        circularFillableLoaders!!.setProgress(loadingProgress)
        // 下面一行，我们将搜索栏的进度设置为加载进度。
        seekBar.progress = loadingProgress
        // 下面一行，我们设置搜索栏的最大进度。
        seekBar.max = 100
        // 下面一行，我们为搜索栏添加搜索栏变化监听器。
        seekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
         override fun onProgressChanged(seekBar: SeekBar, progress: Int, b: Boolean) {
            // 在进度改变方法中，我们正在下面一行更新加载器的进度。
            circularFillableLoaders!!.setProgress(progress)
         }
        
         override fun onStartTrackingTouch(seekBar: SeekBar) {}
         override fun onStopTrackingTouch(seekBar: SeekBar) {}
        })
   }
}

说明− 在上述 MainActivity.kt 文件的代码中，我们首先为不同的视图(例如循环可填充加载器和滑动条)创建一个变量，并创建一个整数变量用于存储滑动条的进度，并将该变量初始化为 80。

现在，在 onCreate 方法中，我们使用在 activity_main.xml 文件中指定的唯一 ID 来初始化循环可填充加载器和滑动条。

初始化变量后，我们使用加载进度变量设置循环可填充加载器的进度。然后，我们还使用加载进度变量设置滑动条的进度。最后，我们将滑动条的最大进度设置为 100。

然后，我们为滑动条添加一个滑动条更改监听器，以便当用户更改滑动条进度时，我们可以更新循环可填充加载器的进度。现在，对于 seekbar 更改监听器，有 3 个内部方法，如下所示 -

OnProgressChanged - 当用户更改 seekbar 上的进度时，将调用此方法。在这个方法中，我们将通过调用 set progress 方法并将进度传递给循环可填充加载器来设置进度。
onStartTrackingTouch − 当用户开始与 seekbar 交互时，会调用此方法。
onStopTrackingTouch − 当用户停止与 seekbar 交互时，会调用此方法。

添加上述代码后，现在我们只需点击顶部栏中的绿色图标即可在移动设备上运行我们的应用程序。

注意 − 确保您已连接到真实设备或模拟器。