【达内课程】Checkbox 和 RadioButton

Checkbox

栗子1：兴趣选择

效果图：

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请选择你的爱好" />

    <CheckBox
        android:id="@+id/cb_checkall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="全选/全不选" />

    <CheckBox
        android:id="@+id/cb_eat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Eat" />

    <CheckBox
        android:id="@+id/cb_sleep"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Sleep" />

    <CheckBox
        android:id="@+id/cb_code"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Code" />

    <Button
        android:id="@+id/btn_confirm"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="确定" />
</LinearLayout>

java

public class MainActivity extends AppCompatActivity {
    private CheckBox cb_checkall;
    private CheckBox cb_eat;
    private CheckBox cb_sleep;
    private CheckBox cb_code;
    private Button btn_confirm;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        cb_checkall = findViewById(R.id.cb_checkall);
        cb_eat = findViewById(R.id.cb_eat);
        cb_sleep = findViewById(R.id.cb_sleep);
        cb_code = findViewById(R.id.cb_code);
        btn_confirm = findViewById(R.id.btn_confirm);

        InnerOnClickListener listener = new InnerOnClickListener();
        btn_confirm.setOnClickListener(listener);
        InnerOnCheckedChangeListener onCheckedChangeListener = new InnerOnCheckedChangeListener();
        cb_checkall.setOnCheckedChangeListener(onCheckedChangeListener);
    }

    private class InnerOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            String result = "";
            if (cb_eat.isChecked()) {
                result += cb_eat.getText().toString() + " ";
            }
            if (cb_sleep.isChecked()) {
                result += cb_sleep.getText().toString() + " ";
            }
            if (cb_code.isChecked()) {
                result += cb_code.getText().toString() + " ";
            }
            if ("".equals(result)) {
                Toast.makeText(MainActivity.this, "请选择至少1个爱好", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(MainActivity.this, "您选择的爱好有:" + result.trim(), Toast.LENGTH_SHORT).show();
            }
        }
    }

    private class InnerOnCheckedChangeListener implements CompoundButton.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
            //第一个参数表示是操作哪个控件执行的。其他checkbox当然也可以添加这个监听器
            //可以根据compoundButton.getId()获得id来区分
            cb_eat.setChecked(b);
            cb_sleep.setChecked(b);
            cb_code.setChecked(b);
        }
    }
}

栗子1改进

代码改进

public class MainActivity extends AppCompatActivity {
    ......
    private Button btn_confirm;
    private CheckBox[] cb_list;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ......
        btn_confirm = findViewById(R.id.btn_confirm);
        cb_list = new CheckBox[3];
        cb_list[0] = cb_eat;
        cb_list[1] = cb_sleep;
        cb_list[2] = cb_code;
		
		//给按钮和checkbox 添加监听和之前代码相同
        ......
    }

    private class InnerOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            String result = "";

            for (int i = 0; i < cb_list.length; i++) {
                if (cb_list[i].isChecked()) {
                    result += cb_list[i].getText().toString() + " ";
                }
            }
            
            //判断result是否为空弹出提示，和之前代码相同
        }
    }

    ......
}

改近版本中我们在数组中添加了3个 CheckBox 使得代码更加简洁。当然还可以改进，我们可以给这3个 CheckBox 都加上监听，当 3 个全选中的时候，最上边的 CheckBox 也选中，当没有全选的时候，最上边的 CheckBox 也不选中。这个实现起来也很简单，留给你们自己完成。

RadioButton

栗子1：RadioButton 选择

关于 RadioButton 我们先来看一个最简单的例子：

xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="20dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="请选择你的性别" />
    <!--默认是垂直排列，可以通过orientation改变-->
    <RadioGroup
        android:id="@+id/rg_gendar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <!--可以通过设置layout_weight-->
        <RadioButton
            android:id="@+id/rb_male"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="男" />

        <RadioButton
            android:id="@+id/rb_female"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="女" />
    </RadioGroup>

    <Button
        android:id="@+id/btn_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="提交" />
</LinearLayout>

java

public class MainActivity extends AppCompatActivity {
    private RadioButton rbMale;
    private Button btn;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rbMale = findViewById(R.id.rb_male);
        btn = findViewById(R.id.btn_submit);

        InnerOnClickListener innerOnClickListener = new InnerOnClickListener();
        btn.setOnClickListener(innerOnClickListener);
    }

    private class InnerOnClickListener implements View.OnClickListener {
        @Override
        public void onClick(View view) {
            String gender = rbMale.isChecked() ? "男" : "女";
            Toast.makeText(MainActivity.this, gender, Toast.LENGTH_SHORT).show();
        }
    }
}

栗子2：实现底部 tab 切换效果

实现思路：
我们给4个 RadioButton 放进一个数组 rbList 中，使用 for 循环给每个 RadioButton 添加点击事件，在点击事件中，我们循环 rbList，检查其中每个 RadioButton 是否被选中，如果选中则弹出信息。

xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <RadioGroup
        android:id="@+id/rg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#e5e5e5"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/index_selector"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:paddingTop="5dp"
            android:paddingBottom="10dp"
            android:text="首页"
            android:textColor="@drawable/text_selector" />

        <RadioButton
            android:id="@+id/rb_location"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/ju_selector"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:text="位置"
            android:textColor="@drawable/text_selector" />

        <RadioButton
            android:id="@+id/rb_cart"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/hua_selector"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:text="购物车"
            android:textColor="@drawable/text_selector" />

        <RadioButton
            android:id="@+id/rb_user"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/suan_selector"
            android:drawablePadding="5dp"
            android:gravity="center"
            android:text="我的"
            android:textColor="@drawable/text_selector" />
    </RadioGroup>
</RelativeLayout>

其中 index_selector.xml

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

其中 index_selected 和 index_unselected 分别是选中和未选中的图片：


其余 ju_selector.xml 类似。

其中 text_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#d81e06" android:state_checked="true" />
    <item android:color="#8a8a8a" />
</selector>

java

public class MainActivity extends AppCompatActivity {
    private RadioButton rbHome;
    private RadioButton rbLocation;
    private RadioButton rbCart;
    private RadioButton rbUser;
    private RadioButton[] rbList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        rbHome = findViewById(R.id.rb_home);
        rbLocation = findViewById(R.id.rb_location);
        rbCart = findViewById(R.id.rb_cart);
        rbUser = findViewById(R.id.rb_user);

        rbList = new RadioButton[4];
        rbList[0] = rbHome;
        rbList[1] = rbLocation;
        rbList[2] = rbCart;
        rbList[3] = rbUser;

        InnerOnClickListener innerOnClickListener = new InnerOnClickListener();
        for(int i=0;i<rbList.length;i++){
            rbList[i].setOnClickListener(innerOnClickListener);
        }
    }

    private class InnerOnClickListener implements View.OnClickListener{

        @Override
        public void onClick(View view) {
            for(int i=0;i<rbList.length;i++){
                if(rbList[i].isChecked()){
                    Toast.makeText(MainActivity.this,rbList[i].getText(),Toast.LENGTH_SHORT).show();
                }
            }
        }
    }
}

栗子2改进

public class MainActivity extends AppCompatActivity {
    private RadioGroup radioGroup;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        radioGroup = findViewById(R.id.rg);

        InnerOnCheckedChangeListener innerOnCheckedChangeListener = new InnerOnCheckedChangeListener();
        radioGroup.setOnCheckedChangeListener(innerOnCheckedChangeListener);
    }

    private class InnerOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener {

        @Override
        public void onCheckedChanged(RadioGroup radioGroup, int i) {
            //radioGroup表示哪一个RadioGroup，因为当前只有1个，所以这里的radioGroup和radioGroup等价
            //i表示被选中的RadioButton的id
            switch (i) {
                case R.id.rb_home:
                    Toast.makeText(MainActivity.this, "首页", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.rb_location:
                    Toast.makeText(MainActivity.this, "位置", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.rb_cart:
                    Toast.makeText(MainActivity.this, "购物车", Toast.LENGTH_SHORT).show();
                    break;
                case R.id.rb_user:
                    Toast.makeText(MainActivity.this, "我的", Toast.LENGTH_SHORT).show();
                    break;
            }
        }
    }
}

在改进的代码中，我们给 RadioGroup 添加了 RadioGroup.OnCheckedChangeListener 事件，每当 RadioGroup 中的 RadioButton 选中状态改变时会调用 onCheckedChanged() 方法，在这个方法中我们可以取到被选中的 RadioButton

RadioButton 图片大小设置

关键代码

		rbList = new RadioButton[4];
        rbList[0] = rbHome;
        rbList[1] = rbLocation;
        rbList[2] = rbCart;
        rbList[3] = rbUser;
        
		for (RadioButton rb : rbList) {
            Drawable[] drawables = rb.getCompoundDrawables();
            Rect r = new Rect(0, 0, dpToPx(this, 20),dpToPx(this, 20));
            drawables[1].setBounds(r);
            rb.setCompoundDrawables(null, drawables[1], null, null);
        }

需要改变大小，改变后边两个参数即可。除了具体数值，也可以用比例drawables[1].getMinimumWidth()*1/2

其中 dpToPx 是 dp 转 px 的方法：

public static int dpToPx(Context context, float dpValue) {
        final float scale = context.getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }