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>
