自定义View之Paint - RadialGradient

最新推荐文章于 2022-05-31 14:55:25 发布
最新推荐文章于 2022-05-31 14:55:25 发布
阅读量795 收藏
点赞数
分类专栏： android自定义view 文章标签： Android Paint 放射性渐变 Radial
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/IO_Field/article/details/78460490
版权

RadialGradient

RadialGradient即放射性渐变，由中心点向四周逐渐渐变，其颜色渐变是由中心点向四周以线性变化。以达到这样的效果：

这里写图片描述

它有两个构造函数：

  • RadialGradient(float centerX, float centerY, float radius, int[] colors, float[] stops, Shader.TileMode tileMode)
  • RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)

双色的放射渐变

先看其对应的构造函数：

  • RadialGradient(float centerX, float centerY, float radius, int centerColor, int edgeColor, Shader.TileMode tileMode)

其各参数的意义如下：

  • centerX：表示渐变中心的X坐标
  • centerY：表示渐变中心的Y坐标
  • radius：表示渐变的半径
  • centerColor：表示
最低0.47元/天 解锁文章
行云间
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android开发 之 RadialGradient环形渲染
z_x_Qiang的博客
07-16 4353
RadialGradient环形渲染 继承关系 java.lang.Object android.graphics.Shader android.graphics.RadialGradient 构造 public RadialGradient(float x, float y, float radius, int[] colors, float[] positions,
RadialGradient环形渲染
08-14 9646
package shader.yb; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.graphics.RadialGradient; import android
Android 颜色渲染(六) RadialGradient 环形渲染
844604778
08-31 690
Android 颜色处理(六) RadialGradient 环形渲染 public RadialGradient(float x, float y, float radius, int[] colors, float[] positions,Shader.TileMode tile) float x: 圆心X坐标 float y: 圆心Y坐标 float radius: 半径 i...
Android 颜色渲染(七) RadialGradient 环形渲染实现水波纹效果
844604778
08-31 655
利用环形渲染我们可以做到什么？ 其实很多都是非常常见的，比如上一篇实现的帮帮糖效果， 彩色的热气球,比如这里要讲到的水波纹效果，或者也可以理解为扩散色渲染效果 首先看一下效果图： 轻触屏幕，即可看到对应的效果，可以看到，实现这种效果，利用RadialGradient ,只需简单几行代码: MainActivity: package com.tony.testshader; import a...
详解Android自定义View--自定义柱状图
07-19
在自定义View的构造函数和`onMeasure()`方法中，初始化必要的属性，如颜色、画笔(Paint对象)和尺寸。测量View的宽度和高度，以便在绘制时使用。 **3. 绘制坐标轴和刻度**： 在`onDraw()`方法中，使用Canvas对象绘制...
自定义View之渐变色进度条
09-11
本项目“自定义View之渐变色进度条”聚焦于构建一个美观、功能完善的进度条，该进度条具有渐变色彩，并且能够显示文本进度值，提供了高度的定制性。 首先，我们要理解如何在Android中实现一个自定义的View。自定义...
自定义View实现健康指数监控
08-21
在Android开发中，自定义View是一项重要的技能，它允许开发者根据特定需求创建独特且功能丰富的UI组件。本项目“自定义View实现健康指数监控”即是一个这样的实例，它不仅能够展示健康指数，还可以用作通用的进度条...
Android-自定义View绘制一个太极旋转图片demo
08-13
在Android开发中，自定义View是一种常见的需求，它允许开发者根据特定的需求来定制视图，以实现独特的交互和视觉效果。本示例“Android-自定义View绘制一个太极旋转图片demo”聚焦于如何通过自定义View来绘制并动画...
Android自定义View bitmapProcessView炫丽进度条
02-23
在Android开发中，自定义View是一项重要的技能，它允许开发者创造出独特且富有表现力的UI元素，以满足特定的设计需求。本示例“Android自定义View bitmapProcessView炫丽进度条”聚焦于创建一个视觉效果丰富的3D...
radial-gradient
阿波罗吹雪的博客
04-03 965
radial-gradient
CSS3学习之radial-gradient（径向渐变）
weixin_33720956的博客
04-22 2586
转自：http://www.cnblogs.com/rainman/p/5133685.html 1、语法 径向渐变不同于线性渐变，线性渐变是从“一个方向”向“另一个方向”的颜色渐变，而径向渐变是从“一个点”向四周的颜色渐变。其语法如下： background: radial-gradient(center, shape, size, start-color, ..., last-col...
radial-gradient（径向渐变）
softlipaaa的博客
07-08 4413
radial-gradient（径向渐变）介绍总结语法 介绍 1、radial-gradient( )径向渐变（放射性效果） 2、默认情况下，径向渐变的形状是根据元素的形状来计算的 正方形- ->圆形 长方形- ->椭圆形 3、我们也可以手动指定径向渐变的大小 可选值： circle 圆形 ellipse 椭圆 示例： background-image:radial-gradient(100px 100px , red , yellow); background-ima
CSS 的 radial-gradient() 径向渐变函数（带例子）
热门推荐
单枪匹码
11-14 1万+
一、CSS中的 radial-gradient() 函数： 1、定义与用法：（取自菜鸟教程） radial-gradient() 函数用径向渐变创建" 图像 "。 径向渐变由中心点定义。 为了创建径向渐变你必须设置两个中止色。 2、实例：以下实例演示了径向渐变 - 颜色结点均匀分布： #grad { background-image: radial-gradient(red, green, b...
css渐变之radial-gradient
毒牙
09-13 530
追梦的蚂蚁css
【Android UI】Paint Gradient 渐变渲染 ③ ( RadialGradient 环形渐变渲染 | 在给定中心和半径的情况下绘制径向渐变的着色器 | 水波纹效果 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
05-31 1266
一、RadialGradient 环形渐变渲染、 1、设置多个渐变颜色的构造函数、 2、设置两个渐变颜色的构造函数、 二、完整代码示例、 1、设置多个渐变颜色的构造函数、 2、设置两个渐变颜色的构造函数、 三、效果展示
android radialgradient 修改中心坐标,Android之玩转View（二）：使用Paint实现的特效(BitmapShader,LinearGradient,RadialGradi...
weixin_29051193的博客
05-25 294
请尊重原创，转载请注明出处【tianyl】的博客1 前言上一篇Paint的基础api介绍了Android中Paint这个类的一些比较常用的api，不过光说不练怎么行呢，这篇就结合之前介绍的api，来秀一秀可以实现的各种炫酷特效，话不多说，开工2 Shader要使用Paint实现一些高级特效，那么就少不了一个关键的类Shader2.1 介绍Shader在Android中又被称为着色器，字面意思就是用...
css的radial-gradient大详解
qq_37805832的博客
09-23 1514
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>130-径向渐变</title> <style> *{ margin: 0; padding: 0; } div{ width: 400px;
自定义view圆弧可拖拽进度条，进度条底色时灰色，进度条是从绿到红的渐变色，拖拽按钮跟随进度条进行变色。安卓java语言如何实现
最新发布
05-26
要实现这样的自定义View，您可以按照以下步骤进行操作： 1. 创建一个自定义View类，并继承View。 2. 在自定义View类中定义以下属性： - 圆弧的宽度 - 圆弧的半径 - 进度条的最小值和最大值 - 进度条的当前值 - 进度条的颜色 3. 重写onMeasure()方法，以确保View的大小正确。 4. 重写onDraw()方法，绘制圆弧和进度条。要绘制圆弧，可以使用Canvas.drawArc()方法。要绘制进度条，可以使用Canvas.drawLine()方法。 5. 实现触摸事件，以便用户可以拖动进度条。在onTouchEvent()方法中处理DOWN、MOVE和UP事件。在MOVE事件中，计算拖动按钮的位置和当前进度值，并调用invalidate()方法以便重新绘制View。 6. 在绘制进度条时，使用Shader来实现渐变色。您可以使用LinearGradient或RadialGradient来创建Shader。使用Shader作为画笔的颜色，以便实现渐变色。 下面是一个简单的示例代码，演示如何实现此自定义View： ``` public class ArcSeekBar extends View { private static final int DEFAULT_ARC_WIDTH = 20; // 默认圆弧宽度 private static final int DEFAULT_ARC_RADIUS = 100; // 默认圆弧半径 private static final int DEFAULT_MIN_VALUE = 0; // 默认最小值 private static final int DEFAULT_MAX_VALUE = 100; // 默认最大值 private static final int DEFAULT_PROGRESS_VALUE = 50; // 默认进度值 private int mArcWidth; // 圆弧宽度 private int mArcRadius; // 圆弧半径 private int mMinValue; // 最小值 private int mMaxValue; // 最大值 private int mProgressValue; // 进度值 private int mProgressColor; // 进度条颜色 private Paint mArcPaint; // 圆弧画笔 private Paint mProgressPaint; // 进度条画笔 private Paint mThumbPaint; // 拖拽按钮画笔 private float mThumbX; // 拖拽按钮的X坐标 public ArcSeekBar(Context context) { this(context, null); } public ArcSeekBar(Context context, AttributeSet attrs) { super(context, attrs); initAttrs(attrs); initPaints(); } private void initAttrs(AttributeSet attrs) { TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.ArcSeekBar); mArcWidth = ta.getDimensionPixelSize(R.styleable.ArcSeekBar_arcWidth, DEFAULT_ARC_WIDTH); mArcRadius = ta.getDimensionPixelSize(R.styleable.ArcSeekBar_arcRadius, DEFAULT_ARC_RADIUS); mMinValue = ta.getInt(R.styleable.ArcSeekBar_minValue, DEFAULT_MIN_VALUE); mMaxValue = ta.getInt(R.styleable.ArcSeekBar_maxValue, DEFAULT_MAX_VALUE); mProgressValue = ta.getInt(R.styleable.ArcSeekBar_progressValue, DEFAULT_PROGRESS_VALUE); mProgressColor = ta.getColor(R.styleable.ArcSeekBar_progressColor, Color.RED); ta.recycle(); } private void initPaints() { mArcPaint = new Paint(); mArcPaint.setStyle(Paint.Style.STROKE); mArcPaint.setStrokeWidth(mArcWidth); mArcPaint.setColor(Color.GRAY); mArcPaint.setAntiAlias(true); mProgressPaint = new Paint(); mProgressPaint.setStyle(Paint.Style.STROKE); mProgressPaint.setStrokeWidth(mArcWidth); mProgressPaint.setAntiAlias(true); mThumbPaint = new Paint(); mThumbPaint.setStyle(Paint.Style.FILL); mThumbPaint.setColor(mProgressColor); mThumbPaint.setAntiAlias(true); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = getPaddingLeft() + getPaddingRight() + mArcRadius * 2; int height = getPaddingTop() + getPaddingBottom() + mArcRadius * 2; setMeasuredDimension(resolveSize(width, widthMeasureSpec), resolveSize(height, heightMeasureSpec)); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // 绘制圆弧 canvas.drawArc(getArcRectF(), 135, 270, false, mArcPaint); // 绘制进度条 mProgressPaint.setShader(createGradientShader()); canvas.drawLine(getArcCenterX(), getArcCenterY(), mThumbX, getArcCenterY(), mProgressPaint); // 绘制拖拽按钮 canvas.drawCircle(mThumbX, getArcCenterY(), mArcWidth / 2f, mThumbPaint); } private RectF getArcRectF() { int left = getPaddingLeft() + mArcWidth / 2; int top = getPaddingTop() + mArcWidth / 2; int right = getMeasuredWidth() - getPaddingRight() - mArcWidth / 2; int bottom = getMeasuredHeight() - getPaddingBottom() - mArcWidth / 2; return new RectF(left, top, right, bottom); } private float getArcCenterX() { return getMeasuredWidth() / 2f; } private float getArcCenterY() { return getMeasuredHeight() / 2f; } private Shader createGradientShader() { int[] colors = {Color.GREEN, mProgressColor}; return new LinearGradient(getArcCenterX(), getArcCenterY() - mArcRadius, getArcCenterX(), getArcCenterY() + mArcRadius, colors, null, Shader.TileMode.CLAMP); } @Override public boolean onTouchEvent(MotionEvent event) { switch (event.getAction()) { case MotionEvent.ACTION_DOWN: case MotionEvent.ACTION_MOVE: float x = event.getX(); if (x < getPaddingLeft() + mArcRadius) { mThumbX = getPaddingLeft() + mArcRadius; } else if (x > getMeasuredWidth() - getPaddingRight() - mArcRadius) { mThumbX = getMeasuredWidth() - getPaddingRight() - mArcRadius; } else { mThumbX = x; } mProgressValue = (int) ((mMaxValue - mMinValue) * (mThumbX - getPaddingLeft() - mArcRadius) / (getMeasuredWidth() - getPaddingLeft() - getPaddingRight() - mArcRadius * 2) + mMinValue); invalidate(); return true; case MotionEvent.ACTION_UP: return true; } return super.onTouchEvent(event); } } ``` 在XML布局文件中可以这样使用： ``` <com.example.ArcSeekBar android:layout_width="match_parent" android:layout_height="wrap_content" app:arcWidth="30dp" app:arcRadius="150dp" app:minValue="0" app:maxValue="100" app:progressValue="50" app:progressColor="#ff0000" /> ``` 其中，app:arcWidth、app:arcRadius、app:minValue、app:maxValue、app:progressValue和app:progressColor是自定义的属性。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值