自学鸿蒙应用开发（30）- 自定义UI组件（1）

面向对象思考

发布于 2021-03-16 11:12:50

4220

发布于 2021-03-16 11:12:50

文章被收录于专栏：C++核心准则原文翻译C++核心准则原文翻译

任何一种开发工具也不可能为开发者提供所有的组件，根据现有组件定义自己的组件也就成为必需。接下来的几篇文章我们定义一个多层圆弧形进度条。本文是第一篇。

定义组件类

首先定义一个Component的派生类并简单地定义几个构造函数。

package com.components.cusomized;

import ohos.agp.components.AttrSet;
import ohos.agp.components.Component;
import ohos.agp.render.Canvas;
import ohos.agp.utils.Color;
import ohos.app.Context;
import ohos.hiviewdfx.HiLog;
import ohos.hiviewdfx.HiLogLabel;
import ohos.multimodalinput.event.TouchEvent;

public class MultiRoundProgressBar extends Component {
    // HiLogLabel
    private static final HiLogLabel Label = new HiLogLabel(HiLog.LOG_APP, 0x00101, "MultiRoundProgressBar");

    public MultiRoundProgressBar(Context context) {
        super(context);
     }

    public MultiRoundProgressBar(Context context, AttrSet attrSet) {
        super(context, attrSet);
    }

    public MultiRoundProgressBar(Context context, AttrSet attrSet, String styleName) {
        super(context, attrSet, styleName);
    }

    public MultiRoundProgressBar(Context context, AttrSet attrSet, int resId) {
        super(context, attrSet, resId);
    }
}

这个目前没有任何功能，只是先占一个地方。稍微需要注意一下的是它所属的package为：com.components.cusomized。

使用自定义组件

可以像鸿蒙原生组件一样使用自定义组件：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:text_helloworld"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="$graphic:background_ability_main"
        ohos:layout_alignment="horizontal_center"
        ohos:text="$string:HelloWorld"
        ohos:text_size="50"
        />
    <com.components.cusomized.MultiRoundProgressBar
        ohos:id="$+id:mrprogressId"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#00FF00"
        />
</DirectionalLayout>

代码第16行通过package+类名的方式使用自定义组件。

显示效果

下图中绿色部分就是自定义组件的表示区域。

下一篇文章我们继续说明如何为自定义组件定义描画动作。

作者著作介绍

《实战Python设计模式》是作者去年3月份出版的技术书籍，该书利用Python 的标准GUI 工具包tkinter，通过可执行的示例对23 个设计模式逐个进行说明。这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题；另一方面通过对这些问题的解决过程进行说明，让读者明白在编写代码时如何判断使用设计模式的利弊，并合理运用设计模式。