iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
0
Mobile Development

Android開發系列 第 8

[Day8] ProgressBar的基本運用

  • 分享至 

  • xImage
  •  

大家好今天我們來介紹ProgressBar的基本運用,由於Android studio新的版本不推薦使用ProgressDialog,我們可以使用ProgressBar來替代,那我們就開始示範基本的Progress使用方法。

MainActivity:

import androidx.appcompat.app.AlertDialog;
import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.ProgressBar;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    ProgressBar progressBar;
    TextView tvProgerss;
    Button btnStyle,btnTestH, btnProgressBar;

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

        progressBar = findViewById(R.id.probar_download);
        progressBar.setMax(100);
        progressBar.setProgress(0);
        tvProgerss = findViewById(R.id.tvProgress);
        btnStyle = findViewById(R.id.btn_style);
        btnStyle.setOnClickListener(this);
        btnTestH = findViewById(R.id.btn_testH);
        btnTestH.setOnClickListener(this);
        btnProgressBar = findViewById(R.id.btn_progress);
        btnProgressBar.setOnClickListener(this);

    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.btn_style:
                Intent intent = new Intent();
                intent.setClass(MainActivity.this,ProgressBarStyleActivity.class);
                startActivity(intent);
                break;

            case R.id.btn_testH:
                progressBar.setProgress(0);
                new Thread(){
                    @Override
                    public void run() {
                        for (int i =0;i<100;i++){
                            try {
                                Thread.sleep(100);
                            }catch (InterruptedException e){
                                e.printStackTrace();
                            }
                            progressBar.incrementProgressBy(1);
                        }
                    }
                }.start();
                break;

            case R.id.btn_progress:
                AlertDialog.Builder builder = new AlertDialog.Builder(this);
                LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
                View ve = inflater.inflate(R.layout.dialog_progress,null);
                builder.setTitle("Title");
                builder.setView(ve);
                builder.setCancelable(true);
                builder.create();
                builder.show();
                break;
        }
    }
}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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:orientation="vertical"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >

        <Button
            android:id="@+id/btn_testH"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="測試水平進度條" />

        <Button
            android:id="@+id/btn_style"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="看Progress樣式"
            />

        <Button
            android:id="@+id/btn_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="顯示Dialog"
            />

    </LinearLayout>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="測試結果如下"/>
    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:id="@+id/probar_download"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/tvProgress"
        />

</LinearLayout>

在第一格畫面我設定了三個按鈕,"測試水平進度條"是點下去會將下面的水平進度條開始由0跑到100,
"看Progress樣式"是跳轉到另一個畫面並且顯示出每個類型的進度條,"顯示Dialog"的功能是彈跳出一個類似ProgressDialog的彈跳視窗。

第二個Activity

ProgressBarStyleActivity

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class ProgressBarStyleActivity extends AppCompatActivity {

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

這個class不需要打其他的程式碼,我們只會用到它的畫面

activity_progress_bar_style.xml

<?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=".ProgressBarStyleActivity">

    <TextView
        android:id="@+id/pbl"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:text="這是大進度條"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="@android:style/Widget.ProgressBar.Large"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pbl" />

    <TextView
        android:id="@+id/pbs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是小環形進度條"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar" />

    <ProgressBar
        android:id="@+id/progressBar2"
        style="@android:style/Widget.ProgressBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pbs" />

    <TextView
        android:id="@+id/pbi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是環形進度條"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar2" />

    <ProgressBar
        android:id="@+id/progressBar3"
        style="@android:style/Widget.ProgressBar.Inverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pbi" />

    <TextView
        android:id="@+id/pbsi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是小環形進度條"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar3" />

    <ProgressBar
        android:id="@+id/progressBar4"
        style="@android:style/Widget.ProgressBar.Small.Inverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pbsi" />

    <TextView
        android:id="@+id/pbli"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是的大環形進度條"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar4" />

    <ProgressBar
        android:id="@+id/progressBar5"
        style="@android:style/Widget.ProgressBar.Large.Inverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pbli" />

    <TextView
        android:id="@+id/pbh"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="這是的水平進度條"
        android:textSize="30sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/progressBar5" />

    <ProgressBar
        style="@android:style/Widget.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="50"
        android:secondaryProgress="60"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/pbh" />

</androidx.constraintlayout.widget.ConstraintLayout>

dialog_progress.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <ProgressBar
        style="@android:style/Widget.ProgressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="10dp"
        />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="進行中請等待..."
        android:layout_marginTop="16dp"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:layout_marginBottom="4dp"/>


</LinearLayout>

在MainActivity 裡面:
progress.setMax 是設置進度最大值
.setProgress 是設置進度
.getProgress 是獲取當前進度
.getSecondaryProgress 是設定第二進度條進度
.incrementProgressBy 增加ProgressBar增加的進度值
大家可以試試看看上面的用法。

而在下面的彈出視窗框的程式碼中:

AlertDialog.Builder builder = new AlertDialog.Builder(this);
                LayoutInflater inflater = LayoutInflater.from(MainActivity.this);
                View ve = inflater.inflate(R.layout.dialog_progress,null);
                builder.setTitle("Title");
                builder.setView(ve);
                builder.setCancelable(true);
                builder.create();
                builder.show();

我試著用一個AleartDialog 搭配一點點的客製化Dialog來讓它顯示出和ProgressDialog類似的畫面。

當然,ProgressBar還有一些其他的用法,像是將進度條顯示到標題列上面也是可以的,那我們今天就示範到這裡了,謝謝大家的觀看。


上一篇
[Day7]Dialog的基本用法5
下一篇
[Day9] 簡單的SeekBar_1
系列文
Android開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言