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 constructorsLinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)
  1. float x0, float y0, float x1, float y1 定义了起始点的和结束点的坐标。
  2. int[] colors 颜色数组，在线性方向上渐变的颜色。
  3. float[] positions 和上边的数组对应，取值[0..1]，表示每种颜色的在线性方向上所占的百分比。可以为Null,为Null 是均匀分布。
  4. Shader.TileMode tile 表示绘制完成，还有剩余空间的话的绘制模式。

第二种 构造函数是第一种的简化版，只支持两种颜色。

LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)
  1. float x0, float y0, float x1, float y1 定义了起始点的和结束点的坐标。
  2. int color0, int color1, 开始颜色和结束的颜色
  3. 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);        }

Android View — Gradient 渐变_第1张图片

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

Android View — Gradient 渐变_第2张图片

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

Android View — Gradient 渐变_第3张图片

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            );

Android View — Gradient 渐变_第4张图片

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            );

Android View — Gradient 渐变_第5张图片

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>

Android View — Gradient 渐变_第6张图片

<?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>

Android View — Gradient 渐变_第7张图片

<?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>

Android View — Gradient 渐变_第8张图片

更多相关文章

  1. Android修改AlertDialog的背景颜色
  2. Android ListView里设置默认Item的背景颜色
  3. Android 之各种颜色
  4. 改变tab中indicator文本的颜色
  5. Android布局背景颜色设置
  6. js将一个数组传给android
  7. 取消默认Listview点击的显示的颜色
  8. android TextView的字体颜色设置的多种方法（续）
  9. Android 的res/values/colors自定义颜色

随机推荐

  1. android LinearLayout嵌套 button时onCli
  2. ch011 Android Galley与ImageSwitch
  3. Android ListView
  4. android屏幕分辨率适配
  5. 引路蜂Android游戏编程教程
  6. Android传感器
  7. Android Lollipop新特性
  8. Android LinearLayout等配置圆角背景
  9. android:服务器和客户端通信2
  10. Android Studio中获取sha1证书指纹