Android 自定义ImageView线型渐变色渲染图片

转载请注明出处:https://blog.youkuaiyun.com/htwhtw123/article/details/80787231

是一个尝试，结果实现了。用渐变色渲染图片资源，使图片变成水平线型渐变色的。先放效果，上面是指定颜色渲染;下面是ImageView加载图片。

下面是图片的资源,就是后面代码的资源文件(android.png)

实现的思路是在自定义ImageView中获取加载图片的 bitmap，从左到右颜色在两个指定值间线型渐变，在onDraw()中把bitmap画出来。

自定义View MyImageView

package com.example.test.bitmap;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.widget.ImageView;

import com.example.test.R;

/**
 * Created by HeTingwei on 2018/6/23.
 */

public class MyImageView extends ImageView {


    private int height;
    private int width;
    private int drawableResource;
    private int startColor;
    private int endColor;
    private Context context;

    public MyImageView(Context context) {
        super(context);
        this.context = context;
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        this.context = context;
        initDrawable(attrs);
    }

    public MyImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        this.context = context;

        initDrawable(attrs);
    }


    private void initDrawable(AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyImageView);
        drawableResource = typedArray.getResourceId(R.styleable.MyImageView_my_drawable, -1);
        startColor = typedArray.getColor(R.styleable.MyImageView_start_color, ContextCompat
                .getColor(context, android.R.color.black));
        endColor = typedArray.getColor(R.styleable.MyImageView_end_color, ContextCompat.getColor
                (context, android.R.color.white));
        typedArray.recycle();
    }


    @Override
    public void draw(Canvas canvas) {
        super.draw(canvas);
        Bitmap bitmap = BitmapFactory.decodeResource(context.getResources(), drawableResource);
        Paint paint = new Paint();
        Rect rect = new Rect();
        rect.set(0, 0, getWidth(), getHeight());
        canvas.drawBitmap(changeColor(bitmap,startColor, 
        endColor), rect, rect, paint);
    }
//bitmap是图片的bitmap对象，startColor是左侧颜色，endColor是右侧颜色，
//左到右线型渐变
    private Bitmap changeColor(Bitmap bitmap,int startColor, int endColor) {

        int width = bitmap.getWidth();
        int height = bitmap.getHeight();
        int bitmapArray[] = new int[width * height];
        int count = 0;
        int redB = Color.red(endColor);
        int greenB = Color.green(endColor);
        int blueB = Color.blue(endColor);
        int redW = Color.red(startColor);
        int greenW = Color.green(startColor);
        int blueW = Color.blue(startColor);
        int red, green, blue;
        for (int j = 0; j < height; j++) {
            for (int i = 0; i < width; i++) {
                green = (int) (greenW * (1 - (float) i / width)
                 + greenB * (float) i / width);
+ blueB * (float) i / width);
                red = (int) (redW * (1 - (float) i / width) 
                + redB * (float) i / width);
                bitmapArray[count++] = Color.argb(Color.alpha(bitmap.
                getPixel(i, j)), red, green,blue);
            }
        }
        bitmap.recycle();
        return Bitmap.createBitmap(bitmapArray, width, height, 
        Bitmap.Config.ARGB_4444);
    }

    //下面代码增加该类对象可操作
    public int getDrawableResource() {
        return drawableResource;
    }

    public void setDrawableResource(int drawableResource) {
        this.drawableResource = drawableResource;
        invalidate();
    }

    public int getStartColor() {
        return startColor;
    }

    public void setStartColor(int startColor) {
        this.startColor = startColor;
        invalidate();
    }

    public int getEndColor() {
        return endColor;
    }

    public void setEndColor(int endColor) {
        this.endColor = endColor;
        invalidate();
    }
}

在values文件夹下新建attrs.xml，设置MyImageView的属性，让这些属性可以在layout.xml中进行设置。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MyImageView">
        <attr name="my_drawable" format="reference"></attr>
        <attr name="start_color" format="color"></attr>
        <attr name="end_color" format="color"></attr>
    </declare-styleable>
</resources>

新建BitmapActivity用来测试。

package com.example.test.bitmap;

import android.os.Bundle;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;

import com.example.test.R;

public class BitmapActivity extends AppCompatActivity {

    private MyImageView mImg;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bitmap);
        mImg =  findViewById(R.id.img);
 //加下面一句会覆盖layout中对endColor的属性设置
      //  mImg.setEndColor(ContextCompat.getColor(this,
      android.R.color.white));
    }



}

布局文件：activity_bitmap.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <com.example.test.bitmap.MyImageView
        android:layout_centerInParent="true"
        android:id="@+id/img"
        app:my_drawable="@drawable/android"
        app:end_color="@android:color/holo_red_dark"
        app:start_color="@android:color/holo_blue_bright"
        android:layout_width="200dp"
        android:layout_height="200dp"/>

    <ImageView
        android:src="@drawable/android"
        android:layout_width="200dp"
        android:layout_height="200dp"/>

</LinearLayout>