すだみなさまこんにちは〜！
メモリアインクのすだです。
本日は、
KotlinのProgressBarを使用して特定の処理の進捗状況がわかる「でターミネート」のアニメーションを表示する方法を、
実際のコードを利用して徹底解説していきます！
この記事を読んでわかること…
・デターミネートProgressBarとは？
・処理の進行状況をリアルタイム更新する方法
・アニメーションとカスタマイズ
環境
- Kotlin (ver 1.9.0)
- Android Studio (Giraffe | 2022.3.1 Patch 3)
デターミネートProgressBarとは？
デターミネート（Determinate）ProgressBarは、処理の進捗状況を視覚的に表現したい場合に使用されます。
例えば：
- ファイルのダウンロード
- データのアップロード
- 音楽や動画のバッファリング
などなど。
ユーザーは進捗状況を視覚的に確認でき、処理がどの程度進んでいるかが一目で分かります。
デターミネートProgressBarの使いどころとしては、
以下のようなケースで特に有効です。
- ネットワーク通信中：ファイルダウンロードの進行状況を表示
- データ処理：データのパースや計算など、処理に時間がかかるとき
- インストール・更新：アプリやデータのインストール進捗を表示
インジケータが動くだけのインデターミネート型と違い、
進捗が「数値」で反映されるため、ユーザー体験が向上します。
インジケータの種類と特徴
ProgressBar には主に2種類の表示スタイルがあります。
- インデターミネート (Indeterminate)：進捗が不明な場合に「くるくる」回る円形のローディングを表示。
- デターミネート (Determinate)：処理の進捗状況が明確な場合に進捗バーを表示。
今回はデターミネート 「処理の進捗バー」を実装します。
インデターミネート (Indeterminate)の表示については、以下の記事でご紹介しておりますので
ぜひご覧ください！
ProgressBarを使った「処理の進捗バー表示」の実装方法
それでは早速実装していきましょう！
1. XMLレイアウトでProgressBarを定義する
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"
style="?android:attr/progressBarStyleHorizontal"
android:max="100"
android:progress="0"
android:layout_margin="16dp"/>
</RelativeLayout>サンプルコードの解説
12〜14行目：
style="?android:attr/progressBarStyleHorizontal"で水平のプログレスバーを表示します。maxで進捗の最大値を設定（例：100%）。progressで初期進捗を設定します。
2. 進捗を更新する
class MainActivity : AppCompatActivity() {
private lateinit var progressBar: ProgressBar
private lateinit var startButton: Button
private var progressStatus = 0
private val handler = Handler(Looper.getMainLooper())
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
progressBar = findViewById(R.id.progressBar)
startButton = findViewById(R.id.startButton)
startButton.setOnClickListener {
progressStatus = 0
startProgress()
}
}
// ProgressBarの表示・非表示
private fun showLoading(isLoading: Boolean) {
progressBar.visibility = if (isLoading) View.VISIBLE else View.GONE
}
private fun startProgress() {
Thread {
while (progressStatus < 100) {
progressStatus += 1
handler.post {
progressBar.progress = progressStatus
}
Thread.sleep(50) // 50msごとに1%進む
}
}.start()
}
}サンプルコードの解説
25行目〜27行目：
Threadを使ってバックグラウンドスレッドを作成し、start()で実行します。- メインスレッドをブロックせず、非同期的に進行します。
whileループでprogressStatusが100に達するまで繰り返します。
29行目：
handler.postはメインスレッドでコードを実行するための方法です。- スレッドから直接UIの更新はできませんが、
Handlerを使えば UI要素（ProgressBar）を安全に更新できます。 progressStatusの値をProgressBarのprogressに反映させます。
ビルドしてみると…
ボタン押下でバーが表示されました！
たとえば、これを実際の処理の進捗をリアルタイムでProcessBarに反映させるには
子ルーチンや非同期処理を使っています。
例）ファイルのダウンロード処理 ▼
// 疑似的なダウンロード処理
private fun startDownload() {
// コルーチンで非同期処理
CoroutineScope(Dispatchers.IO).launch {
val totalFileSize = 1000 // 例：1000KBのファイル
var downloadedSize = 0
while (downloadedSize < totalFileSize) {
delay(100) // ネットワークダウンロードの疑似処理
downloadedSize += 50 // 50KBずつダウンロードするイメージ
progressStatus = (downloadedSize * 100) / totalFileSize // UIスレッドでProgressBarを更新
withContext(Dispatchers.Main) {
progressBar.progress = progressStatus
}
}
}
}アニメーションとカスタマイズ
たとえば、進捗バーの色や高さを変更したり カスタマイズすることができます。
1. 進捗バーの色を変更する方法
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progressDrawable="@drawable/custom_progress" />res/drawable/custom_progress.xml ▼
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape>
<corners android:radius="8dp" />
<solid android:color="#E0E0E0" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape>
<corners android:radius="8dp" />
<solid android:color="#4CAF50" />
</shape>
</clip>
</item>
</layer-list>サンプルコードの解説
5行目：
android:progressDrawable= をセットすることで、drawableに定義したスタイルを適用することができます。
これを利用して バーの色の変更だけでなく、コーナーを丸くしたりグラデーションを適用したりなど 様々にカスタマイズできます。
2. 進捗バーの高さを変更する方法
デフォルトでは高さが低いですが、ProgressBar の高さを変更して太めのバーにすることもできます。
<ProgressBar
android:id="@+id/progressBar"
android:layout_width="match_parent"
android:layout_height="20dp"
style="?android:attr/progressBarStyleHorizontal"/>サンプルコードの解説
5行目：
style="?android:attr/progressBarStyleHorizontal"は水平方向の進捗バーを意味します。
そのほかのスタイル↓
progressBarStyle(標準の円形インジケータ)progressBarStyleSmall(小さめの円形)
まとめ
おつかれさまでした。いかがでしたでしょうか！
ただ処理を作るだけでなく、進捗状況を表示することで
ユーザーに丁寧な印象を与えることができますね。
ぜひ覚えて、アプリ開発で試してみてくださいね〜！
すだ技術者としてのキャリアパスを次のレベルへと進めたい皆様、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
を通じて、
自分の市場価値をさらに向上させてみませんか？
コメント