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是最简洁、方便、效果不错的做法，推荐使用~