iT邦幫忙

2022 iThome 鐵人賽

DAY 21
0
Mobile Development

Android Studio - 30天菜鳥筆記系列 第 21

Android Studio菜鳥筆記 - Day21 - ProgressBar

  • 分享至 

  • xImage
  •  

ProgressBar有兩種方式可以顯示,一種是直接把元件放在xml上,另外一種是以Dialog的方式顯示

常用基本屬性

android:max //設定最大值。
android:progress //設定已完成的進度值。
android:progressDrawable //設定軌道的繪製形式。
style //設定的外觀樣式。

其中ProgressBar的style分為以下幾種:
?android:attr/progressBarStyleHorizontal 細水平長進度條

@android:style/Widget.ProgressBar.Horizontal 粗水平長進度條

?android:attr/progressBarStyleLarge 細圓環進度條

?android:attr/progressBarStyleSmall 粗圓環進度條

@android:style/Widget.ProgressBar.Large

@android:style/Widget.ProgressBar.Small

@android:style/Widget.ProgressBar.Inverse

ProgressBar使用

一開始先在activity_main.xml中加入兩個Button與一個ProgressBar
第一個Button用來讓在xml上的ProgressBar點擊後可以開始跑動
第二個Button則是用來顯示我們得的ProgressDialog

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <Button
        android:id="@+id/bt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.673" />

    <Button
        android:id="@+id/bt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.14" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="300dp"
        android:layout_height="50dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.495"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.254" />

</androidx.constraintlayout.widget.ConstraintLayout>

第一個Button

要先設置ProgressBar的最大值,也就是進度條的終點
然後設置Button監聽事件,裡面使用Thread的方式讓ProgressBar可以跑動
利用for迴圈與SystemClock.sleep();將我們的進度條配合setProgress()方式顯示出來
最又再將進度條歸零

progressBar.setMax(100);
bt1.setOnClickListener(new View.OnClickListener() {
    int i;
    @Override
    public void onClick(View view) {
        new Thread(new Runnable() {
            @Override
            public void run() {
                for (i = 0; i <= 100; i++) {
                    progressBar.setProgress(i);
                    SystemClock.sleep(30);
                }
                progressBar.setProgress(0);
            }
        }).start();
    }
});

第二個Button

在Button點擊事件中,我們需要先創建一個ProgressDialog
設定它的外觀、標頭、訊息再將dialog.show使它可以顯示出來
讓進度條動起來的方法跟上面差不多,在最後記得用dismiss把dialog取消

bt2.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        ProgressDialog dialog = new ProgressDialog(MainActivity.this);
        dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
        dialog.setTitle("正在讀取請稍後....");
        dialog.show();
        new Thread(new Runnable() {
            @Override
            public void run() {
                for (int i=0;i<=100;i++){
                    dialog.setMessage(i + "/100");
                    SystemClock.sleep(30);
                }
                dialog.dismiss();
            }
        }).start();
    }
});

完整程式碼

package com.example.progressbar_demo;

import androidx.appcompat.app.AppCompatActivity;

import android.app.ProgressDialog;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Button bt1, bt2;
        ProgressBar progressBar;
        bt1 = findViewById(R.id.bt1);
        bt2 = findViewById(R.id.bt2);
        progressBar = findViewById(R.id.progressBar);
        progressBar.setMax(100);
        bt1.setOnClickListener(new View.OnClickListener() {
            int i;
            @Override
            public void onClick(View view) {
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        for (i = 0; i <= 100; i++) {
                            progressBar.setProgress(i);
                            SystemClock.sleep(30);
                        }
                        progressBar.setProgress(0);
                    }
                }).start();
            }
        });
        
        bt2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                ProgressDialog dialog = new ProgressDialog(MainActivity.this);
                dialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);
                dialog.setTitle("跑進度中");

                dialog.show();
                new Thread(new Runnable() {
                    @Override
                    public void run() {
                        for (int i=0;i<=100;i++){
                            dialog.setMessage(i + "/100");
                            SystemClock.sleep(30);
                        }
                        dialog.dismiss();
                    }
                }).start();
            }
        });


    }
}

上一篇
Android Studio菜鳥筆記 - Day20 - SharedPreferences
下一篇
Android Studio菜鳥筆記 - Day22 - BottomNavigationView
系列文
Android Studio - 30天菜鳥筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言