【Android】SeekBarを表示する【Java/Kotlin】

今回はSeekBarを実装します。

SeekBarとはドラッグで進行状態を設定できるViewです。

他アプリのYoutubeでは動画再生時に再生時間の表示や変更するためのバーとして使用されています。

ユーザビリティに優れているので様々なアプリに使用されます。

SeekBarを表示する

まずはレイアウト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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
<SeekBar
    android:id="@+id/seekBar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintBottom_toBottomOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

実は表示するだけでSeekBarのつまみの部分が動かせます。

ですがこのままではユーザーがどの位置までつまみを移動したのかは分かりません。

SeekBarのつまみの変更を検知する

次はつまみの変更を検知しましょう

上記を実装する事によりつまみが一番左になった場合に処理を実行する等が可能になります。

SeekBarには欠かせない実装になります。

// SeekBarのインスタンスを取得
SeekBar seekBar = findViewById(R.id.seekBar);
// SeekBarのつまみの変更を検知する
seekBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
    @Override
    public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
        // つまみが変更された時に処理が実行される
    }

    @Override
    public void onStartTrackingTouch(SeekBar seekBar) {
        // ユーザーがタップ開始した時に処理が実行される
    }

    @Override
    public void onStopTrackingTouch(SeekBar seekBar) {
        // ユーザーがタップ終了した時に処理が実行される
    }
});
// SeekBarのインスタンスを取得
val seekBar = findViewById<SeekBar>(R.id.seekBar)
// SeekBarのつまみの変更を検知する
seekBar.setOnSeekBarChangeListener(object : OnSeekBarChangeListener {
    override fun onProgressChanged(seekBar: SeekBar, progress: Int, fromUser: Boolean) {
        // つまみが変更された時に処理が実行される
    }

    override fun onStartTrackingTouch(seekBar: SeekBar) {
        // ユーザーがタップ開始した時に処理が実行される
    }

    override fun onStopTrackingTouch(seekBar: SeekBar) {
        // ユーザーがタップ終了した時に処理が実行される
    }

setOnSeekBarChangeListener()の説明

引数型説明
第一引数SeekBar.OnSeekBarChangeListener進捗が変更されたときに通知するコールバック

onProgressChanged()の説明

つまみが変更された時に処理が実行される

引数型説明
第一引数SeekBar進捗が変更されたSeekBarのインスタンス
第二引数Int変更された進捗の数値
第三引数Booleanユーザーが進捗を変更したかどうか

onStartTrackingTouch()の説明

ユーザーがタップ開始した時に処理が実行される

引数型説明
第一引数SeekBarユーザーがタップ開始したSeekBarのインスタンス

onStopTrackingTouch()の説明

ユーザーがタップ終了した時に処理が実行される

引数型説明
第一引数SeekBarユーザーがタップ終了したSeekBarのインスタンス

SeekBarの進捗を変更する

ユーザがつまみの位置を変更すると進捗の変更ができます。

では、アプリが進捗を変更する場合はどうすればよいでしょうか

下記で進捗を変更できます。

// SeekBarのインスタンスを取得
SeekBar seekBar = findViewById(R.id.seekBar);
// SeekBarの進捗を設定
seekBar.setProgress(95);
// SeekBarのインスタンスを取得
val seekBar = findViewById<SeekBar>(R.id.seekBar)
// SeekBarの進捗を設定
seekBar.progress = 95

setProgress()の説明

引数型説明
第一引数Int設定した値がつまみの位置に設定される

デフォルトで下限が0、上限が100
0を設定した場合はつまみの位置は最左部
100を設定した場合はつまみの位置は最右部

SeekBarにセカンダリプログレスを表示する

先行処理している処理の進捗状況もSeekBarに表示することが可能です。

他アプリのYoutubeでは動画読み込み済みを示すために使用されています。

// SeekBarのインスタンスを取得
SeekBar seekBar = findViewById(R.id.seekBar);
// SeekBarのセカンダリプログレスバーの進捗を設定
seekBar.setSecondaryProgress(50);
// SeekBarのインスタンスを取得
val seekBar = findViewById<SeekBar>(R.id.seekBar)
// SeekBarのセカンダリプログレスバーの進捗を設定
seekBar.secondaryProgress = 50

setSecondaryProgress()の説明

引数型説明
第一引数Int設定した値がセカンダリプログレスバーの進捗に設定される

最後に

いかがでしたでしょうか

SeekBarは動画の再生位置の設定音量の変更等によく使われていたりしますね。

それでは

コメント

  1. […] 前回はSeekBarを表示する方法をまとめました。 […]

タイトルとURLをコピーしました