美文网首页
线性渐变颜色实现

线性渐变颜色实现

作者: Sunny君907 | 来源:发表于2019-01-15 16:47 被阅读0次
    1. 采用drawable xml 中的shape gradient属性
    <shape xml:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
            android:angle="0"
            android:endColor="#00000000"
            android:startColor="#0d000000"
            android:type="linear"
            android:useLevel="true"/>
    </shape>
    
    1. 多重渐变,自定义view,实现复杂需求的可以采用LinearGradent
     /** Create a shader that draws a linear gradient along a line.
            @param x0           The x-coordinate for the start of the gradient line
            @param y0           The y-coordinate for the start of the gradient line
            @param x1           The x-coordinate for the end of the gradient line
            @param y1           The y-coordinate for the end of the gradient line
            @param  colors      The colors to be distributed along the gradient line
            @param  positions   May be null. The relative positions [0..1] of
                                each corresponding color in the colors array. If this is null,
                                the the colors are distributed evenly along the gradient line.
            @param  tile        The Shader tiling mode
        */
        publicLinearGradient(float x0, float y0, float x1, float y1, int colors[], float positions[], TileMode tile) {
            }
    

    1.LinearGradient.TileMode.CLAMP
    参考:https://www.2cto.com/kf/201603/492626.html
    这种模式表示重复最后一种颜色直到该View结束的地方,如果我设置着色器开始的位置为(0,0),结束位置为(getMeasuredWidth(), 0)表示我的着色器要给整个View在水平方向上渲染不同的颜色,代码如下:

    @Override
    protectedvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = newPaint();
        paint.setColor(Color.GREEN);
        LinearGradient linearGradient = newLinearGradient(0, 0, getMeasuredWidth(), 0,new int[]{ Color.RED, Color.WHITE, Color.BLUE }, null, LinearGradient.TileMode.CLAMP);
        paint.setShader(linearGradient);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
    }
    

    2.LinearGradient.TileMode.REPEAT
    LinearGradient.TileMode.REPEAT表示着色器在水平或者垂直方向上对控件进行重复着色,类似于windows系统桌面背景中的“平铺”,那么接下来我们来看看着色器对这种模式的处理方式,假如我希望着色器开始渲染的位置为(0,0),结束渲染的位置为(getMeasuredWidth()/2, getMeasuredHeight()/2),但与之前不同的是这次的平铺方式变为LinearGradient.TileMode.REPEAT,我们来看看代码:

    @Override
    protectedvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = newPaint();
        paint.setColor(Color.GREEN);
        LinearGradient linearGradient = newLinearGradient(0, 0, getMeasuredWidth()/2, getMeasuredHeight()/2,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.REPEAT);
        paint.setShader(linearGradient);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), paint);
    }
    

    3.LinearGradient.TileMode.MIRROR
    LinearGradient.TileMode.MIRROR模式会在水平方向或者垂直方向上以镜像的方式进行渲染,这种渲染方式的一个特征就是具有翻转的效果,比如我希望我的着色器开始渲染的位置为(0,0),结束渲染的位置为(getMeasuredWidth()/2, 0),那么效果图是什么样子呢?我们先来看看代码:

    @Override
    protectedvoidonDraw(Canvas canvas) {
        super.onDraw(canvas);
        Paint paint = newPaint();
        paint.setColor(Color.GREEN);
        LinearGradient linearGradient = newLinearGradient(0, 0, getMeasuredWidth()/2, 0,new int[]{Color.RED, Color.WHITE, Color.BLUE}, null, LinearGradient.TileMode.MIRROR);
        paint.setShader(linearGradient);
        canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(),paint);
    }
    

    相关文章

      网友评论

          本文标题:线性渐变颜色实现

          本文链接:https://www.haomeiwen.com/subject/lfbydqtx.html