ローディング画面(ProgressBar)を表示させる

15042 ワード
Android ProgressBar Java Java テキストリンク

はじめに

ローディング画面を3パターンつくってみた。

ロード終了タップ 進捗確認タップ
(10%ずつたまり、100%超えたら終了)

尚、ProgressBarをただ表示するだけなら、レイアウトを設定するだけでok。

例
<ProgressBar
   android:layout_width="0dp"
   android:layout_height="wrap_content"
   android:layout_margin="16dp"
   app:layout_constraintStart_toStartOf="parent"
   app:layout_constraintTop_toBottomOf="@id/start" />

実装

レイアウト

activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<layout
    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"
    >

    <data>
        <import type="android.view.View"/>

        <variable
            name="viewModel"
            type="com.example.loadingsample.ViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <Button
            android:id="@+id/start"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            android:text="ロード開始"
            android:enabled="@{!viewModel.loading}"
            android:onClick="@{(v) -> viewModel.startLoading()}"
            />

        <Button
            android:id="@+id/stop"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            app:layout_constraintStart_toEndOf="@id/start"
            app:layout_constraintTop_toTopOf="@id/start"
            android:text="ロード終了"
            android:enabled="@{viewModel.loading}"
            android:onClick="@{(v) -> viewModel.stopLoading()}" />

        <Button
            android:id="@+id/add"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="16dp"
            app:layout_constraintStart_toEndOf="@id/stop"
            app:layout_constraintTop_toTopOf="@id/start"
            android:text="進捗確認"
            android:enabled="@{viewModel.loading}"
            android:onClick="@{(v) -> viewModel.improveProgressRate()}" />

        <!-- デフォルト -->
        <ProgressBar
            android:id="@+id/progress1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toBottomOf="@id/start"
            android:visibility="@{viewModel.loading ? View.VISIBLE : View.GONE}"
            />

        <!-- ProgressBar.Horizontal -->
        <!-- android:indeterminate="true"の場合 -->
        <ProgressBar
            android:id="@+id/progress2"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            app:layout_constraintStart_toEndOf="@id/progress1"
            app:layout_constraintTop_toTopOf="@id/progress1"
            android:indeterminate="true"
            android:visibility="@{viewModel.loading ? View.VISIBLE : View.GONE}"
            />

        <!-- ProgressBar.Horizontal -->
        <!-- android:indeterminate="false"の場合 -->
        <ProgressBar
            android:id="@+id/progress3"
            style="@android:style/Widget.ProgressBar.Horizontal"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            app:layout_constraintStart_toEndOf="@id/progress2"
            app:layout_constraintTop_toTopOf="@id/progress1"
            android:progress="@{viewModel.progressRate}"
            android:indeterminate="false"
            android:visibility="@{viewModel.loading ? View.VISIBLE : View.GONE}"
            />

    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

ViewModel

ViewModel.java
public class ViewModel extends BaseObservable {
    private boolean isLoading;
    private int progressRate = 0;

    @Bindable public boolean isLoading() {
        return isLoading;
    }

    @Bindable public int getProgressRate() {
        return progressRate;
    }

    public void setLoading(boolean loading) {
        isLoading = loading;
        notifyPropertyChanged(BR.loading);
    }

    public void setProgressRate(int progressRate) {
        this.progressRate = progressRate;
        notifyPropertyChanged(BR.progressRate);
    }

    public void startLoading() {
        setLoading(true);
    }

    public void stopLoading() {
        setLoading(false);
        setProgressRate(0);
    }

    public void improveProgressRate() {
        // 進捗100%を超えたらロード終了
        if (progressRate == 100) {
            stopLoading();
        }
        // タップする度に進捗10%UP
        setProgressRate(progressRate + 10);
    }
}

Activity

MainActivity.java
public class MainActivity extends AppCompatActivity {

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

        ActivityMainBinding binding = DataBindingUtil.setContentView(this, R.layout.activity_main);

        ViewModel viewModel = new ViewModel();
        binding.setViewModel(viewModel);
    }
}