Android使用tint實作Drawable着色

• • 一、目标
  • 二、體驗位址
  • 三、功能設計
  • 四、實作方案
  • 五、組合起來
  • • 1. 定義Drawable資源
    • 2. 定義分組顔色
    • 3. 定義内置标簽
    • 4. TagViewHolder
  • 六、Finally

一、目标

二、體驗位址

神馬筆記最新版本下載下傳：【神馬筆記 版本1.6.0——标簽功能.apk】

三、功能設計

标簽包含2個資訊——顔色和名稱，通過顔色可以直覺地顯示标簽的含義。

• 内置8組不同的顔色

1. 透明
2. 紅
3. 橙
4. 黃
5. 綠
6. 藍
7. 紫
8. 灰

• 每組顔色包含4個顔色資訊

1. 圖示色——顯示為圓形，用表标簽圖示以及筆記的标簽辨別
2. 文本色——在“标簽”界面顯示，選中标簽時顯示的文本顔色
3. 背景色——在“标簽”界面顯示，選中标簽時顯示的背景顔色
4. 打勾色——在“标簽”界面顯示，選中标簽時右側打勾圖示的顔色

四、實作方案

如何顯示8組不通的顔色，以及每組顔色的4個顔色資訊？

Android提供了3種解決方案

1. 定義不通顔色資源——圖示、選中背景、選中打勾各8種資源
2. 使用ColorFilter
3. 使用Tint

第1種方案需要定義3 * 8 = 24個資源

第2、3種方案隻需要定義3種資源，然後通過設定ColorFilter或者Tint調整最終顯示的顔色

對比之下，ColorFilter及Tint方案勝出。

ColorFilter及Tint應該選擇哪種方案？Android推薦使用Tint，并且Tint在ColorFilter之後出現的技術。

是以，我們采用Tint方案來實作标簽顔色。

五、組合起來

1. 定義Drawable資源

• 圓形圖示

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="oval">
    <solid android:color="#ffffff"/>
    <size android:width="20dp" android:height="20dp"/>
</shape>
           

• 标簽背景

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/white"/>
    <corners android:radius="@dimen/tagRadius"/>
</shape>
           

• 選中打勾圖示

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="24.0" android:viewportWidth="24.0" android:width="24dp">
    <path android:fillColor="#FFFFFF" android:pathData="M9,16.17L4.83,12l-1.42,1.41L9,19 21,7l-1.41,-1.41z"/>
</vector>
           

2. 定義分組顔色

{
  "list":
  [
    {
      "id": "transparent",
      "icon": "#00000000",
      "color": "#474747",
      "check": "#606060",
      "bg": "#e0e0e0"
    },

    {
      "id": "red",
      "icon": "#fd3c2f",
      "color": "#663f3d",
      "check": "#ff3b30",
      "bg": "#ffd8d6"
    },

    {
      "id": "orange",
      "icon": "#fd9600",
      "color": "#665133",
      "check": "#ff9500",
      "bg": "#ffeacc"
    },

    {
      "id": "yellow",
      "icon": "#fdcd01",
      "color": "#675d34",
      "check": "#ffcc00",
      "bg": "#fff5cc"
    },

    {
      "id": "green",
      "icon": "#4bda65",
      "color": "#425e47",
      "check": "#4cd964",
      "bg": "#dbf7e0"
    },

    {
      "id": "blue",
      "icon": "#007bff",
      "color": "#334b66",
      "check": "#007aff",
      "bg": "#cce4ff"
    },

    {
      "id": "purple",
      "icon": "#5755d7",
      "color": "#45445e",
      "check": "#5856d6",
      "bg": "#deddf7"
    },

    {
      "id": "gray",
      "icon": "#8e8e95",
      "color": "#4f4f50",
      "check": "#8e8e93",
      "bg": "#e8e8e9"
    }

  ]
}
           

3. 定義内置标簽

{
  "list":
  [
    {
      "id": "red",
      "name": "紅色",
      "color": "red"
    },
    {
      "id": "orange",
      "name": "橙色",
      "color": "orange"
    },
    {
      "id": "yellow",
      "name": "黃色",
      "color": "yellow"
    },
    {
      "id": "green",
      "name": "綠色",
      "color": "green"
    },
    {
      "id": "blue",
      "name": "藍色",
      "color": "blue"
    },
    {
      "id": "purple",
      "name": "紫色",
      "color": "purple"
    },
    {
      "id": "gray",
      "name": "灰色",
      "color": "gray"
    },
    {
      "id": "work",
      "name": "工作",
      "color": "transparent"
    },
    {
      "id": "family",
      "name": "家庭",
      "color": "transparent"
    },
    {
      "id": "important",
      "name": "重要",
      "color": "transparent"
    }

  ]
}
           

4. TagViewHolder

通過Tint設定新顔色。

private static class TagViewHolder extends BridgeViewHolder<TagEntity> {

    public static final int LAYOUT_RES_ID = R.layout.layout_tag_list_item;

    static final int BG_COLOR = 0xfff5f5f5;

    TagFragment parent;

    CircleColorView iconView;
    TextView nameView;
    ImageView checkView;

    @Keep
    public TagViewHolder(TagFragment f, View itemView) {
        super(itemView);

        this.parent = f;
    }

    @Override
    public int getLayoutResourceId() {
        return LAYOUT_RES_ID;
    }

    @Override
    public void onViewCreated(@NonNull View view) {
        view.setOnClickListener(this::onItemClick);
        view.setClipToOutline(true);

        this.iconView = view.findViewById(R.id.iv_icon);
        this.nameView = view.findViewById(R.id.tv_name);
        this.checkView = view.findViewById(R.id.iv_check);
    }

    @Override
    public void onBind(TagEntity item, int position) {
        ColorEntity color = item.getColor();

        {
            iconView.setColor(color.getIcon());
            nameView.setText(item.getName());
        }

        RecordEntity recordEntity = parent.recordEntity;
        if (recordEntity != null) {
            boolean isCheck = (recordEntity.getTagList().indexOf(item.getId()) >= 0);

            int textColor = isCheck? color.getColor(): 0xff5c5c5c;
            nameView.setTextColor(textColor);

            int tint = isCheck? color.getBackground(): BG_COLOR;
            itemView.getBackground().setTint(tint);

            checkView.setVisibility(isCheck? View.VISIBLE: View.INVISIBLE);
            if (isCheck) {
                checkView.setImageTintList(ColorStateList.valueOf(color.getCheck()));
            }

        }
    }

    void onItemClick(View view) {
        parent.requestTag(getItem());
    }
}
           

六、Finally

～歸時休放燭花紅～待踏馬蹄清夜月