2011年10月17日月曜日

CheckBox

状態のON/OFFを切り替えるにはCheckBoxを使います。例えば、ある機能を有効/無効にする、アイテムの中から複数選択する、といった場合の利用が考えられます。このブログでは「EditText」の記事で「パスワードを表示する/しない」の機能に使いました。


TextViewとCheckBox

まず最初にTextViewとCheckBoxを表示するだけのサンプルプログラムを作ってみます。

Androidプロジェクトの設定
プロジェクト名:CheckBoxTest1a
ビルドターゲット:Android 2.1-update1
アプリケーション名:CheckBoxTest1a
パッケージ名:jp.co.triware.samples.CheckBoxTest1a
アクティビティーの作成:CheckBoxTest1a
最小SDKバージョン:7
CheckBoxTest1a.java
package jp.co.triware.samples.CheckBoxTest1a;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.CheckBox;
import android.widget.TextView;
import android.widget.Toast;

public class CheckBoxTest1a extends Activity {
    private static final String TAG = "CheckBoxTest1a";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TextView tv = (TextView)findViewById(R.id.checkboxtest_tv);
        CheckBox cb = (CheckBox)findViewById(R.id.checkboxtest_cb);

        String buf = "TextView: " + tv.getTextSize() + " #" + Integer.toHexString(tv.getCurrentTextColor());
        buf += "\nCheckBox: " + cb.getTextSize() + " #" + Integer.toHexString(cb.getCurrentTextColor());

        Toast.makeText(this, buf, Toast.LENGTH_LONG).show();
        Log.d(TAG, buf);
    }
}
TextViewとCheckBoxのテキストのサイズと色を、ToastとLogで確認します。

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"
    >
    <TextView
        android:id="@+id/checkboxtest_tv"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="チェックボックスのテストです。"
        />
    <CheckBox
        android:id="@+id/checkboxtest_cb"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="チェックしてください。"
        />
</LinearLayout>

実行結果

TextViewとCheckBoxでは、テキストのサイズも色も異なります。具体的な数値はToastで表示されている通りです。


TextViewとCheckBoxを同じサイズ・色に変更する

このままではバランスが悪いので、TextViewとCheckBoxのサイズを統一することにします。

チェックボックスの大きさを変更するにはリソースを作らなくてはなりませんので、この方法は別の機会にしましょう。

今回はテキストサイズが小さいTextViewをCheckBoxのサイズに合わせて見映えをよくします。また、色はCheckBoxをTextViewに合わせました。

Androidプロジェクトの設定
プロジェクト名:CheckBoxTest1b
ビルドターゲット:Android 2.1-update1
アプリケーション名:CheckBoxTest1b
パッケージ名:jp.co.triware.samples.CheckBoxTest1b
アクティビティーの作成:CheckBoxTest1b
最小SDKバージョン:7
CheckBoxTest1b.java
package jp.co.triware.samples.CheckBoxTest1b;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.CheckBox;
import android.widget.TextView;
import android.widget.Toast;

public class CheckBoxTest1b extends Activity {
    private static final String TAG = "CheckBoxTest1b";

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        TextView tv = (TextView)findViewById(R.id.checkboxtest_tv);
        CheckBox cb = (CheckBox)findViewById(R.id.checkboxtest_cb);

        // テキストのサイズと色を調整
        tv.setTextSize(cb.getTextSize());
        cb.setTextColor(tv.getCurrentTextColor());

        String buf = "TextView: " + tv.getTextSize() + " #" + Integer.toHexString(tv.getCurrentTextColor());
        buf += "\nCheckBox: " + cb.getTextSize() + " #" + Integer.toHexString(cb.getCurrentTextColor());

        Toast.makeText(this, buf, Toast.LENGTH_LONG).show();
        Log.d(TAG, buf);
    }
}

main.xml は、CheckBoxTest1aのものと同じです。

実行結果

見映えがよくなりましたね。


CheckBoxの動き

次はいよいよチェックボックスをON/OFFした時の動きを実装します。サンプルプログラムでは、"ON"/"OFF"の状態はToastとLogで出力しています。

Androidプロジェクトの設定
プロジェクト名:CheckBoxTest1c
ビルドターゲット:Android 2.1-update1
アプリケーション名:CheckBoxTest1c
パッケージ名:jp.co.triware.samples.CheckBoxTest1c
アクティビティーの作成:CheckBoxTest1c
最小SDKバージョン:7
CheckBoxTest1c.java
package jp.co.triware.samples.CheckBoxTest1c;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TextView;
import android.widget.Toast;

public class CheckBoxTest1c extends Activity {
    private static final String TAG = "CheckBoxTest1c";
    private Toast myToast = null;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        myToast = Toast.makeText(this, "", Toast.LENGTH_SHORT);
        TextView tv = (TextView)findViewById(R.id.checkboxtest_tv);
        CheckBox cb = (CheckBox)findViewById(R.id.checkboxtest_cb);

        // テキストのサイズと色を調整
        tv.setTextSize(cb.getTextSize());
        cb.setTextColor(tv.getCurrentTextColor());

        // チェックボックスの状態が変わった時の処理
        cb.setOnCheckedChangeListener(new OnCheckedChangeListener() {
            // @Override // JDK1.5ではビルドエラー
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                myToast.cancel();
                if (isChecked == true) {
                    myToast.setText("ON");
                    Log.d(TAG, "ON");
                } else {
                    myToast.setText("OFF");
                    Log.d(TAG, "OFF");
                }
                myToast.show();
            }
        });
    }
}

main.xml は、CheckBoxTest1aのものと同じです。

EditText」で使ったCheckBoxでは、setOnClickListener()メソッドで、「チェックボックスがクリックされた時」の処理(onClick())を設定しました。

今回は「チェックボックスの状態が変わった時」に処理するように、setOnCheckedChangeListener()メソッドを使ってonCheckedChanged()を設定しました。

onClick()ではチェックボックスの状態を取得するためにisChecked()を呼び出す必要がありましたが、onCheckedChanged()では引数isCheckedを参照することで判定できます。

実行結果

0 件のコメント:

コメントを投稿