XSelector

给不同的View设置不同状态下背景等资源,减少 Drawable 文件夹下　xx_shape.xml ,xx_selector.xml 文件定义

前言

我们在做 Android　项目时，UI设计师经常会给界面上的相关控件元素设计各种的颜色、背景、点击效果，通常我们会使用　Android 的 shape/selector xml来定义这些各种状态下的资源，如下图所示：

手动创建shape资源文件

但是随着项目的开发进程，我们发现使用这种方式所定义的资源文件越来越多，尤其是项目组各开发人员在未沟通的情况下，可能对于相同的效果的背景资源在不知他人已经有定义过　xx.shape.xml/xx.selector.xml　的情况下，又会重复新建定义资源文件!!!

几个痛点：

• 背景(shape),各状态效果(selector) 的资源文件随着项目的进程越来越多
• 每当设计那边更改一个UI元素的颜色、背景、如果直接改资源文件的情况下有可能影响到其他也应用了的控件，如果不改只能又新建资源文件
• UI设计所设计的效果大体相同的情况下，如果光一个属性的不同(如：圆角1,2,3,4,5,n...像素)，则使用资源文件的情况下即要定义对应个数的资源文件，相当繁琐
• 所建的　xx.shape.xml / xx.selector.xml 不方便命名(程序员脑壳疼)

总之一句话，使用资源文件( xx.shape.xml/xx.selector.xml )的方案会造成　drawable资源文件夹 下文件越来越多，定义繁琐、杂乱无章，重复、命名困难、查找费劲,哎...

多到密集恐怖：

冰山一角

解决：程序员面对UI设计需求的无限变更和差异化，除了沟通协定设计遵循多使用、设计主体效果，以避免太多差异化，但五彩斑斓的黑总是产品和设计师所孜孜追求的效果，因而使用代码/程序　的方式动态变更来应对仿佛是最优解，以变制变。

本框架原理即为使用代码的方式　高度抽象 解构　我们在定义　xx_shape.xml / xx_selector.xml 的过程，比如框架中　AbsSelector 类即为　xx_selector.xml 定义文件的基础抽象　解构

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >　//对应　AbsSelector
    <item android:state_checked="true"　
        android:state_enabled="true"
        android:state_selected="true"
        android:state_pressed="true"
        android:state_focused="false"
        android:drawable="@color/colorPrimary" />

    <item android:state_pressed="true">
        <shape android:shape="rectangle" >

        </shape>
    </item>
    <!--  最后一个表示 默认状态下的 值   -->
    <item android:drawable="@color/colorAccent" />
</selector>

上面的具体对应　实现类：ShapeSelector。

再比如框架中　ShapeItem 类即为　xx_shape.xml 定义文件的具体解构抽象：

<?xml version="1.0" encoding="utf-8"?>
<!--
 android:shape="rectangle"
 android:shape="line"
 android:shape="oval"
 android:shape="ring"
-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

<!--    <solid android:color="#fff"-->
<!--        />-->

    <stroke
        android:color="#f00"
        android:width="1dp"
        android:dashWidth="1dp"
        android:dashGap="2dp"
        />

<!--  有 层级先后  -->
    <gradient
        android:type="radial"
        android:centerColor="#999"
        android:endColor="#f00"
        android:startColor="#800"
        android:gradientRadius="80dp"
        />

    <padding android:left="1dp"
        android:top="2dp"
        android:right="5dp"
        android:bottom="8dp"
        />

    <corners android:radius="9dp"
        android:topLeftRadius="9dp"
        android:topRightRadius="9dp"
        android:bottomLeftRadius="9dp"
        android:bottomRightRadius="9dp"
        />

    <size android:width="119dp"
        android:height="100dp"
        />

</shape>

只不过框架使用精巧的封装让程序员在使用时更丝滑顺手,短短数行代码即完成等效资源文件定义效果。

依赖

implementation 'io.github.feer921:XSelector:1.2' //注意该版本需要项目工程使用的　Kotlin 版本在　1.8.x及以上

如果项目工程的所使用的　Kotlin　版本在　1.8 以下，则可以依赖下面的版本

implementation 'io.github.feer921:XSelector:1.2-kotlin16'

效果图

应用效果

效果图所对应的示例代码：

             //颜色　Selector
        mViewBinding.tv1.isClickable = true
        XSelector.colorSelector()
            .stateDef(Color.BLACK)
            .statePressed(Color.RED)
            .into(mViewBinding.tv1)

        //背景
        XSelector.colorSelector()
            .stateDef(Color.CYAN)
            .statePressed(Color.RED)
            .into(mViewBinding.tv2)
            .withShapeItem()
            .solidColor(Color.BLUE)
//            .corners(20f)
            .into(mViewBinding.tv2)

        //各种状态
        mViewBinding.tv3.isClickable = true
        XSelector.shapeSelector()
            .stateDef {
                solidColor(Color.YELLOW)
                corners(30f)
                stroke(Color.BLACK,1)

            }
            .statePressed {
                solidColor(Color.GREEN)
                corners(30f)
            }
            .into(mViewBinding.tv3)

        //圆形
        XSelector.shapeItem()
            .shape(GradientDrawable.OVAL)
            .solidColor(Color.GRAY)
            .into(mViewBinding.tv4)

用法：

给TextView 设置文字颜色相关的状态切换

• 对应于　TextView　的　setTextColor() 方法

val tvName: TextView
val tvName2: TextView
XSelector.colorSelector() //选择颜色相关的　Selector
            .stateDef(Color.YELLOW) //配置默认的文本颜色
            .statePressed(Color.RED)//配置点击　TextView　时的颜色为红包
            .stateDisabled(Color.GRAY)//配置　TextView　不使能时的颜色为灰色
                        .into(tvName)　//配置进　TextView　控件
                        .into(tvName2)　//可以一直配置给其他的　TextView，达到复用

给EditText 设置提示性文字的颜色相关的状态切换

• 对应于　TextView 中的　setHintTextColor()方法

val tvName: EditText
val tvName2: EditText
XSelector.colorSelector() //选择颜色相关的　Selector
            .stateDef(Color.YELLOW) //配置默认的文本颜色
            .statePressed(Color.RED)//配置点击　TextView　时的颜色为红包
            .stateDisabled(Color.GRAY)//配置　TextView　不使能时的颜色为灰色
                        .isColor4HintText(true) //此种场景下，主要是加上这一行配置一下当前的文字颜色是配置给　提示文字的
                        .into(tvName)　//配置进　TextView　控件
                        .into(tvName2)　//可以一直配置给其他的　TextView，达到复用

给 View 设置背景状态切换

• 对应于　View　的 setBackground(Drawable background) ||　setBackgroundDrawable(Drawable background) 方法

val tvName: TextView
val view1: View
val view2: View
XSelector.drawableSelector()
            .statePressed(Color.GREEN) //配置点击时背景为　颜色
            .stateDef(Color.GRAY)　//配置默认的背景　为灰色
            .into(tvName)　// 配置进　控件
                        .into(view1) //也可以一直配置给其他的　View
                        .statePressed(null) //还可以继续改变某个状态值后
                        .into(view2,true) //再配置给其他的　View,这里　true参数表示　需要重新构建后再配置给　view2控件

给　View　设置只需要默认状态

ShapeItem()//XSelector.shapeItem().
            .solidColor(Color.RED)//默认填充颜色
            .corners(20f) //下面其他状态下：复用了 圆角属性
//            .corners(null,20f,20f,20f,5f)
//            .gradientRadial(Color.GRAY,Color.CYAN,Color.RED,160f)
            .stroke(Color.BLACK,8,3f,3f)//边框
            .attachSelector(DrawableSelector())//依附一下　Selector类型，则可以构建出各状态下的资源
            .asStateDefOfSelector()//上面的属性参数构建Selector的默认状态资源
            .solidColor(Color.YELLOW)//变更了填充颜色
            .stroke(Color.BLUE,9,3f,3f)
            .asStatePressedOfSelector()//上面的属性构建Selector的点击状态下的资源
            .into(login)//设置给控件

TODO

1. 增加自定义属性，方便在编写布局　xml　中控件(但可能需要使用本框架提供的继承自系统原生控件的控件)时即可时时预览效果