Android线性渐变

布局实现:

1. 在res中建立drawable文件夹。

2. 在drawable文件夹中建立shape.xml。

3. shape.xml的代码如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" >

    <gradient
        android:angle="270"
        android:centerColor="#77333333"
        android:centerX="0.5"
        android:centerY="0.5"
        android:endColor="#ff666666"
        android:startColor="#ff666666"
        android:type="linear" />

    <corners android:radius="5dip" />

</shape>

4. shape的值有四种:rectangle-矩形;oval-椭圆;line-线;ring-环。

5. angle的值:从左到右为0;然后逆时针旋转,90度为从下到上,270为从上到下。

6. centerx和centery的值取0-1;表示中间点的位置,如下面三幅图:中间点分别是0,0.5,1。中间点为0的,则渐变的中间色的位置在最上面;中间点为0.5的,则渐变的中间色在屏幕中间;中间点为1 的,则中间点在屏幕下部。

7. startcolor、centercolor、endcolor为渐变色的开始、中间、最后的颜色值。

8. type的值有三种:linear-线性;radial-径向;sweep-3D效果。

9. color的radius值表示边角的弧度半径。

代码实现:

一、LinearGradient线性渐变

在android平台中提供了两种重载方式来实例化该类分别为,他们的不同之处为参数中第一种方法可以用颜色数组,和位置来实现更细腻的过渡效果,比如颜色采样int[] colors数组中存放20种颜色,则渐变将会逐一处理。而第二种方法参数仅为起初颜色color0和最终颜色color1。

LinearGradient(float x0, float y0, float x1, float y1, int[] colors, float[] positions, Shader.TileMode tile)

LinearGradient(float x0, float y0, float x1, float y1, int color0, int color1, Shader.TileMode tile)

使用实例如下:
Paint p=new Paint();
LinearGradient lg=new LinearGradient(0,0,100,100,Color.RED,Color.BLUE,Shader.TileMode.MIRROR);  //

参数一为渐变起初点坐标x位置,参数二为y轴位置,参数三和四分辨对应渐变终点,最后参数为平铺方式,这里设置为镜像.

刚才Android开发网已经讲到Gradient是基于Shader类,所以我们通过Paint的setShader方法来设置这个渐变,代码

如下:

p.setShader(lg);
canvas.drawCicle(0,0,200,p); //参数3为画圆的半径,类型为float型。

二、 RadialGradient镜像渐变

有了上面的基础,我们一起来了解下径向渐变。和上面参数唯一不同的是,径向渐变第三个参数是半径,其他的和线性渐变

相同。

RadialGradient(float x, float y, float radius, int[] colors, float[] positions, Shader.TileMode tile) 
RadialGradient(float x, float y, float radius, int color0, int color1, Shader.TileMode tile)

三、 SweepGradient角度渐变

对于一些3D立体效果的渐变可以尝试用角度渐变来完成一个圆锥形,相对来说比上面更简单,前两个参数为中心点,然后通过载入的颜色来平均的渐变渲染。

SweepGradient(float cx, float cy, int[] colors, float[] positions)  //对于最后一个参数SDK上的描述为May be NULL. The relative position of each corresponding color in the colors array, beginning with 0 and ending with 1.0. If the values are not monotonic, the drawing may produce unexpected results. If positions is NULL, then the colors are automatically spaced evenly.,所以Android123建议使用下面的重载方法,本方法一般为NULL即可。
SweepGradient(float cx, float cy, int color0, int color1)

时间: 2024-07-29 08:33:23

Android线性渐变的相关文章

Android获得线性渐变某点的颜色

安卓官方确实提供了好多非常强大的工具给我们了,例如我们最近经常在shape中加入gradient(渐变),像我的项目中用的是线性渐变, [html] view plain copy <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <corners andr

进度条-线性渐变

/* 进度条 */div.progress { width: 600px; margin: 10px auto; height: 20px; line-height: 20px; font-size: 14px; background: #F7F7F7; border-radius: 4px; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);}div.progress div.bar { float: left; width: 60%; backgr

再说CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

CSS3渐变——线性渐变

渐变背景一直以来在Web页面中都是一种常见的视觉元素.但一直以来,Web设计师都是通过图形软件设计这些渐变效果,然后以图片形式或者背景图片的形式运用到页面中.Web页面上实现的效果,仅从页面的视觉效果上来看,与设计并无任何差异. 事实上这种方法是比较麻烦的,因为首先需要设计师进行设计,然后进行切图,在通过样式应用到页面中.另外,在实际应用中可扩展性差,还直接影响页面性能. 值得庆幸的是,W3C组织将渐变设计收入到CSS3标准中,让广大的前端设计师直接受益,可以直接通过CSS3的渐变属性制作类似渐

Expo大作战(三十四)--expo sdk api之LinearGradient(线性渐变),KeepAwake(保持屏幕不休眠),IntentLauncherAndroid,Gyroscope,

简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人修改补充+demo测试的形式,对expo进行一次大补血!欢迎加入expo兴趣学习交流群:597732981 [之前我写过一些列关于expo和rn入门配置的东i西,大家可以点击这里查看:从零学习rn开发] 相关文章: Expo大作战(一)--什么是expo,如何安装expo clinet和xde,xd

CSS3 线性渐变(linear-gradient) 兼容IE8,IE9

一.线性渐变在 Mozilla 下的应用     语法: 1 -moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* ) 参数:其共有三个参数,第一个参数表示线性渐变的方向,top 是从上到下.left 是从左到右,如果定义成 left top,那就是从左上角到右下角.第二个和第三个参数分别是起点颜色和终点颜色.你还可以在它们之间插入更多的参数,表示多种颜色的

css3线性渐变

css3渐变分为线性渐变(linear-gradient)和径向渐变(radial-gradient).下面简单介绍下linear-gradient的应用. 以下都是在webkit内核浏览器下进行测试,firefox和opera只需更改下前缀即可,IE下则有特定的滤镜来实现. -webkit-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]* )//最新发布书写语法

利用线性渐变阴影旋转实现晴天效果

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no

线性渐变和放射性渐变

创造放射性渐变:context.createRadialGradient(x0,y0,r0,x1,y1,r1); 参数:x0:渐变的开始圆的 x 坐标, 参数:y0:渐变的开始圆的 y 坐标, 参数:r0:开始圆的半径, 参数:x1:渐变的结束圆的 x 坐标, 参数:y1:渐变的结束圆的 y 坐标, 参数:r1:结束圆的半径: 创造线性渐变:context.createLinearGradient(x0,y0,r0,x1,y1,r1); 放射性渐变和线性渐变的使用放射一样,参数也基本相同:不同的