公開日：2020/02/27
更新日：2020/08/03

【Kotlin基礎】SeekBarの実装方法を解説

KotlinでSeekBarを実装する方法が知りたい。
SeekBarをコードで動的に実装したい。
SeekBarのメモリを表示したい。
SeekBarが操作された時に、任意の処理を実行したい。

こんな悩みを抱えている方、いらっしゃいませんか？

SeekBarとは、つまみを左右にスライドさせることで値を選択することができるViewのことをいいます。音量調節や図形の拡大縮小など、連続で設定値を変更する場合などに重宝します。

本記事では、そんなSeekBarの実装方法や使い方、操作時のイベント取得方法などを、サンプルコードを交え、わかりやすく解説しております。

１．SeekBarの実装方法
- １－１．xmlでSeekBarを実装する
- １－２．コードで動的にSeekBarを実装する
２．SeekBarの基本的な使い方
３．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/>タグを使用します。

Point

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を追加しております。

Point

コードで動的に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が半分であるためです。

Point

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に設定しているので、少しつまみが移動しているのがわかります。

Point

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>

Point

目盛りを表示するには、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つのコールバックメソッドが定義されております。

これらのメソッドをオーバーライドすることで、各イベントを受け取り、任意の処理を実行することができます。

Point

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つのコールバックメソッドが定義されている