重铸安卓荣光——复选框ButtonCheckBox

痛点：

公司打算做安卓软件，最近在研究安卓，打算先绘制样式

研究发现安卓并不像前端有那么多组件库，甚至有些基础的组件都需要自己实现，记录一下自己实现的组件

成品展示

一个复选框样式

选中时背景橙色，带有橙色钩子

未选中时背景白色，取消钩子

思路

因为这个复选框要在外边框的右下角，所以选择用RelativeLayout来包裹一个TextView和一个CheckBox

TextView用来显示文字，CheckBox用来显示右下角的复选框

图像准备

在正式开始写代码之前，需要先准备几个样式

外边框

选中状态

checkbox_backgroud_checked.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#30FFA500"/>
    <!-- 指定了形状轮廓的粗细与颜色 -->
    <stroke
        android:width="1dp"
        android:color="#FFA500" />
    <!-- 指定了形状四个圆角的半径 -->
    <corners android:radius="5dp" />
</shape>

未选中状态

checkbox_backgroud_uncheck.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <!-- 指定了形状轮廓的粗细与颜色 -->
    <stroke
        android:width="1dp"
        android:color="@color/viewfinder_text_color4" />
    <!-- 指定了形状四个圆角的半径 -->
    <corners android:radius="5dp" />
</shape>

复选框

复选框也需要指定选中和未选中的背景

选中状态

circle_checkbox_checked.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="15dp"
    android:height="15dp"
    android:tint="@color/orange"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="@android:color/white"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM10,17l-5,-5 1.41,-1.41L10,14.17l7.59,-7.59L19,8l-9,9z" />
</vector>

未选中状态

circle_checkbox_uncheck.xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="15dp"
    android:height="15dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!-- 灰色边框 -->
    <path
        android:fillColor="@android:color/transparent"
        android:strokeColor="#30000000"
        android:strokeWidth="1"
        android:pathData="M12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2z" />
</vector>

选择器

checkbox_circle_selector.xml

选择器时用来设置复选框选中和未选中的样式

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

实现

首先来配置属性，在res/values/attrs.xml中添加配置

enable：用来表示选中状态

text：用来展示文字

    <declare-styleable name="ButtonCheckBox">
        <attr name="enable" format="boolean" />
        <attr name="text" format="string" />
    </declare-styleable>

具体代码

ButtonCheckBox.java

public class ButtonCheckBox extends RelativeLayout {
    private boolean enable;
    private String value;

    public ButtonCheckBox(Context context) {
        super(context);
    }

    public ButtonCheckBox(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取初始化属性
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.ButtonCheckBox);
        enable = a.getBoolean(R.styleable.ButtonCheckBox_enable, false);
        value = a.getString(R.styleable.ButtonCheckBox_text);
        a.recycle();
        init();
    }

    public ButtonCheckBox(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public ButtonCheckBox(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public void init(){
        //自身
        setBackgroundResource(R.drawable.checkbox_backgroud_uncheck);

        //文字组件
        TextView valueView = new TextView(getContext());
        valueView.setText(value);
        valueView.setTextColor(Color.BLACK);
        RelativeLayout.LayoutParams valueViewLayoutParams =
                new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        valueViewLayoutParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        valueView.setLayoutParams(valueViewLayoutParams);

        //checkbox
        CheckBox checkBox = new CheckBox(getContext());
        checkBox.setButtonDrawable(R.drawable.checkbox_circle_selector_15);
        RelativeLayout.LayoutParams checkBoxLayoutParams =
                new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        checkBoxLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        checkBoxLayoutParams.addRule(RelativeLayout.ALIGN_PARENT_BOTTOM);
        checkBoxLayoutParams.setMargins(0,0,2,2);
        checkBox.setLayoutParams(checkBoxLayoutParams);

        //点击事件
        setOnClickListener(v -> checkBox.setChecked(!enable));

        //监听checkbox变化
        checkBox.setOnCheckedChangeListener((buttonView,isChecked) -> {
            enable = isChecked;
            if (isChecked) {
                //选中状态
                valueView.setTextColor(Color.parseColor("#FFA500"));
                setBackgroundResource(R.drawable.checkbox_backgroud_checked);
            }else {
                valueView.setTextColor(Color.BLACK);
                setBackgroundResource(R.drawable.checkbox_backgroud_uncheck);
            }
        });

        addView(valueView);
        addView(checkBox);
    }
}