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