海口建站平台广州品牌型网站建设

最近做项目涉及到一些UI相关的东东，虽然比较简单，但是也很有趣，写两篇简短的博客记录一下。

一."Selector + 两张图片"实现 AppCompatCheckBox

AppCompatCheckBox 是 androidx的一个widget：androidx.appcompat.widget.AppCompatCheckBox

1.通常用 "selector + 两张图片"就能实现AppCompatCheckBox的效果

• AppCompatCheckBox 的 android:button="@drawable/selector_name.xml"引用selector
• selector 的 android:state_checked="true"/"false" 分别引用CheckBox打开/关闭的两张背景图片

这个过程比较简单，大概列举下：

​两张原图：

img_switch_bg_point_off.png    /    img_switch_bg_point_on.png

                                  

AppCompatCheckBox：

<androidx.appcompat.widget.AppCompatCheckBoxandroid:id="@+id/check_box"android:layout_width="64dp"android:layout_height="40dp"android:button="@drawable/switch_checkbox_selector" />

switch_checkbox_selector.xml：

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

效果如下：

2."Selector +Layer-lists" 实现多图重合叠加的CheckBox

UI提了个需求，要求CheckBox在打开和关闭状态下，分别使用两张图重合叠加实现开关效果

也就是说，打开CheckBox是两张图重合叠加，关闭是另外两张图重合叠加

这个好办，Layer-lists出马

四张原图：

(1).CheckBox打开时原图：

 背景图：        按钮图： 

​(2).CheckBox关闭时原图：

 背景图：        按钮图：        

AppCompatCheckBox：

跟上一节是一样的

<androidx.appcompat.widget.AppCompatCheckBoxandroid:id="@+id/check_box"android:layout_width="64dp"android:layout_height="40dp"android:button="@drawable/switch_checkbox_selector" />

switch_checkbox_selector.xml：

这里就不是直接加载图片了，而是加载两个layer-list.xml

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

switch_checkbox_selector_on_layerlists.xml

加载打开状态下的背景图和按钮图

<?xml version="1.0" encoding="utf-8"?> 
<layer-list   xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/img_switch_on_bg" /> <item android:drawable="@mipmap/img_switch_on_icon" /> 
</layer-list>

switch_checkbox_selector_off_layerlists.xml

加载关闭状态下的背景图和按钮图

<?xml version="1.0" encoding="utf-8"?> 
<layer-list   xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@mipmap/img_switch_off_bg" /> <item android:drawable="@mipmap/img_switch_off_icon" /> 
</layer-list>

效果如下：