ラジオボタン(コンポーネント)を使う

トグルボタンに続いて、今度はラジオボタンを作成していきます。

 

ラジオボタンとは、ひとつのグループの中で、ひとつのボタンのみを選択する時に使用をするボタンです。

radiobutton

 

デフォルトでコンポーネントに含まれている動作は

1、ひとつを選択すると、他のボタンの選択が取り消されます。

2、クリックされたボタンを取得する事ができます。

 

簡単に組み込む事ができるようになっていますので、

この機会に特性と組み込み方を覚えてしまいましょう。

 

作り方

 

まずはじめに、rButtonと言うクラスを作成します。

最初にrButtonというプロジェクトを作成します。

作成が完了したら、main.xmlのファイルを開きます。

※main.xmlでは【graphical layout】で作業を行うと簡単にレイアウトの変更ができます。

TextViewクラスがデフォルトで中に配置されていると思いますが、削除をします。

 

次に、項目の中からradioGroupをドラッグして、main.xmlの中にいれます。

radionGroupの中にはデフォルトで3個のボタンが組み込まれているはずです。

数に関しては、main.xmlを利用して任意の数にしてください。

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <RadioGroup 
 android:layout_height="wrap_content" 
 android:id="@+id/radioGroup1" 
 android:layout_width="fill_parent">
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio0" 
 android:layout_width="wrap_content" 
 android:text="RadioButton" 
 android:checked="true"></RadioButton>
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio1" 
 android:layout_width="wrap_content" 
 android:text="RadioButton"></RadioButton>
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio2" 
 android:layout_width="wrap_content" 
 android:text="RadioButton"></RadioButton>
 </RadioGroup>
</LinearLayout>

 

上記のようなmain.xmlになっているかと思います。もしidなどがなければ必要になりますので、追加をしておいてください。

 

ここで一度パブリッシュをしてみてください。

radiobutton

パブリッシュされたアプリでボタンをクリックをすると、常にひとつのボタンのみが点灯しているのがわかると思います。

 

また、ここでラジオボタン自体を横並びに表示をさせて見ましょう。

android:orientation="horizontal"

※方向(orientation)を水平(horizontal)にしてます。垂直(vertical)にすると、縦に並びます。

と言う項目をradionGroupに追加してください。

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <RadioGroup 
 android:layout_height="wrap_content" 
 android:id="@+id/radioGroup1" 
 android:orientation="horizontal"
 android:layout_width="fill_parent">
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio0" 
 android:layout_width="wrap_content" 
 android:text="RadioButton" 
 android:checked="true"></RadioButton>
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio1" 
 android:layout_width="wrap_content" 
 android:text="RadioButton"></RadioButton>
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio2" 
 android:layout_width="wrap_content" 
 android:text="RadioButton"></RadioButton>
 </RadioGroup>
</LinearLayout>

これをパブリッシュすると以下のような形になります。

radiobutton

 

ここで、スクリプトで、動作をさせてみましょう。

今回もスクリプト動作の確認のためTextViewを追加しておきます。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 android:orientation="vertical"
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 >
 <RadioGroup 
 android:layout_height="wrap_content" 
 android:id="@+id/radioGroup1" 
 android:orientation="horizontal"
 android:layout_width="fill_parent">
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio0" 
 android:layout_width="wrap_content" 
 android:text="RadioButton" 
 android:checked="true"></RadioButton>
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio1" 
 android:layout_width="wrap_content" 
 android:text="RadioButton"></RadioButton>
 <RadioButton 
 android:layout_height="wrap_content" 
 android:id="@+id/radio2" 
 android:layout_width="wrap_content" 
 android:text="RadioButton"></RadioButton>
 </RadioGroup>
 <TextView 
 android:text="TextView" 
 android:id="@+id/textView1" 
 android:layout_width="wrap_content" 
 android:layout_height="wrap_content"></TextView>
</LinearLayout>

上記のレイアウトを使用してスクリプトを作成していきます。

まず、最初に行うのは配置したオブジェクトを読み込む為の変数を用意します。

private RadioGroup _radioGroup;
private TextView _textView;

次にコンストラクタで、この変数にオブジェクトを読み込みます。

_radioGroup = (RadioGroup)findViewById(R.id.radioGroup1);
_textView = (TextView)findViewById(R.id.textView1);

クリックイベントを取得する為には、RadioGroup.OnCheckedChangeListenerをimplementsする必要があり、イベントをradioGroupに結びつける必要があります。

イベントが取得された際にonCheckedChangedが実行されますが、引数の値として、1つ目がそのクリックされたradioGroup、2つ目がクリックされたradioButtonになります。

package andante.in.android.rbutton;

import android.app.Activity;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.TextView;

public class rButton extends Activity implements RadioGroup.OnCheckedChangeListener{
 /** Called when the activity is first created. */
 
 private RadioGroup _radioGroup;
 private TextView _textView;
 
 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);
 _radioGroup = (RadioGroup)findViewById(R.id.radioGroup1);
 _textView = (TextView)findViewById(R.id.textView1);
 _radioGroup.setOnCheckedChangeListener(this);
 
 }
 
 public void onCheckedChanged(RadioGroup arg0,int arg1){
 if(arg0 == _radioGroup){
 switch(arg1){
 case R.id.radio0:
 _textView.setText("1つめをクリックした");
 break;
 case R.id.radio1:
 _textView.setText("2つめをクリックした");
 break;
 case R.id.radio2:
 _textView.setText("3つめをクリックした");
 break;
 default:
 break;
 }
 
 }
 }
}

以上で、ラジオボタンを押すたびに値が切り替わるものを作成できました。

実際には、内部変数の値を変更して利用をするかと思いますが、ここでは明示的にTextViewの中にいれて利用をしました。

 

またボタンには下記の処理が含まれている。

 

値をセットする。

_btn.setChecked(true);

スイッチを切り替える。

_btn.toggle();

オンオフの取得

_btn.isChecked()

前後の記事

前の記事:

次の記事:

関連の記事

コメント

:D toorisugari

スクリプト?って何ですか?
AndroidはJavaスクリプトではありませんよね。

コメントの投稿

  • サイト内検索

新作アプリの紹介

関連サイトの紹介

アンドロイドアプリ開発TIPS
きぐるみカメラ
ふらいぱん
アンドロイドのデザイン集
Page top↑