Android 简单View之四色渐变甚至多色渐变方案

传统三色渐变

如果我们单纯用Android自带的xml区做颜色渐变，最多只能做到三色渐变，比如下方的xml文件就最多做到三种颜色渐变的效果。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <gradient
        android:angle="90"
        android:endColor="@color/colorEnd"
        android:centerColor="@color/colorCenter"
        android:startColor="@color/colorStart" />
</shape>

四色实现效果

四色View代码

下面是上述效果的view代码，适用于四种颜色效果。为了适配更多情景，我添加了round设置，可以用来设置矩形圆边的效果。

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.RectF;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.view.View;
import com.dingtao.common.R;
import java.util.List;
import static com.luck.picture.lib.tools.ScreenUtils.dip2px;

/**
 * 渐变色控件，可设置四色位置
 */
public class GradualColor extends View {
    private int colorStart;
    private int colorEnd;
    private int colorAfterStart;
    private int colorBeforeEnd;
    private float round;
    private RectF mBackGroundRect;
    private LinearGradient backGradient;
    //默认画笔
    private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
    private Paint mPaintText = new Paint();
    List<Integer> colorlist;

    public GradualColor(Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取自定义属性（可先设置默认四种颜色）
        colorStart = Color.parseColor("#FFDDBB");
        colorAfterStart = Color.parseColor("#FFC0CD");
        colorBeforeEnd = Color.parseColor("#B5BBFF");
        colorEnd = Color.parseColor("#AADCFF");
        //也可通过attr进行xml文件内的自定义设置
        if (attrs != null) {
            TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyGradient);
            colorStart = typedArray.getColor(R.styleable.MyGradient_GradientcolorStart, colorStart);
            colorEnd = typedArray.getColor(R.styleable.MyGradient_GradientcolorEnd, colorEnd);
            colorAfterStart = typedArray.getColor(R.styleable.MyGradient_GradientcolorafterStart, colorAfterStart);
            colorBeforeEnd = typedArray.getColor(R.styleable.MyGradient_GradientcolorbeforeEnd, colorBeforeEnd);
            round = typedArray.getDimension(R.styleable.MyGradient_Gradientround, dip2px(context, 10));
        }
        //设置抗锯齿
        mPaint.setAntiAlias(true);
        //设置防抖动
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.FILL);
        mPaintText.setAntiAlias(true);
        mPaintText.setDither(true);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBackGroundRect = new RectF(0, 0, w, h);
        backGradient = new LinearGradient(0, 0, w, 0, new int[]{colorStart, colorAfterStart, colorBeforeEnd, colorEnd}, null, Shader.TileMode.CLAMP);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setShader(backGradient);
        //绘制背景 圆角矩形
        if (mBackGroundRect != null) {
            canvas.drawRoundRect(mBackGroundRect, round, round, mPaint);
        }
    }
}

在相应的arrts的xml文件中添加下面的属性映射

   <!--自定义控件属性-->
    <declare-styleable name="MyGradient">
        <attr name="GradientcolorStart" format="reference" />
        <attr name="GradientcolorEnd" format="reference" />
        <attr name="GradientcolorafterStart" format="reference" />
        <attr name="GradientcolorbeforeEnd" format="reference" />
        <attr name="Gradientround" format="dimension" />
    </declare-styleable>

简单使用

下面是在相对布局（relativeLayout）下的一个使用，直接在布局文件中添加即可。

  <com.dingtao.common.util.view.GradualColor
            android:id="@+id/gradualcolor"
            android:layout_width="100dp"
        	android:layout_height="40dp"
        	android:layout_centerHorizontal="true"
        	android:layout_marginTop="50dp"
            app:Gradientround="80dp"/>

呈现效果如下：

多色效果和方向修改关键

实现四色效果的原理基于LinearGradient进行颜色数组的传入，渐变的方向也从原来的横竖效果改为由坐标点位来进行方向确认，因此呈现出来的效果也更加自主化和人性化。所以无论你是想实现多色还是其他效果都可以通过改变传入参数来实现。

public LinearGradient(
float x0, //(x0,y0)：渐变起始点坐标
float y0, 
float x1, 
float y1, //(x1,y1): 渐变结束点坐标
@NonNull @ColorInt int colors[], //颜色渐变数组
@Nullable float positions[], 	//位置数组，position的取值范围[0,1],作用是指定某个位置的颜色值，如果传null，渐变就线性变化。
@NonNull TileMode tile) ；		//用于指定控件区域大于指定的渐变区域时，空白区域的颜色填充方法。
//-CLAMP边缘拉伸，为被shader覆盖区域，使用shader边界颜色进行填充
//-REPEAT 在水平和垂直两个方向上重复，相邻图像没有间隙
//-MIRROR以镜像的方式在水平和垂直两个方向上重复，相邻图像有间隙

比如调整该行参数如下（其他代码未变）：

backGradient = new LinearGradient(0, 0, w,h, new int[]{colorStart, colorAfterStart, colorBeforeEnd, colorEnd,Color.parseColor("#FBCAEA"),Color.parseColor("#FFC501")}, null, Shader.TileMode.CLAMP);

呈现出来的多色和方向效果如下

总结

如果这篇文章给你提供了帮助，那就是老九最大的收获，希望各位还能够点个赞支持下哈哈！
本文为我个人原创，如果需要转发请留言联系。