資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究Android 中的圓形可填充載入器與 Seekbar
什麼是 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 或位置，我們可以相對地對齊相對佈局中的所有元素。在此相對佈局內，我們首先建立一個 TextView，用於顯示應用程式標題的簡單 TextView。
新增標題的 TextView 後，我們正在建立圓形可填充載入器。在此小部件內，我們首先為小部件指定唯一的 ID。然後，我們為小部件指定高度和寬度。要將此載入器對齊到螢幕的中心，我們將 layout_centerInParent 設定為 true 以將此小部件對齊到螢幕的中心。然後，我們從所有側面為載入器新增填充。之後，我們指定要在載入器內顯示的可繪製圖像。然後，我們指定是否要為載入器顯示邊框。我們將其設定為 true 以顯示邊框。然後，我們新增邊框寬度。之後，我們將載入器的預設進度指定為 80。然後，我們新增波浪振幅，這意味著載入器內波浪的動畫速度。最後，我們為載入器內的波浪新增顏色。
建立此圓形可填充載入器後，我們正在建立一個 Seekbar 小部件，我們將使用它來更改圓形可填充載入器的進度。
最後，我們為相對佈局新增一個結束標籤，因為 TextView 和按鈕都包含在我們的相對佈局中。
步驟 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() {
// creating variable for loader,seekbar and progress.
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)
// on below line initializing variables for loader and seek bar.
circularFillableLoaders = findViewById(R.id.idCFL)
seekBar = findViewById(R.id.seekBar)
// on below line we are setting progress for our loader from the loading progress which we have created above.
circularFillableLoaders!!.setProgress(loadingProgress)
// on below line we are setting seekbar progress as loading progress
seekBar.progress = loadingProgress
// on below line we are setting max progress for our seek bar.
seekBar.max = 100
// on below line we are adding seek bar change listner for our seek bar.
seekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
override fun onProgressChanged(seekBar: SeekBar, progress: Int, b: Boolean) {
// inside progress change method we are updating progress for our loader on below line.
circularFillableLoaders!!.setProgress(progress)
}
override fun onStartTrackingTouch(seekBar: SeekBar) {}
override fun onStopTrackingTouch(seekBar: SeekBar) {}
})
}
}
說明 - 在上面為 MainActivity.kt 檔案編寫的程式碼中。首先，我們為不同的檢視（如圓形可填充載入器、Seekbar）建立變數，並且我們建立一個整數變數，我們將使用它來儲存 Seekbar 的進度，並將此 inter 變數初始化為 80。
現在，在我們的 onCreate 方法中，我們使用我們在 activity_main.xml 檔案中給出的唯一 ID 初始化我們的圓形可填充載入器和 Seekbar。
初始化變數後，我們使用 loadingProgress 變數為圓形可填充載入器設定進度。然後，我們還使用 loadingProgress 變數為 Seekbar 設定進度。之後，我們將 Seekbar 的最大進度設定為 100。
然後，我們為 Seekbar 新增一個 Seekbar 更改偵聽器，以便當使用者更改 Seekbar 進度時，我們可以更新圓形可填充載入器的進度。現在，對於 Seekbar 更改偵聽器，有 3 個內部方法，如下所示 -
OnProgressChanged - 當用戶更改 Seekbar 上的進度時，將呼叫此方法。在此方法中，我們將簡單地透過呼叫 setProgress 方法並將進度傳遞給它來為圓形可填充載入器設定進度。
onStartTrackingTouch - 當用戶開始與 Seekbar 互動時，將呼叫此方法。
onStopTrackingTouch - 當用戶停止與 Seekbar 互動時，將呼叫此方法。
新增上述程式碼後，我們現在只需點選頂部欄中的綠色圖示即可在移動裝置上執行我們的應用程式。
注意 - 確保您已連線到您的真實裝置或模擬器。
結論
在上述教程中，我們學習了什麼是 Android 中的圓形可填充載入器，以及如何在 Android 應用程式中使用它以及 Seekbar 來在我們的 Android 應用程式中顯示載入動畫。
432 次檢視
