Genta Hirauchi

公開日:2020/02/16
更新日:2020/08/03

【Kotlin基礎】RadioButtonでラジオボタンを実装する方法を解説

  • Kotlinでラジオボタンを実装する方法が知りたい。
  • RadioButtonをコードで動的に実装したい。
  • 選択項目が変更された時の処理を実装したい。

Kotlinでは、RadioButtonとRadioGroupというViewを組み合わせることで、ラジオボタン(複数の選択肢から1つを選択するボタン)を実装することができます。

RadioButtonとRadioGroupの2つのViewを使用するので、思ったように実装できず、選択状態の切り替えなどが正しく機能しなくて困っている方、たくさんいらっしゃるのではないでしょうか?

そこで本記事では、RadioButton、RadioGroupの基本的な実装方法や、コードで動的に実装する方法、そして、選択項目変更のイベント取得方法について、サンプルコードを交え、わかりやすく解説しております。

目次

RadioButtonでラジオボタンを実装する方法

Kotlinでラジオボタンを実装するには、RadioButtonと、RadioGroupというViewを使用します。

【公式ドキュメント】 : Radio Buttons | Android Developers

RadioButton、RadioGroupを実装するには、xmlで実装する方法と、コードで動的に実装する方法があります。

xmlでRadioButtonを実装する

まずは、xmlで実装する方法を紹介致します。xmlで実装するには、以下のように実装します。

  • xmlで実装
<RadioGroup
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:text="ボタン1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:text="ボタン2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:text="ボタン3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

RadioGroupを実装するには、<RadioGroup/>タグを使用します。

RadioButtonを実装するには、<RadioButton/>タグを使用します。
RadioButtonは、RadioGroupのタグ内に実装します。そうすることで、RadioGroup内に実装されたRadioButton達がグループ化され、1つが選択されると、他が選択解除されるようになります。

RadioButtonのテキストは、android:textで、指定することができます。

Point
  • xmlでラジオボタンを実装するには、<RadioGroup/>タグ、<RadioButton/>タグを使用する
  • RadioButtonは、RadioGroupの子Viewとなるように実装する
  • xmlでラジオボタンのテキストは、android:textで指定する

コードで動的にRadioButtonを実装する

続いて、コードで動的に実装する方法を紹介致します。コードで動的に実装するには、以下のように実装します。

  • コードで実装
// 1つ目のRadioButton生成
val radioButton1 = RadioButton(this)
radioButton1.text = "ボタン1"

// 2つ目のRadioButton生成
val radioButton2 = RadioButton(this)
radioButton2.text = "ボタン2"

// 3つ目のRadioButton生成
val radioButton3 = RadioButton(this)
radioButton3.text = "ボタン3"

// RadioGroupの生成
val radioGroup = RadioGroup(this)
// RadioGroupに、3つのRadioButtonを子Viewとして追加
radioGroup.addView(radioButton1)
radioGroup.addView(radioButton2)
radioGroup.addView(radioButton3)

// LinearLayoutに、RadioGroupを子Viewとして追加(LinearLayoutは、xmlで定義済みとする)
val linearLayout = findViewById<LinearLayout>(R.id.container)
linearLayout.addView(radioGroup)

RadioButton()で、RadioButtonのインスタンスを、RadioGroup()で、RadioGroupのインスタンスを生成しております。

コードで動的にRadioButtonのテキストを指定するには、textを使用します。

RadioGroupの子ViewとしてRadioButtonを追加するには、addView()を使用します。

最後に、親レイアウトのlinearLayoutに対し、addView()でRadioGroupを追加しております。

Point
  • コードで実装するには、RadioButton()、RadioGroup()でインスタンスを生成する
  • コードでRadioButtonのテキストを指定するには、textを使用する
  • コードでRadioGroupの子ViewとしてRadioButtonを追加するには、RadioGroupにaddView()する

RadioButtonの基本的な使い方

選択状態を変更する方法

RadioButtonの選択状態を変更するには、RadioGroupから変更する方法と、RadioButtonから変更する方法があります。

RadioGroupから選択状態を変更する

RadioGroupから選択状態を変更するには、check()を使用します。

  • MainActivity.kt
  • activity_main.xml
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.check(R.id.radio_button_2)
<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

check()の引数には、選択状態にしたいRadioButtonのIDを指定します。

Point
  • RadioGroupから任意のRadioButtonを選択状態に変更するには、check()を使用する。check()の引数には、選択状態にしたいRadioButtonのIDを指定する

RadioButtonから選択状態を変更する

RadioButtonから選択状態を変更するには、isCheckedを使用します。

  • MainActivity.kt
  • activity_main.xml
val radioButton = findViewById<RadioButton>(R.id.radio_button_2)
radioButton.isChecked = true
<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

isCheckedに、trueを指定すると選択状態になり、falseを指定すると選択状態が解除されます。

また、同じRadioGroup内の2つのRadioButtonに対し、isChecked = trueを設定すると、最後に設定されたRadioButtonが選択状態となります。

Point
  • RadioButtonから、自身の選択状態を変更するには、isCheckedを使用する

選択されているRadioButtonのIDを取得する方法

選択されているRadioButtonのIDを取得するには、checkedRadioButtonIdを使用します。

  • MainActivity.kt
  • activity_main.xml
// RadioGroupから、RadioButton1を選択状態に変更
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.check(R.id.radio_button_1)

// 選択状態のRadioButtonのIDを取得
val id = radioGroup.checkedRadioButtonId

// IDをもとに、選択状態のRadioButtonを取得し、ボタンのテキストを出力
val checkedRadioButton = findViewById<RadioButton>(id)
println(checkedRadioButton.text)
<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

RadioGroupに対し、checkedRadioButtonIdで選択状態のRadioButtonのIDを取得し、そのIDをもとに、RadioButtonを取得しております。

上記のサンプルコードを実行すると、「ボタン1」と出力されます。

Point
  • 選択されているRadioButtonのIDを取得するには、checkedRadioButtonIdを使用する

全てのチェック状態を解除する方法

全てのチェック状態を解除するには、clearCheck()を使用します。

  • MainActivity.kt
  • activity_main.xml
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)
radioGroup.check(R.id.radio_button_1)
radioGroup.clearCheck()
<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

check()でRadioButton1を選択状態に変更した後、clearCheck()で選択状態を解除しております。

Point
  • 全ての選択状態を解除するには、clearCheck()を使用する

選択項目が変更されたイベントを受け取る方法

最後に、RadioButtonの選択項目が変更された時のイベントを受け取る方法を紹介致します。選択項目変更のイベントを受け取るには、setOnCheckedChangeListenerを実装します。

以下は、ラジオボタンを選択すると、選択したラジオボタンのテキストがトーストで表示されるサンプルコードです。

  • MainActivity.kt
  • activity_main.xml
val radioGroup = findViewById<RadioGroup>(R.id.radio_group)

// 選択項目変更のイベント追加
radioGroup.setOnCheckedChangeListener { group, checkedId ->
   // checkedIdから、選択されたRadioButtonを取得
   val radioButton = findViewById<RadioButton>(checkedId)
   Toast.makeText(this, radioButton.text, Toast.LENGTH_SHORT).show()
}
<RadioGroup
   android:id="@+id/radio_group"
   android:layout_width="wrap_content"
   android:layout_height="wrap_content">

   <RadioButton
       android:id="@+id/radio_button_1"
       android:text="ボタン1"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_2"
       android:text="ボタン2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

   <RadioButton
       android:id="@+id/radio_button_3"
       android:text="ボタン3"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" />

</RadioGroup>

setOnCheckedChangeListenerの後のブロック{ }内に、選択項目が変更された時に行いたい処理を実装します。また、ブロック内では、RadioGroup(サンプルコードのgroup)と、選択されたRadioButtonのID(サンプルコードのcheckedId)を受け取ることができます。

Point
  • 選択項目変更イベントを実装するには、setOnCheckedChangeListenerを使用する
  • 選択項目が変更された時に行いたい処理は、setOnCheckedChangeListenerの後のブロック{ }内に実装する
    ブロック内では、項目変更が行なわれたRadioGroupと選択されたRadioButtonのIDを受け取ることができる

まとめ

  • xmlでラジオボタンを実装するには、<RadioGroup/>タグ、<RadioButton/>タグを使用する
  • RadioButtonは、RadioGroupの子Viewとなるように実装する
  • xmlでラジオボタンのテキストは、android:textで指定する
  • コードで実装するには、RadioButton()、RadioGroup()でインスタンスを生成する
  • コードでRadioButtonのテキストを指定するには、textを使用する
  • コードでRadioGroupの子ViewとしてRadioButtonを追加するには、RadioGroupにaddView()する
  • RadioGroupから任意のRadioButtonを選択状態に変更するには、check()を使用する。check()の引数には、選択状態にしたいRadioButtonのIDを指定する
  • RadioButtonから、自身の選択状態を変更するには、isCheckedを使用する
  • 選択されているRadioButtonのIDを取得するには、checkedRadioButtonIdを使用する
  • 全ての選択状態を解除するには、clearCheck()を使用する
  • 選択項目変更イベントを実装するには、setOnCheckedChangeListenerを使用する
  • 選択項目が変更された時に行いたい処理は、setOnCheckedChangeListenerの後のブロック{ }内に実装する
    ブロック内では、項目変更が行なわれたRadioGroupと選択されたRadioButtonのIDを受け取ることができる