該篇文章主要分享介紹红符，如何使用一張資源圖片為 View 設(shè)置具有按下效果的 Background Drawable.
開源地址 OneDrawable
緣起
前段時間在開發(fā)項目新版本的過程中等孵，設(shè)計師出了一套項目的按下效果規(guī)范细溅。規(guī)范大概是這樣的浑塞。
對于一般的按鈕涌献，按鈕按下的效果只有兩種不同的實現(xiàn)榜田。
1牍白、按下后將前置背景圖片變暗脊凰，具體就是在正常狀態(tài)的 drawable 上面增加一層 20% 的黑色遮罩。
2茂腥、按下后降低前置背景資源透明度狸涌，具體就是在按下時改變正常狀態(tài)的 drawable 透明度為原來的 70% 。
很明顯最岗，這套規(guī)范會帶來以下好處帕胆。
- 設(shè)計師在出圖時只需要出一張圖，然后只需要告訴開發(fā)人員對應(yīng)的按下效果策略般渡，這樣可以減輕設(shè)計師的出圖負擔(dān)惶楼。
- 客戶端這邊也是右蹦，不需要因為實現(xiàn)一個按下效果而導(dǎo)入兩張資源圖片，這樣在減小包大小的同時也省去了客戶端開發(fā)人員去寫 selector 文件的麻煩歼捐。
實現(xiàn)方案
其實在之前的開發(fā)過程中，我也曾有過這樣的思考晨汹，想怎么可以根據(jù)一張圖來設(shè)置 View 的背景豹储，并讓他具有按下效果。一開始自然而然的想到了處理 View 的 touch 事件淘这，然后在按下時動態(tài)的根據(jù)正常背景設(shè)置按下后的背景資源剥扣。
但是后來覺得還是麻煩，而且一些時候一些 View 本身就需要處理 touch 事件铝穷，會造成沖突钠怯，所以當(dāng)時也就一了百了。
這次經(jīng)過一些搜索曙聂，思考晦炊，最終使用 StateListDrawable 達到了了目標效果。
StateListDrawable 有一個方法 addState 用于設(shè)置不同狀態(tài)下的 drawable 宁脊，包括按下断国、聚焦、不可用等等所有的狀態(tài)榆苞。
所以結(jié)合需求稳衬，這里只需要根據(jù)正常狀態(tài)下的 drawable 計算出按下狀態(tài)的 drawable，然后設(shè)置給按下按下狀態(tài)坐漏，就可以完美實現(xiàn)一套資源實現(xiàn) View 的按下狀態(tài)薄疚。
具體實現(xiàn)
方案已經(jīng)說清楚了，實現(xiàn)其實很簡單赊琳，代碼如下所示街夭。
private static Drawable getBackground(@NonNull Context context, @DrawableRes int res, @StatePressedMode.Mode int mode, @FloatRange(from = 0.0f, to = 1.0f) float alpha) {
Drawable normal = context.getResources().getDrawable(res);
Drawable pressed = context.getResources().getDrawable(res);
pressed.mutate();
//根據(jù)不同的按下要求設(shè)置不同的按下drawable
setPressedStateDrawable(mode, alpha, pressed);
final StateListDrawable stateListDrawable = new StateListDrawable();
//按下狀態(tài)
stateListDrawable.addState(new int[]{android.R.attr.state_pressed}, pressed);
//正常狀態(tài)
stateListDrawable.addState(new int[]{}, normal);
return stateListDrawable;
}
根據(jù)不同按下模式，處理按下的 drawable
private static void setPressedStateDrawable(@StatePressedMode.Mode int mode, @FloatRange(from = 0.0f, to = 1.0f) float alpha, @NonNull Drawable pressed) {
switch (mode) {
case StatePressedMode.ALPHA:
pressed.setAlpha(convertAlphaToInt(alpha));
break;
case StatePressedMode.DARK:
pressed.setColorFilter(alphaColor(Color.BLACK, convertAlphaToInt(alpha)), PorterDuff.Mode.SRC_ATOP);
break;
default:
pressed.setAlpha(convertAlphaToInt(alpha));
}
}
下圖為 demo 截圖
兼容問題
后來有網(wǎng)友反饋在 4.4 的機型下按下效果實效慨畸，后來發(fā)現(xiàn)是因為 Drawable 的 setColorFilter 方法在 4.4 的手機上失效莱坎，后來采用了 BitmapDrawable 的方式解決，具體可以看代碼實現(xiàn)寸士，這里貼出最重要的一段代碼檐什。
private static Drawable kitkatDrawable(Context context, @NonNull Drawable pressed, @PressedMode.Mode int mode, @FloatRange(from = 0.0f, to = 1.0f) float alpha) {
Bitmap bitmap = Bitmap.createBitmap(pressed.getIntrinsicWidth(), pressed.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
Canvas myCanvas = new Canvas(bitmap);
switch (mode) {
case PressedMode.ALPHA:
pressed.setAlpha(convertAlphaToInt(alpha));
break;
case PressedMode.DARK:
pressed.setColorFilter(alphaColor(Color.BLACK, convertAlphaToInt(alpha)), PorterDuff.Mode.SRC_ATOP);
break;
}
pressed.setBounds(0, 0, pressed.getIntrinsicWidth(), pressed.getIntrinsicHeight());
pressed.draw(myCanvas);
return new BitmapDrawable(context.getResources(), bitmap);
}
一些細節(jié)
在設(shè)置按下狀態(tài)的 drawable 時，
Drawable normal = context.getResources().getDrawable(res);
Drawable pressed = context.getResources().getDrawable(res);
這里的 normal 和 pressed 使用的資源 res 資源是同一個 id弱卡。但是由于 drawable 在加載過程中乃正，同一個 res 資源只要在內(nèi)存中加載過一次,這個 drawable 對應(yīng)的 state 就會保持一致，所以這里要對 pressed 進行可變設(shè)置婶博。
pressed.mutate();
關(guān)于 mutate 方法的官方說明
This is especially useful when you need to modify properties of drawables loaded from resources. By default, all drawables instances loaded from the same resource share a common state;
另外需要注意的是瓮具，由于 View 的按下效果只有在設(shè)置了 clickable 為 true 時才可以看到效果，所以當(dāng)你使用 OneDrawable 為 View 設(shè)置背景后卻發(fā)現(xiàn)沒有按下效果，你應(yīng)該知道怎么辦名党。
最后叹阔，如果你發(fā)現(xiàn)還有什么問題，歡迎在 issue 或者評論區(qū)指出传睹，也歡迎你把更好的方案 PR 上來耳幢。
