如何在 Android 中製作圓形自定義進度條?
此示例演示如何在 Android 中製作圓形自定義進度條。
步驟 1 − 在 Android Studio 中建立一個新專案,轉到檔案 ⇒ 新專案,並填寫所有必需的詳細資訊以建立一個新專案。
步驟 2 − 向 res/layout/activity_main.xml 新增以下程式碼。
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="8dp" tools:context=".MainActivity"> <ProgressBar android:id="@+id/circularProgressbar" style="?android:attr/progressBarStyleHorizontal" android:layout_width="250dp" android:layout_height="250dp" android:layout_centerInParent="true" android:indeterminate="false" android:max="100" android:progress="50" android:secondaryProgress="100" /> <TextView android:id="@+id/textView" android:layout_width="250dp" android:layout_height="250dp" android:gravity="center" android:text="25%" android:layout_centerInParent="true" android:textColor="@color/colorPrimaryDark" android:textSize="24sp" /> </RelativeLayout>
步驟 3 − 建立一個可繪製資原始檔(circularprogressbar.xml)並新增以下程式碼 −
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content"> <item android:id="@android:id/secondaryProgress"> <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true"> <gradient android:centerColor="#999999" android:endColor="#999999" android:startColor="#999999" android:type="sweep" /> </shape> </item> <item android:id="@android:id/progress"> <rotate android:fromDegrees="270" android:pivotX="50%" android:pivotY="50%" android:toDegrees="270"> <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true"> <gradient android:centerColor="#00FF00" android:endColor="#00FF00" android:startColor="#00FF00" android:type="sweep" /> <rotate android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" /> </shape> </rotate> </item> <item android:id="@android:id/secondaryProgress"> <shape android:innerRadiusRatio="6" android:shape="ring" android:thicknessRatio="20.0" android:useLevel="true"> <gradient android:centerColor="#999999" android:endColor="#999999" android:startColor="#999999" android:type="sweep" /> </shape> </item> </layer-list>
步驟 4 − 向 src/MainActivity.java 新增以下程式碼
import androidx.appcompat.app.AppCompatActivity; import android.content.res.Resources; import android.graphics.drawable.Drawable; import android.os.Bundle; import android.os.Handler; import android.widget.ProgressBar; import android.widget.TextView; public class MainActivity extends AppCompatActivity { int status = 0; private Handler handler = new Handler(); TextView textView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Resources resources = getResources(); Drawable drawable = resources.getDrawable(R.drawable.circularprogressbar); final ProgressBar progressBar = findViewById(R.id.circularProgressbar); progressBar.setProgress(0); progressBar.setSecondaryProgress(100); progressBar.setMax(100); progressBar.setProgressDrawable(drawable); textView = findViewById(R.id.textView); new Thread(new Runnable() { @Override public void run() { while (status < 100) { status += 1; handler.post(new Runnable() { @Override public void run() { progressBar.setProgress(status); textView.setText(String.format("%d%%", status)); } }); try { Thread.sleep(16); } catch (InterruptedException e) { e.printStackTrace(); } } } }).start(); } }
步驟 5 − 向 androidManifest.xml 新增以下程式碼
讓我們嘗試執行應用程式。我想你已經將你的 Android 移動裝置連線到了你的電腦。要從 Android Studio 執行應用程式,請開啟你的一個專案活動檔案並單擊工具欄中的執行 圖示。選擇你的移動裝置作為選項,然後檢查移動裝置,它將顯示你的預設螢幕 −
廣告