Android实现自由单选、复选按钮效果+样式美化（二）

背景

Android实现自由单选、复选按钮效果+样式美化已经实现了自由单选、复选效果，但是demo中选择按钮控件没有做到自动换行的自适应布局，本次使用FlexboxLayout来支持自适应布局。
效果如下：

思路

想要实现自适应布局，需要让按钮外部的控件支持内部元素动态排版，之前使用的LinearLayout不支持内部自动换行。实现此目标需要涉及到布局计算等知识，有两种方式来做：

1、自己写一个支持内部元素自适应布局的组件，元素达到最大宽度时，自动换行到下一行；
2、找一个现成的组件包来使用。

所幸的是google早已实现了FlexboxLayout，可以完美支持我们所要的功能。

自适应布局改造

1、引入第三方库
在app模块的build.gradle文件中添加依赖库：

dependencies {
    ...
    implementation 'com.google.android:flexbox:1.0.0'
    ...
}

将原来包裹CheckBox的LinearLayout修改为com.google.android.flexbox.FlexboxLayout即可。所有同类的Checkbox丢到一起就可以，显示时可以自动换行：

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="自适应单选显示" />
    
<com.google.android.flexbox.FlexboxLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:layout_marginTop="20dip"
    app:flexWrap="wrap">

    <CheckBox
        android:id="@+id/flex1"
        style="@style/select_flex_style"
        android:tag="f1"
        android:text="这个挺长的，不知道在哪" />

    <CheckBox
        android:id="@+id/flex2"
        style="@style/select_flex_style"
        android:tag="f2"
        android:text="这个也不短" />

    <CheckBox
        android:id="@+id/flex3"
        style="@style/select_flex_style"
        android:tag="f3"
        android:text="这个可能换行了" />

    <CheckBox
        android:id="@+id/flex4"
        style="@style/select_flex_style"
        android:tag="f4"
        android:text="其他不重要的" />

    <CheckBox
        android:id="@+id/flex5"
        style="@style/select_flex_style"
        android:tag="f5"
        android:text="其他不重要的" />

    <CheckBox
        android:id="@+id/flex6"
        style="@style/select_flex_style"
        android:tag="f6"
        android:text="这个在第几行就不清楚了" />

</com.google.android.flexbox.FlexboxLayout>

实现的效果和演示动画中的第三部分“自适应单选显示”一致。

源码下载

见：https://github.com/ahuyangdong/SelectCustom