Android中如何为ImageView动态设置渐变色着色？

这个问题我之前做项目的时候刚好遇到过——setColorFilter()确实只支持传入单一颜色，要实现类似的渐变叠加效果，得根据你需要兼容的Android版本来选择不同的方案：

方案一：API 26+ 直接使用ShaderColorFilter（推荐） #

从Android 8.0（API 26）开始，系统提供了ShaderColorFilter，可以直接把渐变Shader作为滤镜使用，完美替代原来的纯色滤镜逻辑：

// 确保在ImageView布局完成后执行（避免getWidth()返回0）
imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        // 移除监听，防止重复触发
        imageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        
        // 创建线性渐变（可替换为RadialGradient/SweepGradient实现不同渐变效果）
        LinearGradient gradient = new LinearGradient(
            0, 0, imageView.getWidth(), 0, // 渐变方向：从左到右
            ContextCompat.getColor(context, R.color.gradient_start),
            ContextCompat.getColor(context, R.color.gradient_end),
            Shader.TileMode.CLAMP
        );
        
        // 创建渐变滤镜
        ShaderColorFilter gradientFilter = new ShaderColorFilter(gradient);
        
        // 应用滤镜，保持你原来使用的MULTIPLY混合模式
        imageView.setColorFilter(gradientFilter, PorterDuff.Mode.MULTIPLY);
    }
});

如果需要径向渐变（从中心向外扩散），只需要替换LinearGradient为RadialGradient：

RadialGradient radialGradient = new RadialGradient(
    imageView.getWidth()/2f, imageView.getHeight()/2f, // 渐变中心
    Math.max(imageView.getWidth(), imageView.getHeight())/2f, // 渐变半径
    ContextCompat.getColor(context, R.color.gradient_start),
    ContextCompat.getColor(context, R.color.gradient_end),
    Shader.TileMode.CLAMP
);

方案二：兼容API 26以下版本（自定义Drawable混合） #

如果需要兼容更低版本的系统，我们可以自定义一个Drawable，先绘制原图再叠加渐变层，模拟setColorFilter的混合效果：

第一步：创建自定义GradientFilterDrawable #

public class GradientFilterDrawable extends Drawable {
    private final Drawable originalDrawable;
    private final Paint gradientPaint;

    public GradientFilterDrawable(Drawable original, int startColor, int endColor, int drawableWidth) {
        this.originalDrawable = original.mutate(); // 复制原始Drawable避免影响其他引用
        gradientPaint = new Paint();
        
        // 创建线性渐变Shader
        LinearGradient gradient = new LinearGradient(
            0, 0, drawableWidth, 0,
            startColor, endColor,
            Shader.TileMode.CLAMP
        );
        gradientPaint.setShader(gradient);
        // 设置和你原来一致的MULTIPLY混合模式
        gradientPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.MULTIPLY));
    }

    @Override
    public void draw(@NonNull Canvas canvas) {
        // 先绘制原始图片
        originalDrawable.draw(canvas);
        // 再绘制渐变层，通过混合模式叠加
        canvas.drawRect(getBounds(), gradientPaint);
    }

    @Override
    public void setAlpha(int alpha) {
        originalDrawable.setAlpha(alpha);
        gradientPaint.setAlpha(alpha);
    }

    @Override
    public void setColorFilter(@Nullable ColorFilter colorFilter) {
        originalDrawable.setColorFilter(colorFilter);
    }

    @Override
    public int getOpacity() {
        return originalDrawable.getOpacity();
    }

    @Override
    protected void onBoundsChange(Rect bounds) {
        super.onBoundsChange(bounds);
        originalDrawable.setBounds(bounds); // 同步原始Drawable的边界
    }
}

第二步：使用自定义Drawable #

// 获取ImageView的原始Drawable（如果是网络图片，要在加载完成后执行）
Drawable originalDrawable = imageView.getDrawable();
if (originalDrawable == null) return;

imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
    @Override
    public void onGlobalLayout() {
        imageView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
        
        int startColor = ContextCompat.getColor(context, R.color.gradient_start);
        int endColor = ContextCompat.getColor(context, R.color.gradient_end);
        
        GradientFilterDrawable gradientDrawable = new GradientFilterDrawable(
            originalDrawable, startColor, endColor, imageView.getWidth()
        );
        imageView.setImageDrawable(gradientDrawable);
    }
});

注意事项 #

• 如果你的图片是通过网络加载的（比如Glide、Picasso），一定要在图片加载完成后再执行滤镜设置逻辑，否则getDrawable()会返回null。以Glide为例，可以在onResourceReady()回调中处理。
• 渐变的方向、颜色、TileMode都可以根据需求调整，灵活替换不同的Gradient实现即可。

内容的提问来源于stack exchange，提问作者RedBounce