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

Bertha ·

更新时间:2024-09-20

· 760 次阅读

说明

动态构造StateListDrawable对象

本文涉及知识点:

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>

到此这篇关于Android 自定义view中根据状态修改drawable图片的文章就介绍到这了,更多相关Android 自定义view 修改drawable图片内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

view 自定义view Android

1024 个赞