原文地址: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>