快捷導(dǎo)航

Android使用Tint為圖標(biāo)Icon動(dòng)態(tài)著色的操作方法

更新時(shí)間：2025年11月25日 08:39:22 作者：kerli

本文介紹了在Android中使用Tint為圖標(biāo)動(dòng)態(tài)著色的方法,可以通過xml或代碼設(shè)置Tint屬性,從而實(shí)現(xiàn)單張圖片的動(dòng)態(tài)著色,節(jié)省包體積,需要注意的是,同時(shí)設(shè)置ImageView與Drawable的Tint時(shí),要關(guān)注覆蓋問題,需要的朋友可以參考下

1. 背景

在 App 當(dāng)中，會(huì)有很多 形狀相同、顏色不同 的 Icon。

例如上圖這個(gè)場景，是篩選項(xiàng)的 icon，對(duì)應(yīng)的代碼可能為：

Xml 中初始化顏色為黑色

<ImageView
    ...
    android:src="@drawable/icon_filter_black" />

代碼中根據(jù)篩選狀態(tài)，切換不同顏色的 icon

// XXXFragment.kt

imageView.setImageDrawable(
    if (isSelect) {
        // 篩選后為橙色
        resources.getDrawable(R.drawable.icon_filter_orange);
    } else {
        // 未篩選為黑色
        resources.getDrawable(R.drawable.icon_filter_black);
    }
)

如果為每種顏色的 Icon 都保存一張圖片，會(huì)增加包體積。同時(shí)，會(huì)增加設(shè)計(jì)的工作負(fù)擔(dān)。有沒有什么辦法可以做到只需要一張圖片，然后動(dòng)態(tài)的著色呢？

2. 使用 Tint 動(dòng)態(tài)著色

2.1 使用方式

有以下幾種方式：

xml 中設(shè)置

<ImageView
    ...
    android:src="@drawable/icon_filter" 
    app:tint="@color/black"
    />

代碼中為 ImageView 設(shè)置

imageView.imageTintList = ColorStateList(...)

代碼中直接為 Drawable 設(shè)置

val drawable = resources.getDrawable(R.drawable.icon_filter)
drawable.setTint = Color.BLACK

imageView.setImageDrawable(drawable)

設(shè)置 tint 后，繪制時(shí)就會(huì)用 tint 的顏色渲染 icon。這樣，就算只有一張圖片，也可以渲染為多種顏色。很大程度的節(jié)省了包體積。

2.2 原理分析

ImageView 會(huì)將 Tint 傳給 Drawable

 // ImageView.java
public void setImageTintList(@Nullable ColorStateList tint) {
    mDrawableTintList = tint;
    mHasDrawableTint = true;
    
    applyImageTint();
}

private void applyImageTint() {
    if (mDrawable != null && (mHasDrawableTint || mHasDrawableBlendMode)) {
        mDrawable = mDrawable.mutate();
        
        if (mHasDrawableTint) {
            mDrawable.setTintList(mDrawableTintList); // 將 tint 傳遞給 Drawable！
        }
        // ...
    }
}

Drawable 在 收到 Tint 時(shí)會(huì)創(chuàng)建 ColorFilter，在 draw 時(shí)會(huì)用它做顏色過濾處理。這里拿 VectorDrawable 舉例：

public class VectorDrawable extends Drawable {
    private BlendModeColorFilter mBlendModeColorFilter ;
    
    @Override
    public void setTintList(ColorStateList tint) {
        // 使用 tint 創(chuàng)建 ColorFilter
        updateColorFilters(... , tint) ;
    }
    
    private void updateColorFilters(@Nullable BlendMode blendMode , ColorStateList tint) {
        // ...
    mBlendModeColorFilter = updateBlendModeFilter(mBlendModeColorFilter , tint , blendMode) ;
    }
    
    @Override
    public void draw(Canvas canvas) {
        // 繪制時(shí)，如果外部沒有設(shè)置 mColorFilter，則使用 mBlendModeColorFilter
        final ColorFilter colorFilter = (mColorFilter == null ? mBlendModeColorFilter : mColorFilter) ;
        // ...
    }
}

public abstract class Drawable {
    @Nullable 
    BlendModeColorFilter updateBlendModeFilter(@Nullable ColorStateList tint , ... ) {
        // ... 
        final int color = tint.getColorForState(getState() , Color.TRANSPARENT) ;
    
        if (blendFilter == null || blendFilter.getColor() != color
                || blendFilter.getMode() != blendMode) {
            return new BlendModeColorFilter(color , blendMode) ;
        }
        
        return blendFilter ;
    }
}

3. 注意事項(xiàng)

3.1 同時(shí)設(shè)置 ImageView 與 Drawable，Drawable 的設(shè)置會(huì)失效

例如，我們?cè)?xml 中設(shè)置 tint 為黑色

<ImageView
    ...
    android:src="@drawable/icon_filter"
    app:tint="@color/black"
    />

在代碼中，為 Drawable 設(shè)置為黃色

val drawable = resources.getDrawable(R.drawable.icon_filter)
drawable.setTint = Color.YELLOW

imageView.setImageDrawable(drawable)

此時(shí)，對(duì) Drawable 的設(shè)置是不生效的，因?yàn)榇藭r(shí) ImageView.setImageDrawable 會(huì)覆蓋掉 Drawable 自身的 tint

// ImageView.kt

public void setImageDrawable(@Nullable Drawable drawable) {
    updateDrawable(drawable) ;
}

private void updateDrawable(Drawable d) {
    applyImageTint() ;
}

private void applyImageTint() {
    if (mHasDrawableTint) {
        mDrawable.setTintList(mDrawableTintList) ;
    }
}

所以如果同時(shí)設(shè)置 ImageView 與 Drawable 的 tint，要關(guān)注覆蓋問題。

到此這篇關(guān)于Android使用Tint為圖標(biāo)Icon動(dòng)態(tài)著色的操作方法的文章就介紹到這了,更多相關(guān)Android Tint為Icon動(dòng)態(tài)著色內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: