公開日:2020/02/27更新日:2020/08/03
【Kotlin基礎】SeekBarの実装方法を解説

- KotlinでSeekBarを実装する方法が知りたい。
- SeekBarをコードで動的に実装したい。
- SeekBarのメモリを表示したい。
- SeekBarが操作された時に、任意の処理を実行したい。
こんな悩みを抱えている方、いらっしゃいませんか?
SeekBarとは、つまみを左右にスライドさせることで値を選択することができるViewのことをいいます。音量調節や図形の拡大縮小など、連続で設定値を変更する場合などに重宝します。
本記事では、そんなSeekBarの実装方法や使い方、操作時のイベント取得方法などを、サンプルコードを交え、わかりやすく解説しております。
目次
SeekBarの実装方法
Kotlinでつまみのスライドによる値の設定を実装するには、SeekBarというViewを使用します。
【公式ドキュメント】 : SeekBar | Android Developers
SeekBarを実装するには、xmlで実装する方法と、コードで動的に実装する方法の、2通りの方法があります。
xmlでSeekBarを実装する
まずは、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">
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
SeekBarを実装するには、<SeekBar/>タグを使用します。
- xmlでSeekBarを実装するには、<SeekBar/>タグを使用する
コードで動的にSeekBarを実装する
続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。
- MainActivity.kt
- activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// SeekBarの生成
val seekBar = SeekBar(this)
// 親レイアウトに、SeekBarを追加
val linearLayout = findViewById<LinearLayout>(R.id.container)
linearLayout.addView(seekBar)
}
<?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>
SeekBar()で、SeekBarのインスタンスを生成しております。
その後、親レイアウトのlinearLayoutに対し、addView()でSeekBarを追加しております。
- コードで動的にSeekBarを実装するには、SeekBar()でインスタンスを生成した後、addView()で追加する
SeekBarの基本的な使い方
SeekBarの初期値を変更する
続いて、SeekBarの初期値を変更する方法を紹介致します。SeekBarの初期値は、progressで設定することができます。
○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">
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:progress="50" />
</LinearLayout>
○コードで実装
- MainActivity.kt
- activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val seekBar = findViewById<SeekBar>(R.id.seek_bar)
seekBar.progress = 50
}
<?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">
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
サンプルコードではprogressに50を設定しております。
実行結果を見てみると、SeekBarの中央まで、ピンクのつまみが移動しているのがわかります。これは、SeekBarのデフォルトの範囲が0~100であり、50が半分であるためです。
- SeekBarの値は、progressで変更することができる
SeekBarの範囲を変更する
続いて、SeekBarの範囲を変更する方法を紹介致します。SeekBarの範囲は、maxとminで設定することができます。
○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">
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="200"
android:min="-10" />
</LinearLayout>
○コードで実装
- MainActivity.kt
- activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val seekBar = findViewById<SeekBar>(R.id.seek_bar)
seekBar.max = 200
seekBar.min = -10
}
<?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">
<SeekBar
android:id="@+id/seek_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
サンプルコードでは、最大値を200、最小値を-10を設定しております。
SeekBarのデフォルト値は0ですが、最小値を-10に設定しているので、少しつまみが移動しているのがわかります。
- SeekBarの範囲は、max、minで変更することができる
SeekBarに目盛りを表示する
続いて、SeekBarに目盛りを表示する方法を紹介致します。目盛りを表示するには、style属性に@style/Widget.AppCompat.SeekBar.Discreteを指定します。
○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">
<SeekBar
android:id="@+id/seek_bar"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10" />
</LinearLayout>
- 目盛りを表示するには、style属性に@style/Widget.AppCompat.SeekBar.Discreteを指定する
SeekBarが操作された時のイベントを受け取る方法
最後に、SeekBarが操作された時のイベントを受け取る方法を紹介致します。操作イベントを受け取るには、setOnSeekBarChangeListenerを実装します。
以下は、SeekBarの操作によってテキストの表示が変わるサンプルコードです。
- MainActivity.kt
- activity_main.xml
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val textView = findViewById<TextView>(R.id.text_view)
val seekBar = findViewById<SeekBar>(R.id.seek_bar)
// イベントリスナーの追加
seekBar.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
// 値が変更された時に呼ばれる
override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
textView.text = progress.toString()
}
// つまみがタッチされた時に呼ばれる
override fun onStartTrackingTouch(seekBar: SeekBar?) {
textView.text = "タッチされました。"
}
// つまみが離された時に呼ばれる
override fun onStopTrackingTouch(seekBar: SeekBar?) {
textView.text = "離されました。"
}
})
}
<?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">
<TextView
android:id="@+id/text_view"
android:textSize="20sp"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="20dp" />
<SeekBar
android:id="@+id/seek_bar"
style="@style/Widget.AppCompat.SeekBar.Discrete"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:max="10" />
</LinearLayout>
setOnSeekBarChangeListenerには、
値が変更された時に呼ばれるonProgressChanged、
つまみがタッチされた時に呼ばれるonStartTrackingTouch、
つまみが離された時に呼ばれるonStopTrackingTouch
という3つのコールバックメソッドが定義されております。
これらのメソッドをオーバーライドすることで、各イベントを受け取り、任意の処理を実行することができます。
- SeekBarの操作イベントを受け取るには、setOnSeekBarChangeListenerを実装する
- setOnSeekBarChangeListenerには、onProgressChanged、onStartTrackingTouch、onStopTrackingTouchという3つのコールバックメソッドが定義されている
まとめ
- xmlでSeekBarを実装するには、<SeekBar/>タグを使用する
- コードで動的にSeekBarを実装するには、SeekBar()でインスタンスを生成した後、addView()で追加する
- SeekBarの値は、progressで変更できる
- SeekBarの範囲は、max、minで変更できる
- SeekBarに目盛りを表示するには、style属性に@style/Widget.AppCompat.SeekBar.Discreteを指定する
- SeekBarの操作イベントを受け取るには、setOnSeekBarChangeListenerを実装する
- setOnSeekBarChangeListenerには、onProgressChanged、onStartTrackingTouch、onStopTrackingTouchという3つのコールバックメソッドが定義されている
関連記事