XSelector

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

前言

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

但是随着项目的开发进程，我们发现使用这种方式所定义的资源文件越来越多，尤其是项目组各开发人员在未沟通的情况下，可能对于相同的效果的背景资源在不知他人已经有定义过 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

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

feer921/XSelector