Android View — Gradient 渐变
Android 支持三种颜色渐变， LinearGradient（线性渐变） RadialGradient （径向渐变） SweepGradient（扫描渐变）。这三种渐变继承自android.graphics.Shader， Paint 类通过setShader支持渐变。
java.lang.Object
android.graphics.Shader
android.graphics.LinearGradient
android.graphics.RadialGradient
android.graphics.SweepGradient
1. LinearGradient
线性渐变就是在线性方向的的渐变。有两个构造函数，
// Public constructors
LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)
- float x0, float y0, float x1, float y1 定义了起始点的和结束点的坐标。
- int[] colors 颜色数组，在线性方向上渐变的颜色。
- float[] positions 和上边的数组对应，取值[0..1]，表示每种颜色的在线性方向上所占的百分比。可以为Null,为Null 是均匀分布。
- Shader.TileMode tile 表示绘制完成，还有剩余空间的话的绘制模式。
第二种 构造函数是第一种的简化版，只支持两种颜色。
LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
- float x0, float y0, float x1, float y1 定义了起始点的和结束点的坐标。
- int color0, int color1, 开始颜色和结束的颜色
- Shader.TileMode tile 表示绘制完成，还有剩余空间的话的绘制模式。
@Override
protected void onChildDraw(Canvas canvas) {
LinearGradient linearGradient = new LinearGradient(
0, 0,
mRectF.right, mRectF.top,
Color.RED, Color.YELLOW,
Shader.TileMode.MIRROR
);
mPaint.setShader(linearGradient);
canvas.drawRect(mRectF, mPaint);
}
gradient_linear.png
RadialGradient
RadialGradient 是圆环一样的的渐变，RadialGradient 同样是两个构造函数，
RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)
1.float centerX, float centerY 渐变的中心点 圆心
2.float radius 渐变的半径
3.int[] colors 渐变颜色数组
4.float[] stops 和颜色数组对应， 每种颜色在渐变方向上所占的百分比取值[0, 1]
5.Shader.TileMode tileMode 表示绘制完成，还有剩余空间的话的绘制模式。
RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)
1.float centerX, float centerY 渐变的中心点 圆心
2.float radius 渐变的半径
3.int centerColor, int edgeColor 中心点颜色和边缘颜色
4.Shader.TileMode tileMode 表示绘制完成，还有剩余空间的话的绘制模式
@Override
protected void onChildDraw(Canvas canvas) {
RadialGradient radialGradient = new RadialGradient(
mRectF.centerX(), mRectF.centerY(),
Math.min(mRectF.centerX(), mRectF.centerY()),
new int[]{Color.RED, Color.YELLOW, Color.BLUE}, null,
Shader.TileMode.MIRROR
);
mPaint.setShader(radialGradient);
canvas.drawCircle(
mRectF.centerX(), mRectF.centerY(),
Math.min(mRectF.centerX(), mRectF.centerY()),
mPaint
);
}
gradient_radial.png
SweepGradient
SweepGradient 是和角度有关的渐变。以某一点为圆心，随着角度的大小发生渐变。
SweepGradient(float cx, float cy, int[] colors, float[] positions)
1.float cx, float cy 中心点坐标
2.int[] colors 颜色数组
3.float[] positions 数组颜色在渐变方向上所占的百分比
SweepGradient(float cx, float cy, int color0, int color1)
1.float cx, float cy 中心点坐标
2.int color0, int color1 开始颜色 结束颜色
@Override
protected void onChildDraw(Canvas canvas) {
SweepGradient sweepGradient = new SweepGradient(
mRectF.centerX(), mRectF.centerY(),
new int[]{Color.RED, Color.YELLOW, Color.BLACK, Color.MAGENTA},
null
);
mPaint.setShader(sweepGradient);
canvas.drawCircle(
mRectF.centerX(), mRectF.centerY(),
Math.min(mRectF.centerX(), mRectF.centerY()),
mPaint
);
}
gradient_sweep.png
Shader.TileMode
在LinearGradient RadialGradient 渐变中，构造函数的最后一个参数为 Shader.TileMode 类型，决定了如果View还有剩余空间，如何绘制。
| Shader.TileMode | |
|---|---|
| CLAMP (0) | 边缘拉伸 replicate the edge color if the shader draws outside of its original bounds |
| REPEAT (1) | repeat the shader's image horizontally and vertically |
| MIRROR (2) | repeat the shader's image horizontally and vertically, alternating mirror images so that adjacent images always seam |
LinearGradient Shader.TileMode
从上到下依次为：CLAMP REPEAT MIRROR
LinearGradient linearGradient = new LinearGradient(
0, mRectF.centerY(),
mRectF.centerX(), mRectF.centerY(),
Color.RED, Color.YELLOW,
Shader.TileMode.CLAMP
);
LinearGradient linearGradient = new LinearGradient(
0, mRectF.centerY(),
mRectF.centerX(), mRectF.centerY(),
Color.RED, Color.YELLOW,
Shader.TileMode.REPEAT
);
LinearGradient linearGradient = new LinearGradient(
0, mRectF.centerY(),
mRectF.centerX(), mRectF.centerY(),
Color.RED, Color.YELLOW,
Shader.TileMode.MIRROR
);
linear_tilemode.png
RadialGradient Shader.TileMode
从上到下依次为：CLAMP REPEAT MIRROR
RadialGradient radialGradient = new RadialGradient(
mRectF.centerX(), mRectF.centerY(),
Math.min(mRectF.centerX(), mRectF.centerY())/2,
new int[]{Color.RED, Color.YELLOW, Color.BLUE}, null,
Shader.TileMode.CLAMP
);
RadialGradient radialGradient = new RadialGradient(
mRectF.centerX(), mRectF.centerY(),
Math.min(mRectF.centerX(), mRectF.centerY())/2,
new int[]{Color.RED, Color.YELLOW, Color.BLUE}, null,
Shader.TileMode.REPEAT
);
RadialGradient radialGradient = new RadialGradient(
mRectF.centerX(), mRectF.centerY(),
Math.min(mRectF.centerX(), mRectF.centerY())/2,
new int[]{Color.RED, Color.YELLOW, Color.BLUE}, null,
Shader.TileMode.MIRROR
);
radial_tilemode.png
ShapeDrawable 中的渐变
一些背景的渐变通过定义 Shape Drawable 来实现。Shape Drawable 有gradient 属性。
| type | 类型 linear radial sweep 三种类型 |
|---|---|
| angle | 起始角度，0 左边；90 下边，180，右边，270 上边。共8个方向，从0开始每次增加45 |
| centerX centerY | 中心点所在的百分比 |
| endColor startColor | 开始颜色，结束颜色 |
| centerColor | 中心点颜色 |
| gradientRadius | 渐变半径 android:type="radial" 才有作用 |
| type | 类型 linear radial sweep 三种类型 |
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorAccent"
android:type="linear" />
<corners android:radius="5dip" />
</shape>
DrawableLinearGradientView.png
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:dither="true"
android:innerRadius="@dimen/pain_canvas_height"
android:shape="oval" >
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorAccent"
android:type="radial"
android:gradientRadius="@dimen/pain_canvas_height"/>
</shape>
DrawableRadialGradientView.png
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval" >
<gradient
android:angle="0"
android:centerX="0.5"
android:centerY="0.5"
android:endColor="@color/colorPrimary"
android:startColor="@color/colorAccent"
android:gradientRadius="@dimen/pain_canvas_height"/>
</shape>
DrawableSweepGradientView.png
