服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android UI效果之绘图篇(四)

Android UI效果之绘图篇(四)

2021-06-17 14:22_Hi_xiaoyu Android

这篇文章主要介绍了Android UI效果之绘图篇,针对Android开发中的UI效果设计模块中Shader进行讲解,感兴趣的小伙伴们可以参考一下

上一篇博文说到了shader的五个子类
- bitmapshader
- lineargradient
- radialgradient
- sweepgradient
- composeshader
其中bitmapshader和lineargradient已经做了说明,今天就把剩余的三个shader补充一下
3. radialgradient
先看下构造方法

?
1
2
3
4
5
6
7
8
9
10
11
12
/**
  @param centerx   中心x坐标
  @param centery   中心y坐标
  @param radius   半径
  @param centercolor 开始颜色
  @param edgecolor  结束颜色
  @param tilemode  the shader tiling mode
  */
 public radialgradient(float centerx, float centery, float radius,int centercolor, int edgecolor, @nonnull tilemode tilemode)
 
 
public radialgradient(float centerx, float centery, float radius,@nonnull int colors[], @nullable float stops[], @nonnull tilemode tilemode)

第一个构造方法已经进行了文档说明,比较简单,而第二个构造方法和lineargradient同理,就不再赘述,使用方法也基本类似,这里直接看下效果即可

?
1
2
3
radialgradient rg = new radialgradient(canvas.getwidth()/2, canvas.getheight()/2, 200, 0xffff0000, 0xff0000ff, shader.tilemode.[clamp|repeat |mirror]);
    paint.setshader(rg);
    canvas.drawrect(0, 0, canvas.getwidth(), canvas.getheight(), paint);

① clamp

Android UI效果之绘图篇(四)

② repeat

Android UI效果之绘图篇(四)

③ mirror

Android UI效果之绘图篇(四)

1、sweepgradient

?
1
2
3
4
5
6
7
8
/**
  *
  * @param cx  中心x坐标
  * @param cy  中心y坐标
  * @param color0 开始颜色
  * @param color1 结束颜色
  */
 public sweepgradient(float cx, float cy, int color0, int color1)

Android UI效果之绘图篇(四)

第一个构造方法比较简单,没什么好说的,效果的话类似于做煎饼皮,展开选择360度。主要看第二个构造方法

?
1
public sweepgradient(float cx, float cy,int colors[], float positions[])

cx、cy没什么好说的,中心点坐标,colors颜色数组,主要是positions,positions中每个item的取值范围在0f-1f之间,对于colors中相应颜色在图形中的位置

?
1
2
3
4
5
int[] colors = {0xffff0000, 0xff00ff00, 0xffffff00, 0xffffffff,0xff000000};
float[] positions = {0f,0.25f, 0.5f, 0.75f, 1f};
sweepgradient rg = new sweepgradient(canvas.getwidth() / 2, canvas.getheight() / 2, colors, positions);
paint.setshader(rg);
canvas.drawrect(0, 0, canvas.getwidth(), canvas.getheight(), paint);

Android UI效果之绘图篇(四)

composeshader

?
1
2
composeshader(shader shadera, shader shaderb, xfermode mode)
composeshader(shader shadera, shader shaderb, porterduff.mode mode)

composeshader,混合shader,看到构造方法,大家应该就已经会用composeshader,其实就是对两个shader进行取并集交集操作,遗忘了的同学可以翻看下上一篇文章,这里就不再演示了。

延伸 · 阅读

精彩推荐