2011年9月6日火曜日

Androidで複数ボタンから1つだけ選択するUIの実現

このエントリーをはてなブックマークに追加

少しタイトルがわかりにくいですが、複数のボタンから一つ選択すると、他のボタンは非選択状態になると言ったUIの実現方法です。
これは、ラジオボタンからチェックするボタンを消し、背景画像を用意することで実現できます。

【構成】


【MainActivity.java】
package com.ayakix;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}


【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_width="fill_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="horizontal">
<RadioButton android:id="@+id/rb_left"
android:text="Left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:checked="true"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/back" />
<RadioButton android:id="@+id/rb_center"
android:text="Center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/back" />
<RadioButton android:id="@+id/rb_right"
android:text="Right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:background="@drawable/back" />
</RadioGroup>
</LinearLayout>

※android:button="@null"とすることで、ラジオボタンのチェックするボタンが表示されなくなり、自分で設定する背景であるandroid:background="@drawable/back"のみが表示されるようになります。

【back.xml】
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
<color android:color="#FFFF0000" />
</item>
<item android:state_checked="true">
<color android:color="#FF00FF00" />
</item>
</selector>

※falseの場合には非選択状態の背景を、trueの場合には選択状態の背景を設定します。