Android 使用 LinearGradient 实现对角线颜

渐变色通常来凸显出主题色，比如我们经常剁手的淘宝。

从做到右的渐变.png

在 Android上实现渐变色，可以通过shape实现，还可以通过LinearGradient去实现.

shape直接在 xml文件中配置即可，如下：
详细使用参考 https://my.oschina.net/deepSprings/blog/1808945

<gradient
        android:angle="integer"
        android:centerX="integer"
        android:centerY="integer"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />

而LinearGradient则通过代码去设置了。

LinearGradient 渐变

上层效果是从上到下的渐变，下层是 45° 渐变的效果。

image.png

这里使用了第二个构造函数，渐变效果看不太明显。
可以使用第一个构造函数中的颜色数组来设置更多渐变颜色。

构造函数1：
LinearGradient(float x0, float y0, float x1, float y1,
               int[] colors, float[] positions, 
               android.graphics.Shader.TileMode tile) {}

构造函数2：
LinearGradient(float x0, float y0, float x1, float y1,
             int color0, int color1, 
            android.graphics.Shader.TileMode tile) { }

前四个参数对应的是如下的坐标

x

构造函数1：

• colors：为实现渐变效果的颜色的组合
• positions：为前面的颜色组合中的各颜色在渐变中占据的位置（比重），如果为空，则表示上述颜色的集合在渐变中均匀出现
• tile：渲染器平铺的模式，一共有三种

  • CLAMP
    边缘拉伸（效果图就是这个模式）

  • REPEAT
    在水平和垂直两个方向上重复，相邻图像没有间隙

  • MIRROR
    以镜像的方式在水平和垂直两个方向上重复，相邻图像有间隙

构造函数2：

• color0：渐变起始颜色
• color1：渐变终止颜色

例子中的代码如下：

public class LinearGradientView extends View {

    private int mDiraction = 0;
    private Paint paint;

    public LinearGradientView(Context context) {
        this(context,null);
    }

    public LinearGradientView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public LinearGradientView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        initView();
    }

    private void initView() {
        paint = new Paint();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 获取 View 的宽高
        int width = getWidth();
        int height = getHeight();

        int colorStart = getResources().getColor(R.color.colorPrimary);
        int colorEnd = getResources().getColor(R.color.colorAccent);


        LinearGradient backGradient = null;
        if (mDiraction == 0){
            backGradient = new LinearGradient(0, 0, 0, height, new int[]{colorStart ,colorEnd}, null, Shader.TileMode.CLAMP);
        }else {
            backGradient =new LinearGradient(0, 0, width, height, colorStart ,colorEnd, Shader.TileMode.CLAMP);
        }

        paint.setShader(backGradient);
        canvas.drawRect(0, 0, width, height, paint);

    }

    /**
     * 设置渐变方向
     * @param direction 0 表示 上下渐变，1 表示 45°渐变
     */
    public void setDirection(int direction){
        mDiraction = direction;
    }
}

本文完~，欢迎你留言和我讨论。