【Android UI】Paint Gradient 漸變渲染 ① ( LinearGradient 線性漸變渲染 | 設定渲染方向 | 設定渲染顔色 | 設定渲染模式

文章目錄

一、LinearGradient 線性漸變渲染

1、設定 2 個顔色的漸變
3、設定多個顔色的漸變

二、LinearGradient 線性漸變渲染重要參數分析

1、正常渲染
2、設定多個漸變顔色渲染
3、設定渲染方向
4、設定 Shader.TileMode.MIRROR 渲染模式
5、設定 Shader.TileMode.REPEAT 渲染模式

三、代碼示例

1、正常渲染
2、設定多個漸變顔色渲染
3、設定渲染方向
4、設定 Shader.TileMode.MIRROR 渲染模式
5、設定 Shader.TileMode.REPEAT 渲染模式

四、效果展示

一、LinearGradient 線性漸變渲染

Paint 的 LinearGradient 是線性漸變渲染；

LinearGradient 文檔位址 : https://developer.android.google.cn/reference/android/graphics/LinearGradient

LinearGradient 線性漸變渲染使用時 , 直接使用構造函數建立即可 ;

LinearGradient 提供了個構造函數 , 分為大類 , 分别是設定個顔色漸變的構造函數 , 和設定多個顔色漸變的構造函數 , 後者可以設定個以上的顔色值 ;

1、設定 2 個顔色的漸變

設定個顔色漸變的構造函數原型如下 : 二者的差別是顔色值可以使用 int , 也可以使用 long 進行表示 ;

/**
     * 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 color0   The sRGB color at the start of the gradient line.
     * @param color1   The sRGB color at the end of the gradient line.
     * @param tile     The Shader tiling mode
     */
    public LinearGradient(float x0, float y0, float x1, float y1,
            @ColorInt int color0, @ColorInt int color1,
            @NonNull TileMode tile) {
        this(x0, y0, x1, y1, Color.pack(color0), Color.pack(color1), tile);
    }

    /**
     * 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 color0   The color at the start of the gradient line.
     * @param color1   The color at the end of the gradient line.
     * @param tile     The Shader tiling mode
     *
     * @throws IllegalArgumentException if the colors do
     *      not share the same {@link ColorSpace} or do not use a valid one.
     */
    public LinearGradient(float x0, float y0, float x1, float y1,
            @ColorLong long color0, @ColorLong long color1,
            @NonNull TileMode tile) {
        this(x0, y0, x1, y1, new long[] {color0, color1}, null, tile);
    }

3、設定多個顔色的漸變

設定多個顔色漸變的構造函數原型如下 : 二者的差別是顔色值可以使用 int , 也可以使用 long 進行表示 ;

/**
     * 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 sRGB 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
     */
    public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int[] colors,
            @Nullable float[] positions, @NonNull TileMode tile) {
        this(x0, y0, x1, y1, convertColors(colors), positions, tile,
                ColorSpace.get(ColorSpace.Named.SRGB));
    }

    /**
     * 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
     *
     * @throws IllegalArgumentException if there are less than two colors, the colors do
     *      not share the same {@link ColorSpace} or do not use a valid one, or {@code positions}
     *      is not {@code null} and has a different length from {@code colors}.
     */
    public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorLong long[] colors,
            @Nullable float[] positions, @NonNull TileMode tile) {
        this(x0, y0, x1, y1, colors.clone(), positions, tile, detectColorSpace(colors));
    }

二、LinearGradient 線性漸變渲染重要參數分析

1、正常渲染

正常的線性渲染 :

private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0,
                Color.GREEN, Color.RED, Shader.TileMode.CLAMP));
    }

效果圖 :

【Android UI】Paint Gradient 漸變渲染 ① ( LinearGradient 線性漸變渲染 | 設定渲染方向 | 設定渲染顔色 | 設定渲染模式 | MIRROR )

2、設定多個漸變顔色渲染

設定多個漸變顔色渲染 :

private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.CLAMP));
    }

效果圖 :

3、設定渲染方向

設定渲染方向 :

private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right, mRectF.bottom,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.CLAMP));
    }

效果圖 :

4、設定 Shader.TileMode.MIRROR 渲染模式

設定 Shader.TileMode.MIRROR 渲染模式 :

private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.MIRROR));
    }

效果圖 :

5、設定 Shader.TileMode.REPEAT 渲染模式

設定 Shader.TileMode.REPEAT 渲染模式 :

private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.REPEAT));
    }

效果圖 :

三、代碼示例

1、正常渲染

package kim.hsl.paintgradient.linear;

import android.content.Context;
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 androidx.annotation.Nullable;

public class LinearGradientView extends View {

    /**
     * 畫筆工具
     * 線性漸變渲染 需要設定給該 畫筆工具
     */
    private Paint mPaint;

    /**
     * 使用線性漸變繪制的區域
     */
    private RectF mRectF;

    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);
        initPaint();
    }

    /**
     * 初始化 畫筆工具, 主要是設定該畫筆的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0,
                Color.GREEN, Color.RED, Shader.TileMode.CLAMP));
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        initRect(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 正式繪制矩形
        canvas.drawRect(mRectF, mPaint);
    }

}

2、設定多個漸變顔色渲染

package kim.hsl.paintgradient.linear;

import android.content.Context;
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 androidx.annotation.Nullable;

public class LinearGradientView2 extends View {

    /**
     * 畫筆工具
     * 線性漸變渲染 需要設定給該 畫筆工具
     */
    private Paint mPaint;

    /**
     * 使用線性漸變繪制的區域
     */
    private RectF mRectF;

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

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

    public LinearGradientView2(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化 畫筆工具, 主要是設定該畫筆的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.CLAMP));
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        initRect(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 正式繪制矩形
        canvas.drawRect(mRectF, mPaint);
    }

}

3、設定渲染方向

package kim.hsl.paintgradient.linear;

import android.content.Context;
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 androidx.annotation.Nullable;

public class LinearGradientView3 extends View {

    /**
     * 畫筆工具
     * 線性漸變渲染 需要設定給該 畫筆工具
     */
    private Paint mPaint;

    /**
     * 使用線性漸變繪制的區域
     */
    private RectF mRectF;

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

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

    public LinearGradientView3(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化 畫筆工具, 主要是設定該畫筆的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right, mRectF.bottom,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.CLAMP));
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        initRect(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 正式繪制矩形
        canvas.drawRect(mRectF, mPaint);
    }

}

4、設定 Shader.TileMode.MIRROR 渲染模式

package kim.hsl.paintgradient.linear;

import android.content.Context;
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 androidx.annotation.Nullable;

public class LinearGradientView4 extends View {

    /**
     * 畫筆工具
     * 線性漸變渲染 需要設定給該 畫筆工具
     */
    private Paint mPaint;

    /**
     * 使用線性漸變繪制的區域
     */
    private RectF mRectF;

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

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

    public LinearGradientView4(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化 畫筆工具, 主要是設定該畫筆的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.MIRROR));
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        initRect(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 正式繪制矩形
        canvas.drawRect(mRectF, mPaint);
    }

}

5、設定 Shader.TileMode.REPEAT 渲染模式

package kim.hsl.paintgradient.linear;

import android.content.Context;
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 androidx.annotation.Nullable;

public class LinearGradientView5 extends View {

    /**
     * 畫筆工具
     * 線性漸變渲染 需要設定給該 畫筆工具
     */
    private Paint mPaint;

    /**
     * 使用線性漸變繪制的區域
     */
    private RectF mRectF;

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

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

    public LinearGradientView5(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }

    /**
     * 初始化 畫筆工具, 主要是設定該畫筆的渲染
     */
    private void initPaint() {
        mPaint = new Paint();
        mPaint.setAntiAlias(true);
        mPaint.setStyle(Paint.Style.FILL);
    }

    private void initRect(int width, int height) {
        mRectF = new RectF(0, 0, width, height);
        mPaint.setShader(new LinearGradient(0, 0, mRectF.right / 2, 0,
                new int[]{Color.RED, Color.GREEN, Color.BLUE},
                new float[]{0f, 0.5f, 1.0f},
                Shader.TileMode.REPEAT));
    }

    @Override
    protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) {
        super.onSizeChanged(width, height, oldWidth, oldHeight);
        initRect(width, height);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 正式繪制矩形
        canvas.drawRect(mRectF, mPaint);
    }

}

【Android UI】Paint Gradient 漸變渲染 ① ( LinearGradient 線性漸變渲染 | 設定渲染方向 | 設定渲染顔色 | 設定渲染模式 | MIRROR )

文章目錄

一、LinearGradient 線性漸變渲染

1、設定 2 個顔色的漸變

3、設定多個顔色的漸變

二、LinearGradient 線性漸變渲染重要參數分析

1、正常渲染

2、設定多個漸變顔色渲染

3、設定渲染方向

4、設定 Shader.TileMode.MIRROR 渲染模式

5、設定 Shader.TileMode.REPEAT 渲染模式

三、代碼示例

1、正常渲染

2、設定多個漸變顔色渲染

3、設定渲染方向

4、設定 Shader.TileMode.MIRROR 渲染模式

5、設定 Shader.TileMode.REPEAT 渲染模式

四、效果展示

繼續閱讀

專訪鄧凡平：深入了解Android

與專家面對面：Android開發入門問與答

Android MVP架構MVCMVP

mvp初探

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

Android常用工具類ToastUtilsSizeUtilsLogUtilsRetrofitManagerAnimUtil

Android Studio 0.8.0解決 Failure [INSTALL_FAILED_OLDER_SDK] 問題

Android – ListView 中添加按鈕，動态删除添加ItemView的操作

Kotlin的ListView與RecyclerView的簡單應用

關于公司的那些坑：Android Studio篇

android SQLite事務和kotlin協程

無法正常編譯錯誤Compilation failed to complete

關于Gradle配置的小結

AOP程式設計_Android優雅權限架構(1)概念基礎，2021金三銀四前言正文大綱正文

Android APK檔案反編譯Android APK檔案反編譯