Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Introduction to the

A Shader is called a Shader. In OpengL, this concept is often used. In Android, a Shader is used to color an image. Paint After the shader is set, the color will be drawn from the shader, that is, the shader will tell the paintbrush the value of the color somewhere.

Shader specific implementation classes include: BitmapShader ComposeShader, that LinearGradient, RadialGradient, SweepGradient

LinearGradient has two constructors:

/** * 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 */ public LinearGradient(float x0, float y0, float x1, float y1, @ColorInt int color0, @ColorInt int color1, @ NonNull TileMode 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 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 */ public LinearGradient(float x0, float y0, float x1, float y1, @NonNull @ColorInt int colors[], @Nullable float positions[], @ NonNull TileMode tile);Copy the code

Parameter Description:

(x0,y0) : coordinates of the start point of the gradient

(x1,y1): coordinates of the end of the gradient

Color0: gradient start color, hexadecimal color representation, must have transparency

Color1: end color of gradient

Colors: Gradient array

Positions: an array of positions, ranging from 0 to 1, that specify the color of a position. If null is passed, the gradient changes linearly.

Tile: The method used to fill the white space when the control area is larger than the specified gradient area.

  • CLAMP edge stretching, for shader covered area, filled with shader boundary color
  • REPEAT repeats in both horizontal and vertical directions, with no gap between adjacent images
  • Mirrors are mirrored in both horizontal and vertical directions, with gaps between adjacent images

The first constructor can specify gradients between two colors. The second constructor can specify gradients between multiple colors. Linear gradients can be implemented not only in code but also in XML files.

Path mPath1 = new Path(); MPath1. MoveTo (150250); MPath1. LineTo (250320); MPath1. LineTo (300300); MPath1. LineTo (350350); MPath1. LineTo (420270); MPath1. LineTo (540370); MPath1. LineTo (560300); MPath1. LineTo (650340); MPath1. LineTo (750270); MPath1. LineTo (850330); MPath1. LineTo (950240); MPath1. LineTo (1050290); MPath1. LineTo (1150350); MPath1. LineTo (1250230); int[] colors = {Color.BLUE, Color.RED, Color.YELLOW}; Float [] positions = {0.3f, 0.6f, 1.0f}; float[] positions = {0.3f, 0.6f, 1.0f}; LinearGradient LinearGradient = new LinearGradient(0,400, 0,230, colors, positions, Shader.TileMode.CLAMP); mPaint.setShader(linearGradient); canvas.drawPath(mPath1, mPaint);Copy the code

TileMode Edge filling mode

How to draw other areas that are not covered by shader if the size of the shader is smaller than the size of the View?

Related to the last parameter,

-CLAMP

Stretch the edges and fill in the rest using the color of the edges

-REPEAT

The shader is repeated in both horizontal and vertical directions with no gap between adjacent images

-MIRROR

It is repeated in both horizontal and vertical directions in the way of mirror image, with gaps between adjacent images and mirror shader