Android View — Gradient 渐变

最新推荐文章于 2022-05-31 14:55:25 发布
最新推荐文章于 2022-05-31 14:55:25 发布
阅读量1.4k 收藏 2
点赞数 1
分类专栏： Android View 文章标签： android View Gradient Shader
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chituhuan/article/details/76795934
版权

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

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-SuxQ2ZvU-1585192275446)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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
            );
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uVf7E2JL-1585192275449)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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
            );
        }

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Y0I7KbDs-1585192275450)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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
            );

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UtNRYIjz-1585192275451)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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
            );

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-km5GoKGq-1585192275452)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HaAqSqQR-1585192275453)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FAR9Q2WT-1585192275454)(https://github.com/louiewh/ImageHosting/raw/master/gradient/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>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ee1z9gGH-1585192275455)(https://github.com/louiewh/ImageHosting/raw/master/gradient/DrawableSweepGradientView.png)]

chituhuan
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android LinearGradient 线性渐变渲染
05-30
【Android UI】Paint Gradient 渐变渲染 ① ( LinearGradient 线性渐变渲染 | 设置渲染方向 | 设置渲染颜色 | 设置渲染模式 | MIRROR ) https://blog.csdn.net/shulianghan/article/details/125047457 博客配套源码 一、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 渲染模式 四、效果展示 ———————————————— 版权声明：本文为CSDN博主「韩曙亮」的原创文章，遵循CC 4.0
android LinearGradient和RadialGradient
qq_22899129的博客
12-22 249
LinearGradient是用来实现线性渐变效果1.此类是Shader的子类2.通过paint.setShader来设置渐变。3.使用方法 1.此类是Shader的子类 LinearGradient extends Shader 主要是用对颜色的线性渐变效果 2.通过paint.setShader来设置渐变。 Paint mPaint = new Paint(); mPaint.setSh...
Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
mengzhengjie的专栏
10-09 882
Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果 分类： Android Android 颜色渲染2013-08-31 07:48 314人阅读 评论(1) 收藏 举报 利用环形渲染我们可以做到什么？ 其实很多都是非常常见的，比如上一篇实现的帮帮糖效果， 彩色的热气球,比如这里要讲到的水波纹效果，或者也可以理解为扩散色渲染效果
【Android UI】Paint Gradient 渐变渲染 ③ ( RadialGradient 环形渐变渲染 | 在给定中心和半径的情况下绘制径向渐变的着色器 | 水波纹效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-31 1110
一、RadialGradient 环形渐变渲染、 1、设置多个渐变颜色的构造函数、 2、设置两个渐变颜色的构造函数、 二、完整代码示例、 1、设置多个渐变颜色的构造函数、 2、设置两个渐变颜色的构造函数、 三、效果展示
android radialgradient 修改中心坐标,Android绘图之RadialGradient 放射渐变（11）
weixin_33265716的博客
05-25 728
Android 绘图学习LinearGradient 和 SweepGradient，这次讲解RadialGradient；RadialGradient被称为放射渐变，就是从中心向外圆形渐变。两个构造函数，第一个构造函数可以实现两种颜色的渐变，第二个构造函数可以实现多个颜色的渐变。RadialGradient(float centerX, float centerY, float radius, ...
Android实现 Shape属性gradient 渐变效果
01-04
1，gradient（渐变） 【1】用以定义渐变色，可以定义两色渐变和三色渐变，及渐变样式；  <?xml version=1.0 encoding=utf-8?> <gradient     android:type=[linear | radial | sweep]    //共有3中渐变类型，线性渐变（默认）/放射渐变/扫描式渐变       android:angle=integer     //渐变角度，
Android RadialGradient 放射渲染
geekCode
03-24 2349
前言 不知不觉，春分已过两天。万物复苏，居住附近的看桃花也开艳了，路边的垂柳，也绿了。怎奈，这两天天气忽变，有了一些倒春寒的感觉，好冷。近几偶然听闻，同事裁员，愿2019一切顺利。 RadialGradient 说明 类继承关系 构造函数 public RadialGradient(float centerX, float centerY, float radius, ...
Android渲染器Shader：环状放射渐变渲染器RadialGradient（三）
weixin_33849942的博客
07-25 552
 Android渲染器Shader：环状放射渐变渲染器RadialGradient（三） Android RadialGradient渲染器提供一种环状、发散、放射形状的渐变渲染器。 写一个例子： package zhangphil.demo; import android.content.Context; import android.graphics.Canvas; im...
Android中的自绘View的那些事儿（三）之 颜色渐变渲染器：LinearGradient、RadialGradient 和 SweepGradient的简介
子云心的博客
11-27 1736
我们在上一篇文章《Android中的自绘View的那些事儿（二）之 Shader渲染器和BitmapShader位图渲染器的简介》介绍了渲染器基类Shader以及它五个子类中的BitmapShader位图渲染器的使用，今天我们继续来谈谈LinearGradient线性渲染器、RadialGradient环形渲染器和 SweepGradient梯度渲染器这三个颜色渐变渲染器 LinearGradi...
Android绘图之RadialGradient 放射渐变（11）
lidongxiu0714
12-25 8521
1 RadialGradient 简介 LinearGradient 和 SweepGradient，这次讲解RadialGradient； RadialGradient被称为放射渐变，就是从中心向外圆形渐变。 两个构造函数，第一个构造函数可以实现两种颜色的渐变，第二个构造函数可以实现多个颜色的渐变。 RadialGradient(float centerX, float centerY, fl...
《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》对应源码
09-24
博客《自定义控件三部曲之绘图篇(二十)——RadialGradient与水波纹按钮效果》对应源码，博客地址：http://blog.csdn.net/harvic880925/article/details/52653811
android TextView 文字部分渐变
04-18
android实现TextView文字部分渐变色；LinearGradientFontSpan SpannableString
Android代码-歌词风格的TextView，利用Gradient渐变实现。
08-08
GradientTextView是一个文字颜色逐步改变的自定义view，目前只有两种颜色。 如何使用 GradientTextView Step 1. Add it in your root build.gradle at the end of repositories: allprojects { repositories { ...
ListView 侧滑菜单的实现 -- 大道至简的SwipeMenuLayout
chituhuan的专栏
02-22 3439
SwipeMenuLayoutView for listView item一 介绍 ListView 通常用来展示多个个体，比如QQ 微信中的联系人列表。一个比较常见的功能是侧滑删除。这个功能属于比较常见的一个菜单，网络上也有很多实现。 1 scroller 方式。最常见的一个实现是ListView 的Item View 为一个LinerLayout, 菜单在LinerLayout的最右端超出屏幕的
Android 自定义View(二) 下雨效果
chituhuan的专栏
05-17 1756
一 实现思路， 雨点用线段表示，通过控制线段的大小和宽度来表示不同的线段。 一个雨点下雨的过程可以表示为一条直线，一次雨点在下雨的过程中坐标表示为 y=kx+b; 通过不停的绘制调用onDraw 实现下雨的动画。 二 RainView整个RainView 继承自View，然后把下雨的过程抽象为雨点，在RainView 中增加N个雨点，这样把整个下雨过程抽象到了RainDrop中，RainView 负
Android 自定义View
chituhuan的专栏
05-17 1019
Android 自定义View一 简单的自定义ViewAndroid View 的绘制流程主要有 onMeasure, onLayout, onDraw. UI 内容的绘制主要在onDraw 中完成。1.1 首先定义View类MyViewMyView 继承View, 实现两个构造方法。MyView(Context context, @Nullable AttributeSet attrs)是在XML
Android View — Paint 详解
chituhuan的专栏
07-09 660
Android View — Paint 详解在Android View 的概念中，Paint 如名字所代表的含义，是画笔的意思。像我们平时画图一样，Paint就是相当于笔，而Canvas就是纸，这里叫画布。Paint 可以设置的多种属性。PaintCanvasView定义一个最简单的自定义View来展示Paint 的多种属性。 重写onDraw 方法，在onDrasw 方法中调用子类的onChil
android gradient
最新发布
05-30
在 Android 中，Gradient 是指渐变效果，可以通过 XML 或代码来创建。Gradient 可以用作 View 的背景，也可以用作其他图形的填充。 以下是一个使用 XML 创建渐变背景的示例： ```xml <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <gradient android:startColor="#FFFFFF" android:endColor="#000000" android:angle="45" /> </shape> ``` 在上面的示例中，使用 gradient 标签来定义渐变效果。其中，android:startColor 属性定义起始颜色，android:endColor 属性定义结束颜色，android:angle 属性定义渐变的角度（0 表示从左到右，90 表示从上到下，以此类推）。 除了线性渐变，Android 还支持径向渐变、扫描渐变和渐变颜色列表等效果。你可以在 gradient 标签中添加不同的属性来实现这些效果。 以下是一个使用代码创建渐变背景的示例： ```java GradientDrawable gradientDrawable = new GradientDrawable(); gradientDrawable.setGradientType(GradientDrawable.LINEAR_GRADIENT); gradientDrawable.setColors(new int[]{Color.WHITE, Color.BLACK}); gradientDrawable.setOrientation(GradientDrawable.Orientation.TOP_BOTTOM); view.setBackground(gradientDrawable); ``` 在上面的示例中，通过创建一个 GradientDrawable 对象，并设置其类型、颜色和方向等属性，最后将其设置为 View 的背景。 希望以上信息能够对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值