Genta Hirauchi

公開日：2020/02/24
更新日：2020/08/03

【Kotlin基礎】ProgressBarでローディング画面を実装する方法を解説

  • Kotlinでローディング画面を実装する方法が知りたい。
  • ProgressBarをコードで動的に実装したい。
  • ProgressBarの表示・非表示を切り替えたい。

Kotlinでローディング画面を実装するにはどうすればいいの？と悩んでいる方、いらっしゃいませんか。Kotlinには、ProgressBarというお手軽にローディング画面を実装することができるViewが存在します。

本記事では、ProgressBarの基本的な実装方法を、サンプルコードを交え、わかりやすく解説しております。

目次

ProgressBarでローディング画面を実装する方法

Kotlinでローディング画面を実装するには、ProgressBarというViewを使用します。

【公式ドキュメント】 ： ProgressBar | Android Developers

ProgressBarを実装するには、xmlで実装する方法と、コードで動的に実装する方法の、2通りの方法があります。

xmlでProgressBarを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

</LinearLayout>

ProgressBarを実装するには、<ProgressBar/>タグを使用します。

Point
  • xmlでローディングを実装するには、<ProgressBar/>タグを使用する

コードで動的にProgressBarを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   // ProgressBarの生成
   val progressBar = ProgressBar(this)

   // 親レイアウトに、ProgressBarを追加
   val linearLayout = findViewById<LinearLayout>(R.id.container)
   linearLayout.addView(progressBar)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

</LinearLayout>

ProgressBar()で、ProgressBarのインスタンスを生成しております。

その後、親レイアウトのlinearLayoutに対し、addView()でProgressBarを追加しております。

Point
  • コードで実装するには、ProgressBar()でインスタンスを生成した後、addView()で追加する

ProgressBarの基本的な使い方

ProgressBarのスタイルの変更

続いて、ProgressBarのスタイルを変更する方法を紹介致します。スタイルは、style属性で変更することができます。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)
}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:orientation="vertical">

   <ProgressBar
       android:id="@+id/progress_bar_1"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

   <ProgressBar
       android:id="@+id/progress_bar_2"
       style="?android:attr/progressBarStyle"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

   <ProgressBar
       android:id="@+id/progress_bar_3"
       style="?android:attr/progressBarStyleSmall"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

   <ProgressBar
       android:id="@+id/progress_bar_4"
       style="?android:attr/progressBarStyleLarge"
       android:layout_width="match_parent"
       android:layout_height="wrap_content" />

</LinearLayout>

1つ目のProgressBarにはstyle属性を指定せず、その他のProgressBarには、style属性を指定しております。

1つ目のProgressBarと、2つ目のProgressBarのスタイルが同じなのは、ProgressBarのデフォルトのstyle属性が、progressBarStyleだからです。

3つ目のProgressBarには、progressBarStyleSmall指定しております。通常より小さく表示されているのがわかります。

4つ目のProgressBarには、progressBarStyleLarge指定しております。通常より大きく表示されているのがわかりす。

Point
  • ProgressBarのスタイルは、style属性で変更することができる

なお、style属性には、progressBarStyleHorizontalというスタイルを指定することもできます。

progressBarStyleHorizontalを指定すると、進捗状況などを表示する水平のProgressBarを表示することができます。水平のProgressBarに関しましては、以下の記事でまとめておりますので、そちらをご覧いただけると幸いです。

【Kotlin基礎】ProgressBarで進捗状況を表示する方法を解説

データをダウンロードする時などは、ダウンロードが無事行われているかがわかるように、進捗状況を表示したいですよね。Kotlinでは、ProgressBarというViewを使用することで、進捗状況を表示することができます。本記事では、Kotlinで進捗状況を示す水平バーを表示する方法を、サンプルコードを交え、わかりやすく解説しております。

ProgressBarの表示・非表示の切り替え

続いて、ProgressBarの表示・非表示の切り替える方法を紹介致します。表示・非表示は、visibilityで変更することができます。

以下は、ボタンをタップすると、ProgressBarの表示・非表示が切り替わるサンプルコードです。

  • MainActivity.kt
  • activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
   super.onCreate(savedInstanceState)
   setContentView(R.layout.activity_main)

   // ProgressBarの取得
   val progressBar = findViewById<ProgressBar>(R.id.progress_bar)

   // ToggleButtonの取得
   val toggleButton = findViewById<ToggleButton>(R.id.toggle_button)

   // ToggleButtonに状態変更イベントを追加
   toggleButton.setOnCheckedChangeListener { buttonView, isChecked ->

       // ToggleButtonの状態に合わせ、ProgressBarの表示・非表示を変更
       if (isChecked) {
           progressBar.visibility = View.GONE
       } else {
           progressBar.visibility = View.VISIBLE
       }
   }
}

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent">

   <ProgressBar
       android:id="@+id/progress_bar"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_centerInParent="true" />

   <ToggleButton
       android:id="@+id/toggle_button"
       android:textOn="表示する"
       android:textOff="非表示にする"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_alignParentBottom="true"
       android:layout_centerHorizontal="true"
       android:layout_marginBottom="200dp" />

</RelativeLayout>

visibilityに、View.GONEを指定すると非表示になり、View.VISIBLEを指定すると表示されます。

Point
  • ProgressBarの表示・非表示は、visibilityで変更できる

まとめ

  • xmlでローディングを実装するには、<ProgressBar/>タグを使用する
  • コードで実装するには、ProgressBar()でインスタンスを生成した後、addView()で追加する
  • ProgressBarのスタイルは、style属性で変更することができる
  • ProgressBarの表示・非表示は、visibilityで変更できる

関連記事