今回は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は動画の再生位置の設定や音量の変更等によく使われていたりしますね。
それでは
コメント
[…] 前回はSeekBarを表示する方法をまとめました。 […]