Android各控件實現背景選中效果總結

前言

selector實現背景選中替換效果，很容易的一個東西，但每次用到都很容易把各控件的使用方法記混，索性寫一篇總結方便下次查找。本篇總結的控件包括CheckBox、ImageButton、RadioButton、Button、ImageView。推薦使用CheckBox，下面讓我們來分析各控件的使用方法以及爲什麼推薦使用CheckBox
效果圖如下

CheckBox

使用步驟

1、創建checkbox_bg.xml文件

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@mipmap/open" />
    <item android:state_checked="false" android:drawable="@mipmap/close" />
    <item android:drawable="@mipmap/close" />
</selector>

2、佈局文件裏添加

<CheckBox
        android:id="@+id/cb_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_cb"
        android:layout_marginTop="10dp"
        android:button="@drawable/checkbox_bg" />

分析

操作簡單、方便、圖片無變形，推薦使用

ImageButton

使用步驟

1、創建imagebutton_bg.xml文件

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/open" android:state_pressed="true"/>
    <item android:drawable="@mipmap/open" android:state_selected="true"/>
    <item android:drawable="@mipmap/close" android:state_enabled="true"/>
</selector>

2、佈局裏添加

<ImageButton
        android:id="@+id/ib_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_below="@id/tv_ib"
        android:layout_marginTop="10dp"
        android:src="@drawable/imagebutton_bg"/>

3、activity裏添加監聽判斷

ibButton = (ImageButton) findViewById(R.id.ib_button);
ibButton.setOnClickListener(this);
boolean ibFlag = false;
@Override
public void onClick(View v) {
    switch (v.getId()){
        case R.id.ib_button:
            if (!ibFlag){
                ibFlag = true;
                ibButton.setSelected(true);
            } else {
                ibFlag = false;
                ibButton.setSelected(false);
            }
            break;
    }
 }

分析

需手動添加判斷，設置其是否有選中效果，如不加判斷則只有點擊效果，圖片無變形，可使用

RadioButton

使用步驟

1、創建radiobutton_bg.xml文件

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/open" android:state_pressed="true" />
    <item android:drawable="@mipmap/open" android:state_focused="true" />
    <item android:drawable="@mipmap/open" android:state_checked="true" />
    <item android:drawable="@mipmap/close"/>
</selector>

2、在佈局文件裏添加

<RadioGroup
        android:id="@+id/rb_group"
        android:layout_below="@id/tv_rg"
        android:layout_marginTop="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/rb_button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:button="@null"
            android:background="@drawable/radiobutton_bg"/>

        <RadioButton
            android:id="@+id/rb_button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:button="@null"
            android:background="@drawable/radiobutton_bg"/>

    </RadioGroup>

分析

RadioButton如果是單個使用只有選中效果，無法取消，如果想要有選中取消效果，必須和RadioGroup結合使用，且同時只能選中一個，圖片稍微有變形，所以如果是單選選中效果不推薦使用

Button

使用步驟

1、創建button_bg.xml文件

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/open" android:state_pressed="true"/>
    <item android:drawable="@mipmap/open" android:state_selected="true"/>
    <item android:drawable="@mipmap/open" android:state_focused="true"/>
    <item android:drawable="@mipmap/close" />

</selector>

2、佈局文件裏添加

<Button
        android:id="@+id/b_button"
        android:layout_width="60dp"
        android:layout_height="16dp"
        android:layout_below="@id/tv_b"
        android:layout_marginTop="10dp"
        android:background="@drawable/button_bg"/>

3、activity裏添加監聽判斷

bButton = (Button) findViewById(R.id.b_button);
bButton.setOnClickListener(this);
boolean bFlag = false;
@Override
public void onClick(View v) {
        switch (v.getId()){
        case R.id.b_button:
            if (!bFlag){
                bFlag = true;
                bButton.setSelected(true);
            } else {
                bFlag = false;
                bButton.setSelected(false);
            }
            break;
      }
}

分析

圖片變形嚴重，需要設置固定寬高，需手動添加判斷，設置其是否有選中效果，如不加判斷則只有點擊效果，可實現效果，但不推薦使用

ImageView

使用步驟

1、創建imageview_bg.xml文件

<selector
    xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/open" android:state_pressed="true"/>
    <item android:drawable="@mipmap/open" android:state_selected="true"/>
    <item android:drawable="@mipmap/open" android:state_focused="true"/>
    <item android:drawable="@mipmap/close" />
</selector>

2、佈局文件裏添加

<ImageView
        android:id="@+id/iv_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/tv_iv"
        android:layout_marginTop="10dp"
        android:clickable="true"
        android:background="@drawable/imageview_bg"/>

3、activity裏添加

ivButton = (ImageView) findViewById(R.id.iv_button);
ivButton.setOnClickListener(this);
boolean ivFlag = false;
@Override
public void onClick(View v) {
        switch (v.getId()){
        case R.id.iv_button:
            if (!ivFlag){
                ivFlag = true;
                ivButton.setSelected(true);
            } else {
                ivFlag = false;
                ivButton.setSelected(false);
            }
            break;
        }

}

分析

需手動添加判斷，設置其是否有選中效果，如不加判斷則只有點擊效果，圖片無變形，可使用

總結

通過以上的對比，CheckBox是最簡潔、方便、效果不錯的做法，推薦使用~