HarmonyOS自定義組件之圖層的使用
前言
HarmonyOS目前已經有較豐富的自定義組件了，但是多數自定義組件都沒有講到圖層這個概念，都是使用默認圖層進行繪制。這里就通過幾個小例子介紹一下HarmonyOS自定義組件中圖層概念和使用。
使用說明
1.HarmonyOS的繪制入口
1.1 DrawTask接口
HarmonyOS的Component組件對外提供了一個DrawTask接口，通過addDrawTask方法為組件添加一個DrawTask，讓開發者可以進行自定義繪制邏輯。首先我們看下DrawTask的描述：
- public interface DrawTask {
- int BETWEEN_BACKGROUND_AND_CONTENT = 1;
- int BETWEEN_CONTENT_AND_FOREGROUND = 2;
- void onDraw(Component component, Canvas canvas);
- }
1.2 onDraw繪制方法
這個接口中只有一個onDraw方法，做移動開發的同學對這個名稱的方法應該都很熟悉，在這個回調里系統提供了一塊canvas畫布，我們可以調用canvas的api進行一些基礎圖形的組合繪制。
2.HarmonyOS圖層介紹
2.1 圖層概念介紹
HarmonyOS為每個組件定義了5個圖層，從下往上分別為：Background -> UserLayer1 -> Content -> UserLayer2 -> Foreground，并且繪制流程也是按照從下往上的順序進行繪制的，這點其實和我們熟悉的View的繪制流程基本一致。這中設計和PS中的圖層概念基本一致，通過構建多個圖層分別進行操作，最終再合成為一個圖層渲染到屏幕上。我們可以用下面這圖來理解：
在這個圖層結構中，有兩個layer是提供給上層應用使用的，分別如圖中的UserLayer1和UserLayer2。他們分別位于背景與內容之間，內容與前景之間。其中，背景，內容，前景為系統私有，應用層無法對其進行干預。(這里補充說明一點，從官方API文檔說明來看是存在Foreground圖層的，但是實際中尚不清楚系統是如何使用該圖層，個人猜測應該是留給列表的滾動條這類場景使用。)
2.2 圖層概念實踐
在第一節的DrawTask接口介紹中，里面定義和圖層相關的兩個常量：BETWEEN_BACKGROUND_AND_CONTENT 和 BETWEEN_CONTENT_AND_FOREGROUND，對應的就是上圖中的兩個User Layer。
下面我們用代碼來實踐一下這個圖層結構和這兩個常量的作用。
自定義一個Text組件，分別在上圖中的兩個UserLayer中繪制不同顏色的實心矩形：
- public class CustomText extends Text {
- public CustomText(Context context, AttrSet attrSet) {
- super(context, attrSet);
- init();
- }
- private void prepare() {
- // 繪制紅色背景
- ShapeElement background = new ShapeElement();
- background.setShaderType(ShapeElement.RECTANGLE);
- background.setRgbColor(new RgbColor(255,0,0));
- setBackground(background);
- // 繪制白色文字
- setText("你好你好你好你好你好");
- setTextColor(Color.WHITE);
- }
- private void init() {
- prepare();
- // 在BETWEEN_BACKGROUND_AND_CONTENT圖層上繪制藍色矩形
- addDrawTask(new BackDrawTask(), DrawTask.BETWEEN_BACKGROUND_AND_CONTENT);
- // 在BETWEEN_CONTENT_AND_FOREGROUND圖層上繪制綠色矩形
- addDrawTask(new ForeDrawTask(), DrawTask.BETWEEN_CONTENT_AND_FOREGROUND);
- }
- // BETWEEN_BACKGROUND_AND_CONTENT
- private static class BackDrawTask implements DrawTask {
- @Override
- public void onDraw(Component component, Canvas canvas) {
- final int offset = 50;
- Paint paint = new Paint();
- paint.setStyle(Paint.Style.FILL_STYLE);
- paint.setColor(Color.BLUE);
- canvas.drawRect(new Rect(offset, offset, component.getWidth() - offset, component.getHeight() - offset), paint);
- }
- }
- // BETWEEN_CONTENT_AND_FOREGROUND
- private static class ForeDrawTask implements DrawTask {
- @Override
- public void onDraw(Component component, Canvas canvas) {
- final int offset = 100;
- Paint paint = new Paint();
- paint.setStyle(Paint.Style.FILL_STYLE);
- paint.setColor(Color.GREEN);
- canvas.drawRect(new Rect(offset, offset, component.getWidth() - offset, component.getHeight() - offset), paint);
- }
- }
布局代碼如下：
- <DirectionalLayout
- xmlns:ohos="http://schemas.huawei.com/res/ohos"
- ohos:height="match_parent"
- ohos:width="match_parent"
- ohos:alignment="center"
- ohos:orientation="vertical">
- <com.example.myapplication.CustomText
- ohos:height="300vp"
- ohos:width="300vp"
- ohos:layout_alignment="horizontal_center"
- ohos:text_size="40vp" />
- </DirectionalLayout>
運行項目，我們來看下實際的渲染效果，的確符合預期。
從目視的垂直方向，從底部往上的內容依次是：
最底層的紅色背景(Background)，
自定義的藍色矩形(BackDrawTask)，
Text自己的文本內容(Content)，
自定義的綠色矩形(ForeDrawTask)。
3.HarmonyOS圖層的使用
3.1 繼承Component的自定義組件
當我們繼承Component去實現自定義組件時，這時候不論選用哪個圖層進行繪制都是一樣。因為兩個UserLayer都是位于Background圖層之上，而默認的Component組件并沒有內容層和前景的默認繪制，因此可以忽略這兩個圖層。
3.2 通過圖層實現水波紋效果
當我們繼承系統組件，系統組件的內容層和前景層都有內部繪制邏輯，因此我們慎重選擇UserLayer圖層了。
給自定義Button添加一個水波紋的觸摸反饋效果**(水波紋效果是需要繪制在button文字之下，button背景之上，因此使用 BETWEEN_BACKGROUND_AND_CONTENT)**：
- public class CustomButton extends Button implements Component.TouchEventListener, Component.DrawTask {
- private float downX, downY;
- private int maxRadius;
- private float currentRadius;
- private final Paint paint = new Paint();
- {
- paint.setColor(Color.YELLOW);
- paint.setStyle(Paint.Style.FILL_STYLE);
- }
- private AnimatorValue av = new AnimatorValue();
- public CustomButton(Context context, AttrSet attrSet) {
- super(context, attrSet);
- av.setValueUpdateListener((animatorValue, v) -> {
- currentRadius = maxRadius * v;
- invalidate();
- });
- init();
- }
- @Override
- public boolean onTouchEvent(Component component, TouchEvent touchEvent) {
- if (touchEvent.getAction() == TouchEvent.PRIMARY_POINT_DOWN) {
- if (maxRadius == 0) {
- int w = component.getWidth();
- int h = component.getHeight();
- maxRadius = (int) Math.sqrt(w * w + h * h);
- }
- int index = touchEvent.getIndex();
- MmiPoint pointer = touchEvent.getPointerPosition(index);
- downX = pointer.getX();
- downY = pointer.getY();
- av.cancel();
- av.start();
- return true;
- } else if (touchEvent.getAction() == TouchEvent.PRIMARY_POINT_UP) {
- av.cancel();
- currentRadius = 0;
- invalidate();
- return true;
- }
- return false;
- }
- private void init() {
- setTouchEventListener(this);
- addDrawTask(this, DrawTask.BETWEEN_BACKGROUND_AND_CONTENT);
- }
- @Override
- public void onDraw(Component component, Canvas canvas) {
- canvas.drawCircle(downX, downY, currentRadius, paint);
- }
- }
效果如下：
3.3 通過圖層實現蒙層效果
給自定義Image增加一個顏色遮罩效果**(圖片蒙層是在圖片內容上加一個遮罩，因此需要在圖片之上進行蒙層繪制，因此使用 BETWEEN_CONTENT_AND_FOREGROUND)**：
- public class CustomImage extends Image implements Component.DrawTask {
- private final Paint paint = new Paint();
- {
- paint.setColor(Color.YELLOW);
- paint.setStyle(Paint.Style.FILL_STYLE);
- paint.setAlpha(0.3f);
- }
- public CustomImage(Context context, AttrSet attrSet) {
- super(context, attrSet);
- // 圖片蒙層是在圖片內容上加一個遮罩，因此需要在內容層和前景層進行蒙層繪制
- addDrawTask(this, DrawTask.BETWEEN_CONTENT_AND_FOREGROUND);
- }
- @Override
- public void onDraw(Component component, Canvas canvas) {
- canvas.drawRect(new Rect(0, 0, component.getWidth(), component.getHeight()), paint);
- }
- }
4.效果展示
效果如下，左邊為原始Image，右邊的為添加蒙版的Image：
總結
以上就是關于鴻蒙圖層的介紹，核心內容概括如下：
- HarmonyOS為每個組件定義了5個圖層，從下往上分別為：Background、UserLayer1、Content、UserLayer2、Foreground。
- HarmonyOS自定義組件能夠使用的圖層有兩個，分別位于Background和Content、Content和Foreground之間。
- 靈活的選擇繪制圖層，可以實現特殊的UI效果，例如水波紋觸摸反饋、圖片遮罩蒙層效果等。
文章相關附件可以點擊下面的原文鏈接前往下載
https://harmonyos.51cto.com/resource/1612
