公開日: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/>タグを使用します。
- 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を追加しております。
- コードで実装するには、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指定しております。通常より大きく表示されているのがわかりす。
- ProgressBarのスタイルは、style属性で変更することができる
なお、style属性には、progressBarStyleHorizontalというスタイルを指定することもできます。
progressBarStyleHorizontalを指定すると、進捗状況などを表示する水平のProgressBarを表示することができます。水平のProgressBarに関しましては、以下の記事でまとめておりますので、そちらをご覧いただけると幸いです。
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を指定すると表示されます。
- ProgressBarの表示・非表示は、visibilityで変更できる
まとめ
- xmlでローディングを実装するには、<ProgressBar/>タグを使用する
- コードで実装するには、ProgressBar()でインスタンスを生成した後、addView()で追加する
- ProgressBarのスタイルは、style属性で変更することができる
- ProgressBarの表示・非表示は、visibilityで変更できる
関連記事