1. 程式人生 > 實用技巧 >Android開發筆記(七)——CheckBox

Android開發筆記(七)——CheckBox

RadioButton可以實現在一組控制元件中單選的功能,CheckBox可以實現複選的功能。
首先依舊是新建一個用於演示CheckBox的activity CheckBoxActivity ,此時 AndroidMainfest.xml 中會自動新增如下宣告:

<activity android:name=".CheckBoxActivity"></activity>

之後在 activity_main.xml 中新增一個Button用來進行RadioButton控制元件的展示:

<Button
    android:id="@+id/btn_checkbox"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="CheckBox"
    android:textAllCaps="false"
    />

接下來在 MainActivity.java 中宣告這個控制元件:

private Button mBtnCheckBox;

之後要在 MainActivity.java 中的 onCreate 函式中使用 findViewById 找到該button:

mBtnCheckBox=findViewById(R.id.btn_radiobutton);

setListener() 中設定監聽事件:

mBtnCheckBox.setOnClickListener(onClick);

之後在 onClick 中新增:

case R.id.btn_checkbox:
    //跳轉到CheckBox演示介面
    intent=new Intent(MainActivity.this, CheckBoxActivity.class);
    break;

具體可以看上次的筆記。
之後開啟佈局檔案 activity_check_box.xml 進行佈局:

常用屬性

和之前的內容差不多,下面是一個佈局的例子:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="20dp"
    >

   <TextView
       android:id="@+id/tv_title"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="你會哪些移動開發?"
       android:textSize="20sp"
       android:textColor="#000000"
       android:layout_marginBottom="20dp"
       />

   <CheckBox
        android:id="@+id/cb_1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Android"
        android:textSize="20sp"
        android:layout_below="@id/tv_title"
        />

   <CheckBox
        android:id="@+id/cb_2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="IOS"
        android:textSize="20sp"
        android:layout_below="@id/cb_1"
        />

   <CheckBox
        android:id="@+id/cb_3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="H5"
        android:textSize="20sp"
        android:layout_below="@id/cb_2"
        />

   <CheckBox
        android:id="@+id/cb_4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="其他"
        android:textSize="20sp"
        android:layout_below="@id/cb_3"
        />
</RelativeLayout>

效果:

自定義樣式

通常例項開發中都是採用自定義的樣式:
同樣先進行佈局:

   <LinearLayout
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:orientation="vertical"
       android:layout_below="@id/cb_4"
       android:layout_marginTop="20dp"
       >
       <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="你的興趣愛好有哪些?"
           android:textSize="20sp"
           android:textColor="#000000"
           />

       <CheckBox
           android:id="@+id/cb_5"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="唱歌"
           android:textSize="20sp"
           android:layout_marginTop="20dp"
           />

       <CheckBox
           android:id="@+id/cb_6"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="繪畫"
           android:textSize="20sp"
           />

       <CheckBox
           android:id="@+id/cb_7"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="其他"
           android:textSize="20sp"
           />
   </LinearLayout>

把準備好的樣式圖片放置到 drawable-xxhdpi 中,再新建一個 drawable resource file

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false"
        android:drawable="@drawable/icon_checkbox_false"/>
    <item android:state_checked="true"
        android:drawable="@drawable/icon_checkbox_ture"/>
</selector>

背景選擇器準備好之後,返回佈局檔案加入屬性:

android:button="@drawable/bg_checkbox"
android:paddingLeft="10dp"

其中 paddingLeft 是新增內邊距。
效果:

監聽事件

CheckBoxActivity.java 中首先宣告:

private CheckBox mCb5,mCb6,mCb7;

之後在 onCreate 函式中找到這幾個當選中狀態進行變化時想要有監聽事件的控制元件:

mCb5=findViewById(R.id.cb_5);
mCb6=findViewById(R.id.cb_6);
mCb7=findViewById(R.id.cb_7);

之後再設定監聽事件:

mCb5.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        Toast.makeText(CheckBoxActivity.this,isChecked?"選中":"未選中",Toast.LENGTH_SHORT).show();
    }
});

其他兩個按鈕設定方法一樣。
效果: