痛点:
公司打算做安卓软件,最近在研究安卓,打算先绘制样式
研究发现安卓并不像前端有那么多组件库,甚至有些基础的组件都需要自己实现,记录一下自己实现的组件
成品展示
一个复选框样式
选中时背景橙色,带有橙色钩子
未选中时背景白色,取消钩子
思路
因为这个复选框要在外边框的右下角,所以选择用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);
}
}