美文网首页
UI线性渐变

UI线性渐变

作者: Lost_Robot | 来源:发表于2018-09-11 17:31 被阅读8次

布局实现:
UI 设计:

background-image: linear-gradient(-180deg, #4AA0FF 0%, #2173FF 100%);

转换为android的UI,实现:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!--实现应用背景颜色渐变-->
    <gradient
        android:startColor="#4AA0FF"
        android:endColor="#2173FF"
        android:angle="270"
        android:type="linear"/>
</shape>

//-------------------------------------

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

  1. 在res中建立drawable文件夹。
  2. 在drawable文件夹中建立shape.xml。
  3. shape.xml的代码如下:
  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)
关于透明度:

Android开发中经常会用到色值的透明度,比如要70%透明或者30%透明,这时候就有点犯难了,要么Google,要么借助PS等工具,其实都比较麻烦,下面将把0到100的透明度按照5%的梯度列出,方便收藏使用。
其实在开发的过程中我们会经常遇到类似的情况,一些小工具就能方便快速的解决我们遇到的问题,如果你有好的收藏或问题欢迎在留言区分享。
hex color transparency (透明度十六进制表示法)

  • 100% — FF
  • 95% — F2
  • 90% — E6
  • 85% — D9
  • 80% — CC
  • 75% — BF
  • 70% — B3
  • 65% — A6
  • 60% — 99
  • 55% — 8C
  • 50% — 80
  • 45% — 73
  • 40% — 66
  • 35% — 59
  • 30% — 4D
  • 25% — 40
  • 20% — 33
  • 15% — 26
  • 10% — 1A
  • 5% — 0D
  • 0% — 00
    例子:#22ffffff

相关文章

  • UI线性渐变

    布局实现:UI 设计: 转换为android的UI,实现: 在res中建立drawable文件夹。 在drawab...

  • 线性渐变

    线性渐变 linear-gradient 渐变分4种 线性渐变 径向渐变 重复线性渐变 重复径向渐变重点学习线性渐...

  • 转载:Android绘图Canvas十八般武器之Shader详解

    LinearGradient 线性渐变渲染器 LinearGradient中文翻译过来就是线性渐变的意思。线性渐变...

  • HTML中canvas线性渐变的使用方法:

    HTML中canvas线性渐变的使用方法: canvas渐变分为两种 ,下面进行对线性渐变的讲解: .线性渐变; ...

  • 带有斜杠的进度条

    线性渐变 径向渐变 重复线性渐变 例子 css html 效果图

  • canvas入门基础3 完结篇~

    线性渐变 线性渐变颜色linear.addColorStop(offset,color) xstart:渐变开始点...

  • CSS3新特性初识

    渐变 转换(又称变形) 过渡 多列 动画 复杂选择器 渐变 线性渐变 径向渐变 重复渐变(线性-径向渐变) 转换 ...

  • 渐变色简单实现

    关于实现渐变色的解答,渐变分为线性渐变和径向渐变。 一、 线性渐变(Linear Gradients)- 向下/向...

  • canvas渐变

    渐变有线性渐变和径向渐变两种 线性渐变:### create Linear Gradient (四个参数)...

  • canvas的渐变效果

    线性渐变 径向渐变

网友评论

      本文标题:UI线性渐变

      本文链接:https://www.haomeiwen.com/subject/mjwsgftx.html