专栏首页C++核心准则原文翻译自学HarmonyOS应用开发(47)- 自定义switch组件

自学HarmonyOS应用开发(47)- 自定义switch组件

HarmonyOS应用开发都会用到各种各样的UI组件,开发者可以根据需求在布局文件设定UI组件各种属性。但是需求是多种多样

例如可以以如下方式使用switch组件:

<Switch
    ohos:id="$+id:btn_switch"
    ohos:height="30vp"
    ohos:width="60vp"  
    ohos:text_state_off="OFF"
    ohos:text_state_on="ON"/>

这段代码的显示效果如下:

有效状态时的表示只能说差强人意,相关文档中倒是提供了使用代码定制switch组件的方法,但是每次使用,每个组件都这样处理的话还是太麻烦了。本文介绍定制switch组件的方法。

定义自定义组件类

我们定义一个switch组件的派生类,通过这个类封装我们需要的定制处理:

package xwg.harmony.stopwatch;

import ohos.agp.colors.RgbColor;
import ohos.agp.components.AttrSet;
import ohos.agp.components.ComponentState;
import ohos.agp.components.Switch;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.components.element.StateElement;
import ohos.agp.utils.Color;
import ohos.app.Context;

public class ColorSwitch extends Switch {
    Color textColorOn = Color.BLACK;
    Color textColorOff = Color.BLACK;
    public ColorSwitch(Context context, AttrSet attrSet) {
        super(context, attrSet);
        Initialize(attrSet);
    }

    private void Initialize(AttrSet attrSet) {
        float switch_radius = 50;
        if (attrSet.getAttr("switch_radius").isPresent()) {
            switch_radius = attrSet.getAttr("switch_radius").get().getFloatValue();
        }

        // 开启状态下滑块的样式
        ShapeElement elementThumbOn = new ShapeElement();
        elementThumbOn.setShape(ShapeElement.OVAL);
        elementThumbOn.setRgbColor(RgbColor.fromArgbInt(0xFF1E90FF));
        elementThumbOn.setCornerRadius(switch_radius);
        // 开启状态下轨迹样式
        ShapeElement elementTrackOn = new ShapeElement();
        elementTrackOn.setShape(ShapeElement.RECTANGLE);
        elementTrackOn.setRgbColor(RgbColor.fromArgbInt(0xFF87CEFA));
        elementTrackOn.setCornerRadius(switch_radius);
        elementTrackOn.setStroke(1, RgbColor.fromRgbaInt(0x000000));
        // 关闭状态下滑块的样式
        ShapeElement elementThumbOff = new ShapeElement();
        elementThumbOff.setShape(ShapeElement.OVAL);
        elementThumbOff.setRgbColor(RgbColor.fromArgbInt(0xFFAFAFAF));
        elementThumbOff.setCornerRadius(switch_radius);
        // 关闭状态下轨迹样式
        ShapeElement elementTrackOff = new ShapeElement();
        elementTrackOff.setShape(ShapeElement.RECTANGLE);
        elementTrackOff.setRgbColor(RgbColor.fromArgbInt(0xFF808080));
        elementTrackOff.setCornerRadius(switch_radius);
        elementTrackOff.setStroke(1, RgbColor.fromRgbaInt(0x000000));

        setTrackElement(trackElementInit(elementTrackOn, elementTrackOff));
        setThumbElement(thumbElementInit(elementThumbOn, elementThumbOff));
    }

    private StateElement trackElementInit(ShapeElement on, ShapeElement off){
        StateElement trackElement = new StateElement();
        trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
        trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
        return trackElement;
    }
    private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {
        StateElement thumbElement = new StateElement();
        thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);
        thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);
        return thumbElement;
    }
}

这是ColorSwitch类的完整代码,读者直接复制粘贴之后可以在自己的开发中使用。

代码中借用了华为官方文档中的用法,对switch组件的表示颜色进行修改;定义了一个自定义switch_radius,用于指定组件两侧的圆弧大小。

我们将这个文件放置在如下图所示的位置:

在布局中使用自定义组件

以下是在布局文件中使用ColorSwitch的示例。请注意这不是完整代码。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:xdw="http://schemas.huawei.com/res/ohos-auto"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical"
    ohos:alignment="top"
    ohos:padding="10vp">
    <DirectionalLayout
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:orientation="horizontal"
        ohos:alignment="top">
        ...
        <xwg.harmony.stopwatch.ColorSwitch
            ohos:id="$+id:btn_switch"
            ohos:height="30vp"
            ohos:width="80vp"
            ohos:layout_alignment="vertical_center"
            ohos:text_size="20fp"
            ohos:text_state_off="$string:off"
            ohos:text_state_on="$string:on"
            ohos:text_color_on="#FFFFFF"
            xdw:switch_radius="50"/>
    </DirectionalLayout>
    ...
</DirectionalLayout>

注意16行导入ColorSwitch的记法和25行使用自定义属性的方法。以下是程序执行时的效果:

参考资料

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-overview-0000000000500404

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-switch-0000001060806006

作者著作介绍

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

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

本文分享自微信公众号 - 面向对象思考(OOThinkingDalian),作者:面向对象思考

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-06-05

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 自学HarmonyOS应用开发(66)- 自定义布局(1)

    Harmony应用开发文档中为Java开发者提供了6种UI布局,可以满足开发者的大部分需求。但是有一个问题是:这些布局一旦显示,用户便无法进行调整。我们开发一个...

    面向对象思考
  • 自学HarmonyOS应用开发(67)- 自定义布局(2)

    除了这两个限制之外,调整对象组件的类型/个数,分隔的组件的高度都可以任意指定。够灵活了吧。

    面向对象思考
  • 自学HarmonyOS应用开发(48)- Tablist组件进阶

    但是有一个问题是这篇文章,包括HarmonyOS应用开发的官方文档都只是实现了Tab切换的基本功能,对于每个Tab页内组件的处理没有详细说明。本文就来补上这个短...

    面向对象思考
  • 自学鸿蒙应用开发(10)- Switch组件

    如下面代码中20行和42行~49行所示,在获取Switch组件后,在Switch响应处理中根据Switch的当前状态为TimePicker设定是否像是为24小时...

    面向对象思考
  • 自学鸿蒙应用开发(30)- 自定义UI组件(1)

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

    面向对象思考
  • 自学HarmonyOS应用开发(65)- 为Tab组件使用图像资源

    用图像装饰UI组件可以让应用显得更专业,本文介绍Tab组件使用图像资源的方法。先看动作效果:

    面向对象思考
  • 自学HarmonyOS应用开发(54)- 校正定位偏差

    经过一番调查,结论是gps信号使用的是WGS-84坐标系,而高德地图使用的是GCJ-02火星坐标系,只有经过坐标变换才能显示正确的位置。这方面的文章网上有很多,...

    面向对象思考
  • Flutter开发-自定义组件

    剑行者
  • 自学HarmonyOS应用开发(59)- 处理拖动事件

    在Harmony应用中通过实现Component.DraggedListener接口处理拖动事件,这个接口的方法一共有6个,这里我们只是用其中的3个:

    面向对象思考
  • 自学鸿蒙应用开发(33)- 在布局中使用自定义UI组件

    组建容器类ArcProgressBarContainer负责协调每个ArcProgressBar的描画动作。

    面向对象思考
  • 自学鸿蒙应用开发(32)- 为UI组件定义接口

    前一篇文章为自定义组件实现了描画功能,但是代码中的描画动作都是硬编码,无法由开发者控制。本文对之前的代码进行重构,以对外提供控制接口。

    面向对象思考
  • 自学鸿蒙应用开发(26)- 自定义CommonDialog

    上一篇文章中说过,直接使用鸿蒙系统中的CommonDialog大致是下面的效果:

    面向对象思考
  • 自学鸿蒙应用开发(27)- 自定义ListDialog

    这个效果过于简陋,无法用于实际的产品开发。本文介绍如何定制自己的ListDialog。还是先看演示视频:

    面向对象思考
  • 自学鸿蒙应用开发(34)- 为自定义UI组件增加触控处理

    除了可以描画功能之外,还可以为自定义UI组件增加各种响应,本文以触控事件进行说明。先看演示效果:

    面向对象思考
  • 自学鸿蒙应用开发(31)- 为UI组件定义描画动作

    UI组件的描画动作由应用架构触发,而自定义组件的开发者只要实现并登录描画接口即可。

    面向对象思考
  • 安卓开发_浅谈自定义组件

    听着music睡
  • 自学HarmonyOS应用开发(64)- 处理屏幕旋转

    旋转屏幕是手机用户的一个日常操作,本文介绍如何在屏幕旋转时自动调整屏幕布局的方法。效果如下:

    面向对象思考
  • 自学HarmonyOS应用开发(57)- 与Service进行交互

    构建自己的Connection类 StopWatchServiceConnection类的主要功能有两个:一是接受连接成功通知并获取服务端传过来的用于通信的IR...

    面向对象思考
  • 自学HarmonyOS应用开发(49)- 引入地图功能

    秒表应用的功能就是计时,其中有一种情况就是计算地图上两点之间移动的时间。但是作者在实际使用这个应用的时候,经常会忘了在预定地点开始和停止计时。解决这个问题的想法...

    面向对象思考

扫码关注云+社区

领取腾讯云代金券