Android 自定义view中根据状态修改drawable图片

原文地址:Android 自定义view中根据状态修改drawable图片 - Stars-One的杂货小窝

本文涉及知识点:

• Android里的selector图片使用
• 底部导航栏的使用
• 自定义view的步骤了解

建议有以上基础有助于帮助你理解本篇文章....

起因,由于UI那边的实现,不是按照的Material Design风格设计的,设计的底部导航栏图标和文本在同一行,原本想用官方的BottomNavigation组件也没法使用,只好自己仿造地写个自定义组件

正常BottomNavigation组件,是读取menu文件来设置图标和文本从而实现数据

在自定义View中,如何根据状态去修改drawble图片?

说明

从menu菜单文件得知:通过icon属性设置一个drawble对象即可实现图标

如果你给的drawable对象为一个selector,那么在selector中正确声明了不同状态下的drawable,那么就能够实现图标在选中和未选中的图标变更,具体可以参考我之前的文章,Android BottomNavigation底部导航栏使用 - Stars-One的杂货小窝

这里xml里的selector,其实最终被Android里解析处理,得到一个StateListDrawable对象

PS selector可以在drawable或color中使用,如果在color中使用,得到的就是ColorStateList对象

仿照实现导航栏切换图标功能

前面的一些自定义view的步骤在此略过,主要讲解核心的东西

我们需要自定义view去读取menu文件里的数据,得到icon的drawble文件,并根据不同状态去取这个drawable里的图片,之后去更改我们的imageview即可

获取菜单文件icon内容:

val menuRes = R.menu.test_menu

val popupMenu = PopupMenu(context, View(context))
popupMenu.inflate(menuRes)
val menu = popupMenu.menu

//得到menu后,使用此对象获取icon或label等属性
val icon =  menu.children.first().icon

获取不同状态的drawable:

先说下思路,我们view中有一个状态位标明当前是哪个item选择,当item为选择的时候,我们让item的图标展示已选中状态的drawable,反之则相反

//view中的一个状态表示
val viewIsCheck = false

if (icon is StateListDrawable) {
    val drawable = if(viewIsCheck){
        getDrawable(icon, android.R.attr.state_checked)
    }else{
        //加个-号,则表示反过来的状态(即xml里的android:state_checked属性为false)
        val drawable = getDrawable(icon, -android.R.attr.state_checked)
    }
    myBottomNavItem.ivIcon.load(drawable)
}

fun getDrawable(icon: StateListDrawable, flag: Int): Drawable {
    return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        val index = icon.findStateDrawableIndex(intArrayOf(flag))
        icon.getStateDrawable(index)!!
    } else {
        icon.state = IntArray(android.R.attr.state_checked)
        icon.current
    }
}

工具方法封装

这里稍微把上面的工具方法getDrawable写成了StateListDrawable的扩展方法,方便之后调用,已收录在我的库中stars-one/XAndroidUtil: 封装自己常用的一些Android的组件或工具

/**
 * 获取不同状态的drawable
 * @param flag 可选数值如下
- [android.R.attr.state_pressed]：按钮被按下时的状态。
- [android.R.attr.state_focused]：视图获取焦点时的状态。
- [android.R.attr.state_selected]：视图被选中时的状态。
- [android.R.attr.state_checked]：用于可选中的视图，表示视图处于选中状态。
- [android.R.attr.state_enabled]：视图可用时的状态。
- [android.R.attr.state_hovered]：视图被悬停时的状态。
- [android.R.attr.state_activated]：用于用作活动项目的视图。
 *
 */
fun StateListDrawable.getXStateDrawable(flag: Int): Drawable {
    val icon =this
    return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
        val index = icon.findStateDrawableIndex(intArrayOf(flag))
        icon.getStateDrawable(index)!!
    } else {
        icon.state = IntArray(android.R.attr.state_checked)
        icon.current
    }
}

其他补充

动态构造StateListDrawable对象

上面说到的都是从xml里读取,既然是一个类,那么我们也可以通过写代码的方式快速构造出一个StateListDrawable对象

// 创建 StateListDrawable
val stateListDrawable = StateListDrawable()

// 添加按下状态的 Drawable
val pressedDrawable = resources.getDrawable(R.drawable.pressed_bg, null)
stateListDrawable.addState(intArrayOf(android.R.attr.state_pressed), pressedDrawable)

// 添加默认状态的 Drawable
val defaultDrawable = resources.getDrawable(R.drawable.default_bg, null)
stateListDrawable.addState(intArrayOf(), defaultDrawable)

// 将 StateListDrawable 设置为 View 的背景
view.background = stateListDrawable

自定义view的reference类型

如果需要自定义view,可以在xml中设置一个menu菜单,可以声明一个属性为reference,如下代码:

 <declare-styleable name="SettingItem">
        <attr name="mymenu" format="reference"/>
</declare-styleable>

之后在代码里使用getResourceId方法可以读取属性数据:

val ta = context.obtainStyledAttributes(attrs, R.styleable.CustomView);
val menuResourceId = ta.getResourceId(R.styleable.CustomView_menuAttr, 0);
ta.recycle();

//得到菜单文件
if (menuResourceId != 0) {
    // 加载菜单资源
    val mMenu = PopupMenu(mContext, null).getMenu();
    val inflater = MenuInflater(mContext);
    inflater.inflate(menuResourceId, mMenu);

}

关于颜色ColorStateList

上文也提到,我们也可以在color的资源文件夹中使用selector,这里也补充下如何读取吧

在color资源文件夹定义文件custom_color_state_list.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#FF0000" android:state_pressed="true" />
    <item android:color="#00FF00" android:state_enabled="true" />
    <item android:color="#0000FF" />
</selector>

// 从资源文件中读取 ColorStateList 对象
val colorStateList = ContextCompat.getColorStateList(context, R.color.custom_color_state_list)

// 使用 ColorStateList 对象
textView.setTextColor(colorStateList)

封装的扩展方法,获取某个状态的color:

/**
 * 获取selector某个状态的color
 * - selector里定义`androird:state_pressed="true"`,即为`android.R.attr.state_pressed`
 * - selector里定义`androird:state_pressed="false"`,即为`-android.R.attr.state_pressed`
 *
 * @param flag 可选数值如下: 前面加个`-`,标示为状态为false
- [android.R.attr.state_pressed]：按钮被按下时的状态。
- [android.R.attr.state_focused]：视图获取焦点时的状态。
- [android.R.attr.state_selected]：视图被选中时的状态。
- [android.R.attr.state_checked]：用于可选中的视图，表示视图处于选中状态。
- [android.R.attr.state_enabled]：视图可用时的状态。
- [android.R.attr.state_hovered]：视图被悬停时的状态。
- [android.R.attr.state_activated]：用于用作活动项目的视图。
 *
 */
fun ColorStateList.getColorForState(@AttrRes flag: Int, @ColorInt defaultColor: Int): Int {
    val array = intArrayOf(flag)
    return getColorForState(array, defaultColor)
}

动态构造ColorStateList对象有两种方法:

• ColorStateList.valueOf()
• ColorStateList.createFromInt()

//第一种方法
val colors = intArrayOf(Color.RED, Color.GREEN, Color.BLUE)
val states = arrayOf(
    intArrayOf(android.R.attr.state_enabled),
    intArrayOf(android.R.attr.state_pressed),
    intArrayOf()
)

val colorStateList = ColorStateList(states, colors)

//第二种方法
val colors = intArrayOf(Color.RED, Color.GREEN, Color.BLUE)
val states = arrayOf(
    intArrayOf(android.R.attr.state_enabled),
    intArrayOf(android.R.attr.state_pressed),
    intArrayOf()
)

val defaultColor = Color.BLACK

var colorStateList = ColorStateList.createFromInt(states, colors)
colorStateList = colorStateList.withDefaultColor(defaultColor)

关于ColorStateListDrawable类型

这个类名和上面的有些类型,但其是一个drawable类型,xml文件位于drawable文件夹中

与StateListDrawable有些区别的是,drawable属性是使用的shape

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/shape_pressed" android:state_pressed="true" />
    <item android:drawable="@drawable/shape_enabled" android:state_enabled="true" />
    <item android:drawable="@drawable/shape_default" />
</selector>

shape_pressed内容:

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="#FF0000" />
    <corners android:radius="8dp" />
    <stroke
        android:width="2dp"
        android:color="#000000" />
</shape>

参考

• Get State Drawable from StateListDrawable for Custom View on Android API<29 - Stack Overflow