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

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

定义组件类

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

代码语言：javascript复制

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。

使用自定义组件

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

代码语言：javascript复制

<?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 个设计模式逐个进行说明。这样一方面可以使读者了解真实的软件开发工作中每个设计模式的运用场景和想要解决的问题；另一方面通过对这些问题的解决过程进行说明，让读者明白在编写代码时如何判断使用设计模式的利弊，并合理运用设计模式。

对设计模式感兴趣而且希望随学随用的读者通过本书可以快速跨越从理解到运用的门槛；希望学习Python GUI 编程的读者可以将本书中的示例作为设计和开发的参考；使用Python 语言进行图像分析、数据处理工作的读者可以直接以本书中的示例为基础，迅速构建自己的系统架构。

python 小程序 gui

0 人点赞