an线性渐变怎么改方向,setpixelsize

在对公司项目进行需求时，使用了hellocharts图标框架，并使用了类LineChartView来绘制折扣或曲线。 产品提供的图表样式的图表中，曲线下方有带阴影的渐变填充区域，使用此类无法获得效果。 而且，因为它的源代码是从abstractChartView继承的，所以需要实现自己的MyLineChartView，所以我开始把它当作盘子。 参考一些文章实现需求后，在周末进行总结：

安卓支持三种颜色渐变：线性渐变、径向渐变和渐变。 所有这三种渐变都是从android.graphics.Shader继承的，Paint类通过setShader ()方法支持渐变。

本文介绍了LinearGradient的使用，并看看LinearGradient构造函数。

构建方法1 (仅支持双色渐变) :

浮点x0、浮点y0、浮点x1、浮点y1、int color0、int color1、TileMode tileMode )； 参数1:x0表示渐变开始点的x轴坐标

参数2:y0表示渐变开始点的y轴坐标

参数3:x1表示渐变终点的x轴坐标

参数4:y1表示渐变终点的y轴坐标

参数5:color0表示渐变开始时的颜色，颜色值以十六进制表示

参数6:color1表示渐变末尾的颜色，颜色值以十六进制表示

参数7:tileMode指定当控制区域大于指定的渐变区域时，其馀区域的颜色填充方式。

TileMode有三种方法： CLAMP、REPEAT和MIRROR。

CLAMP :拉伸边缘的1个像素，扩展模式

REPEAT :平移复制模式

镜像：镜面反转模式

构建方法2 (支持多种颜色渐变) :

publiclineargradient (浮x0，浮y0，浮x1，浮y1，int colors[]，float positions[]，TileMode tileMode )； 参数x0、y0、x1、y1、tileMode与初始构建方法相同，在此称为colors[]和positions[]。

colors[]是一组渐变颜色值，颜色值以十六进制表示

positions[]是colors[]中多种颜色渐变时每种颜色的缩放位置，范围为0到1。

新的定制View组件属性文件： attrs.xml

？ XML version=' 1.0 ' encoding=' utf-8 '？ resources declare-styleablename=' lineargradientview '！ View组件类名以及组件中包含的两个属性attrname=' start color ' format=' integer '/attrname=' end color ' format

MPa int.set shader (newlineargradient (0，0，mRectF.right，0，mStartColor，mEndColor，Shader.TileMode.MIRROR ) )

package com.xw.lineargradientdemo.view； import android.content.Context； import Android.content.RES.typed array； import android.graphics.Canvas； import android.graphics.Color； import Android.graphics.linear gradient； import android.graphics.Paint； import android.graphics.RectF； import android.graphics.Shader； import Android.util.attributes et； import android.view.View； importandroidx.annotation.nullable； import com.xw.lineargradientdemo.r； publicclasslineargradientviewextendsview//默认渐变开始颜色(红) privatestaticfinalintdefault _ start _ color=color.parart

; //默认渐变色结束颜色(黄色) private static final int DEFAULT_END_COLOR = Color.parseColor("#FFFF00"); //开始、结束颜色 private int mStartColor, mEndColor; //绘制的矩形区域 private RectF mRectF; //画笔 private Paint mPaint; 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); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.LinearGradientView); //注意：参数1是对自定义View组件标签属性的拼接 mStartColor = typedArray.getColor(R.styleable.LinearGradientView_startColor, DEFAULT_START_COLOR); mEndColor = typedArray.getColor(R.styleable.LinearGradientView_endColor, DEFAULT_END_COLOR); typedArray.recycle(); initPaint(); } private void initPaint() { mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.FILL); } @Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); mRectF = new RectF(0, 0, width, height); mPaint.setShader(new LinearGradient(0, 0, mRectF.right/2, 0, mStartColor, mEndColor, Shader.TileMode.MIRROR)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); canvas.drawRect(mRectF, mPaint); }}

使用这个自定义View组件，布局文件很简单：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" tools:context=".MainActivity"> <com.xw.lineargradientdemo.view.LinearGradientView android:layout_width="350dp" android:layout_height="250dp" ></com.xw.lineargradientdemo.view.LinearGradientView></LinearLayout>

 MainActivity就是自动生成的类，不用添加任何代码：

public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); }}

运行效果：

最基础的效果出来了，那下面就可以调试上面的构造方法的参数了：

一、两种渐变色的情况：

1、从左向右设置渐变色，起始点为矩形的左上角(0,0)，终点为右上角(mRectF.right, 0),即水平渐变，TileMode为MIRROR 

mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0, mStartColor, mEndColor, Shader.TileMode.MIRROR));

效果如下：

2、从左上角到右下角设置渐变色，同理起始点为左上角到右下角，即45度倾斜渐变，TileMode为MIRROR 

mPaint.setShader(new LinearGradient(0, 0, mRectF.right, mRectF.bottom,mStartColor, mEndColor, Shader.TileMode.MIRROR));

效果如下：

3、从上到下设置渐变色,同理起始点为左上角到左下角，即垂直渐变，TileMode为MIRROR 

mPaint.setShader(new LinearGradient(0, 0, 0, mRectF.bottom, mStartColor, mEndColor, Shader.TileMode.MIRROR));

效果图如下：

TileMode的三种模式的理解：

①、TileMode设置为MIRROR时,即镜像渐变模式,如果渐变到达设定的终点时，视图还有剩余区域未绘制则镜像已绘制的区域:

mPaint.setShader(new LinearGradient(0, 0, mRectF.right/3, 0, mStartColor, mEndColor, Shader.TileMode.MIRROR));

效果图如下：

 

②、TileMode设置为REPEAT，如果到达终点时，组件还有未绘制区域则重复绘制已绘制的区域：

mPaint.setShader(new LinearGradient(0, 0, mRectF.right/2, 0, mStartColor, mEndColor, Shader.TileMode.REPEAT));

6、TileMode设置为CLAMP，为拉伸、扩展模式，即颜色渐变到终点颜色时，将终点颜色拉伸填充剩余的区域：

mPaint.setShader(new LinearGradient(0, 0, mRectF.right/2, 0, mStartColor, mEndColor, Shader.TileMode.CLAMP));

二、多种渐变色的情况

1、从左向右设置渐变色

//初始化两个数组int[] colorArray = new int[]{Color.RED,Color.YELLOW,Color.BLUE,Color.GREEN};float[] positionArray = new float[]{0f,0.3f,0.6f,0.9f};//使用第二个构造方法mPaint.setShader(new LinearGradient(0, 0, mRectF.right, 0,colorArray, positionArray, Shader.TileMode.REPEAT));

注意：这里的两个数组colorArray和positionArray长度必须相等，否则程序会报错：

E/AndroidRuntime: FATAL EXCEPTION: main Process: com.xw.lineargradientdemo, PID: 18883 java.lang.IllegalArgumentException: color and position arrays must be of equal length

效果图如下：

2、看下渐变色文字效果：

@Override protected void onSizeChanged(int width, int height, int oldWidth, int oldHeight) { super.onSizeChanged(width, height, oldWidth, oldHeight); mRectF = new RectF(0, 0, width, height); //mPaint.setShader(new LinearGradient(0, 0, mRectF.right/2, 0, mStartColor, mEndColor, Shader.TileMode.CLAMP)); //mPaint.setShader(new LinearGradient(0, 0, mRectF.right,0,colorArray, positionArray, Shader.TileMode.REPEAT)); mPaint.setShader(new LinearGradient(0, 0, mRectF.centerX(), 0, colorArray, positionArray, Shader.TileMode.MIRROR)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //canvas.drawRect(mRectF, mPaint); canvas.drawText("我爱你，中国！",0,mRectF.centerY(),mPaint); }

文字渐变的效果：

关于其他的渐变效果的使用，用到时再更新！