HarmonyOS自定义组件之图层的使用

开发 前端 OpenHarmony
HarmonyOS目前已经有较丰富的自定义组件了,但是多数自定义组件都没有讲到图层这个概念,都是使用默认图层进行绘制。这里就通过几个小例子介绍一下HarmonyOS自定义组件中图层概念和使用。

[[441917]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

HarmonyOS目前已经有较丰富的自定义组件了,但是多数自定义组件都没有讲到图层这个概念,都是使用默认图层进行绘制。这里就通过几个小例子介绍一下HarmonyOS自定义组件中图层概念和使用。

使用说明

1.HarmonyOS的绘制入口

1.1 DrawTask接口

HarmonyOS的Component组件对外提供了一个DrawTask接口,通过addDrawTask方法为组件添加一个DrawTask,让开发者可以进行自定义绘制逻辑。首先我们看下DrawTask的描述:

  1. public interface DrawTask { 
  2.       int BETWEEN_BACKGROUND_AND_CONTENT = 1; 
  3.       int BETWEEN_CONTENT_AND_FOREGROUND = 2; 
  4.  
  5.       void onDraw(Component component, Canvas canvas); 
  6.   } 

 1.2 onDraw绘制方法

这个接口中只有一个onDraw方法,做移动开发的同学对这个名称的方法应该都很熟悉,在这个回调里系统提供了一块canvas画布,我们可以调用canvas的api进行一些基础图形的组合绘制。

2.HarmonyOS图层介绍

2.1 图层概念介绍

HarmonyOS为每个组件定义了5个图层,从下往上分别为:Background -> UserLayer1 -> Content -> UserLayer2 -> Foreground,并且绘制流程也是按照从下往上的顺序进行绘制的,这点其实和我们熟悉的View的绘制流程基本一致。这中设计和PS中的图层概念基本一致,通过构建多个图层分别进行操作,最终再合成为一个图层渲染到屏幕上。我们可以用下面这图来理解:

#星光计划2.0#HarmonyOS自定义组件之图层的使用-鸿蒙HarmonyOS技术社区

在这个图层结构中,有两个layer是提供给上层应用使用的,分别如图中的UserLayer1和UserLayer2。他们分别位于背景与内容之间,内容与前景之间。其中,背景,内容,前景为系统私有,应用层无法对其进行干预。(这里补充说明一点,从官方API文档说明来看是存在Foreground图层的,但是实际中尚不清楚系统是如何使用该图层,个人猜测应该是留给列表的滚动条这类场景使用。)

2.2 图层概念实践

在第一节的DrawTask接口介绍中,里面定义和图层相关的两个常量:BETWEEN_BACKGROUND_AND_CONTENT 和 BETWEEN_CONTENT_AND_FOREGROUND,对应的就是上图中的两个User Layer。

下面我们用代码来实践一下这个图层结构和这两个常量的作用。

自定义一个Text组件,分别在上图中的两个UserLayer中绘制不同颜色的实心矩形:

  1. public class CustomText extends Text { 
  2.  
  3.     public CustomText(Context context, AttrSet attrSet) { 
  4.         super(context, attrSet); 
  5.         init(); 
  6.     } 
  7.  
  8.     private void prepare() { 
  9.         // 绘制红色背景 
  10.         ShapeElement background = new ShapeElement(); 
  11.         background.setShaderType(ShapeElement.RECTANGLE); 
  12.         background.setRgbColor(new RgbColor(255,0,0)); 
  13.         setBackground(background); 
  14.         // 绘制白色文字 
  15.         setText("你好你好你好你好你好"); 
  16.         setTextColor(Color.WHITE); 
  17.     } 
  18.  
  19.     private void init() { 
  20.         prepare(); 
  21.         // 在BETWEEN_BACKGROUND_AND_CONTENT图层上绘制蓝色矩形 
  22.         addDrawTask(new BackDrawTask(), DrawTask.BETWEEN_BACKGROUND_AND_CONTENT); 
  23.         // 在BETWEEN_CONTENT_AND_FOREGROUND图层上绘制绿色矩形 
  24.         addDrawTask(new ForeDrawTask(), DrawTask.BETWEEN_CONTENT_AND_FOREGROUND); 
  25.     } 
  26.  
  27.     // BETWEEN_BACKGROUND_AND_CONTENT 
  28.     private static class BackDrawTask implements DrawTask { 
  29.         @Override 
  30.         public void onDraw(Component component, Canvas canvas) { 
  31.             final int offset = 50; 
  32.             Paint paint = new Paint(); 
  33.             paint.setStyle(Paint.Style.FILL_STYLE); 
  34.             paint.setColor(Color.BLUE); 
  35.             canvas.drawRect(new Rect(offset, offset, component.getWidth() - offset, component.getHeight() - offset), paint); 
  36.         } 
  37.     } 
  38.  
  39.     // BETWEEN_CONTENT_AND_FOREGROUND 
  40.     private static class ForeDrawTask implements DrawTask { 
  41.         @Override 
  42.         public void onDraw(Component component, Canvas canvas) { 
  43.             final int offset = 100; 
  44.             Paint paint = new Paint(); 
  45.             paint.setStyle(Paint.Style.FILL_STYLE); 
  46.             paint.setColor(Color.GREEN); 
  47.             canvas.drawRect(new Rect(offset, offset, component.getWidth() - offset, component.getHeight() - offset), paint); 
  48.         } 
  49.     } 

布局代码如下:

  1. <DirectionalLayout 
  2.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  3.     ohos:height="match_parent" 
  4.     ohos:width="match_parent" 
  5.     ohos:alignment="center" 
  6.     ohos:orientation="vertical"
  7.  
  8.     <com.example.myapplication.CustomText 
  9.         ohos:height="300vp" 
  10.         ohos:width="300vp" 
  11.         ohos:layout_alignment="horizontal_center" 
  12.         ohos:text_size="40vp" /> 
  13.  
  14. </DirectionalLayout> 

 运行项目,我们来看下实际的渲染效果,的确符合预期。

#星光计划2.0#HarmonyOS自定义组件之图层的使用-鸿蒙HarmonyOS技术社区

从目视的垂直方向,从底部往上的内容依次是:

最底层的红色背景(Background),

自定义的蓝色矩形(BackDrawTask),

Text自己的文本内容(Content),

自定义的绿色矩形(ForeDrawTask)。

3.HarmonyOS图层的使用

3.1 继承Component的自定义组件

当我们继承Component去实现自定义组件时,这时候不论选用哪个图层进行绘制都是一样。因为两个UserLayer都是位于Background图层之上,而默认的Component组件并没有内容层和前景的默认绘制,因此可以忽略这两个图层。

3.2 通过图层实现水波纹效果

当我们继承系统组件,系统组件的内容层和前景层都有内部绘制逻辑,因此我们慎重选择UserLayer图层了。

给自定义Button添加一个水波纹的触摸反馈效果**(水波纹效果是需要绘制在button文字之下,button背景之上,因此使用 BETWEEN_BACKGROUND_AND_CONTENT)**:

  1. public class CustomButton extends Button implements Component.TouchEventListener, Component.DrawTask { 
  2.     private float downX, downY; 
  3.     private int maxRadius; 
  4.     private float currentRadius; 
  5.     private final Paint paint = new Paint(); 
  6.  
  7.     { 
  8.         paint.setColor(Color.YELLOW); 
  9.         paint.setStyle(Paint.Style.FILL_STYLE); 
  10.     } 
  11.  
  12.     private AnimatorValue av = new AnimatorValue(); 
  13.  
  14.     public CustomButton(Context context, AttrSet attrSet) { 
  15.         super(context, attrSet); 
  16.         av.setValueUpdateListener((animatorValue, v) -> { 
  17.             currentRadius = maxRadius * v; 
  18.             invalidate(); 
  19.         }); 
  20.         init(); 
  21.     } 
  22.  
  23.     @Override 
  24.     public boolean onTouchEvent(Component component, TouchEvent touchEvent) { 
  25.         if (touchEvent.getAction() == TouchEvent.PRIMARY_POINT_DOWN) { 
  26.             if (maxRadius == 0) { 
  27.                 int w = component.getWidth(); 
  28.                 int h = component.getHeight(); 
  29.                 maxRadius = (int) Math.sqrt(w * w + h * h); 
  30.             } 
  31.             int index = touchEvent.getIndex(); 
  32.             MmiPoint pointer = touchEvent.getPointerPosition(index); 
  33.             downX = pointer.getX(); 
  34.             downY = pointer.getY(); 
  35.             av.cancel(); 
  36.             av.start(); 
  37.             return true
  38.         } else if (touchEvent.getAction() == TouchEvent.PRIMARY_POINT_UP) { 
  39.             av.cancel(); 
  40.             currentRadius = 0; 
  41.             invalidate(); 
  42.             return true
  43.         } 
  44.         return false
  45.     } 
  46.  
  47.     private void init() { 
  48.         setTouchEventListener(this); 
  49.         addDrawTask(this, DrawTask.BETWEEN_BACKGROUND_AND_CONTENT); 
  50.     } 
  51.  
  52.     @Override 
  53.     public void onDraw(Component component, Canvas canvas) { 
  54.         canvas.drawCircle(downX, downY, currentRadius, paint); 
  55.     } 

效果如下:

#星光计划2.0#HarmonyOS自定义组件之图层的使用-鸿蒙HarmonyOS技术社区

3.3 通过图层实现蒙层效果

给自定义Image增加一个颜色遮罩效果**(图片蒙层是在图片内容上加一个遮罩,因此需要在图片之上进行蒙层绘制,因此使用 BETWEEN_CONTENT_AND_FOREGROUND)**:

  1. public class CustomImage extends Image implements Component.DrawTask { 
  2.     private final Paint paint = new Paint(); 
  3.  
  4.     { 
  5.         paint.setColor(Color.YELLOW); 
  6.         paint.setStyle(Paint.Style.FILL_STYLE); 
  7.         paint.setAlpha(0.3f); 
  8.     } 
  9.  
  10.     public CustomImage(Context context, AttrSet attrSet) { 
  11.         super(context, attrSet); 
  12.         // 图片蒙层是在图片内容上加一个遮罩,因此需要在内容层和前景层进行蒙层绘制 
  13.         addDrawTask(this, DrawTask.BETWEEN_CONTENT_AND_FOREGROUND); 
  14.     } 
  15.  
  16.     @Override 
  17.     public void onDraw(Component component, Canvas canvas) { 
  18.         canvas.drawRect(new Rect(0, 0, component.getWidth(), component.getHeight()), paint); 
  19.     } 

4.效果展示

效果如下,左边为原始Image,右边的为添加蒙版的Image:

#星光计划2.0#HarmonyOS自定义组件之图层的使用-鸿蒙HarmonyOS技术社区

总结

以上就是关于鸿蒙图层的介绍,核心内容概括如下:

  • HarmonyOS为每个组件定义了5个图层,从下往上分别为:Background、UserLayer1、Content、UserLayer2、Foreground。
  • HarmonyOS自定义组件能够使用的图层有两个,分别位于Background和Content、Content和Foreground之间。
  • 灵活的选择绘制图层,可以实现特殊的UI效果,例如水波纹触摸反馈、图片遮罩蒙层效果等。

文章相关附件可以点击下面的原文链接前往下载

https://harmonyos.51cto.com/resource/1612

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-11-01 10:21:36

鸿蒙HarmonyOS应用

2022-06-30 14:02:07

鸿蒙开发消息弹窗组件

2022-07-15 16:45:35

slider滑块组件鸿蒙

2022-04-24 15:17:56

鸿蒙操作系统

2022-06-20 15:43:45

switch开关鸿蒙

2021-03-09 15:23:45

鸿蒙HarmonyOS应用开发

2022-07-12 16:56:48

自定义组件鸿蒙

2021-09-15 10:19:15

鸿蒙HarmonyOS应用

2022-07-06 20:24:08

ArkUI计时组件

2022-05-20 14:34:20

list组件鸿蒙操作系统

2022-02-16 08:12:03

组件样式元素

2023-02-20 15:20:43

启动页组件鸿蒙

2021-11-22 10:00:33

鸿蒙HarmonyOS应用

2022-02-16 16:09:12

鸿蒙游戏操作系统

2021-11-24 10:02:53

鸿蒙HarmonyOS应用

2021-11-04 09:55:50

鸿蒙HarmonyOS应用

2021-10-26 10:07:02

鸿蒙HarmonyOS应用

2022-02-16 15:25:31

JS代码Canvas鸿蒙

2012-04-27 14:43:42

HTML5

2022-10-25 15:12:24

自定义组件鸿蒙
点赞
收藏

51CTO技术栈公众号