侵权投诉

HarmonyOS系统中基础UI组件

HarmonyOS开发者 2021-09-16 09:39 次阅读

一、UI组件概述

UI组件(以下简称“组件”),是构建界面的核心。

应用中所有的界面元素都是由组件(Component)和组件容器(ComponentContainer)对象构成。UI界面的构成如下图所示:

Component是绘制在屏幕上的一个对象,用户能与之交互。Java UI框架提供了创建UI界面的各类组件,比如:文本、按钮、图片、列表等。每个组件通过对数据和方法的简单封装,实现独立的可视、可交互功能单元。

ComponentContainer是一个用于容纳其他Component和ComponentContainer对象的容器。Java UI框架提供了一些标准布局功能的容器,它们继承自ComponentContainer,一般以“Layout”结尾,如DirectionalLayout、DependentLayout等(由此可以看出,其实布局就是ComponentContainer,同时布局也是一种组件)。

二、基础UI组件

Java UI框架提供了一部分Component和ComponentContainer的具体子类,即用于创建用户界面的各类组件,用户可通过组件进行交互操作,并获得响应。根据组件的功能,可以将组件分为布局类、显示类、交互类三类:

1. 布局类组件

布局类组件是提供了不同布局规范的组件容器,例如以单一方向排列的DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的PositionLayout等。

常见的布局类组件如表1所示:

表1 常见的布局类组件

97830ee4-1634-11ec-8fb8-12bb97331649.png

2. 显示类组件

显示类组件提供了单纯的内容显示,例如用于文本显示的Text,用于图像显示的Image等。

常见的显示类组件如表2所示:

表2 常见的显示类组件

97c12850-1634-11ec-8fb8-12bb97331649.png

3. 交互类组件

交互类组件提供了具体场景下与用户交互响应的功能,例如Button提供了点击响应功能,Slider提供了进度选择功能等。

常见的交互类组件如表3所示:

表3 常见的交互类组件

97d543e4-1634-11ec-8fb8-12bb97331649.png

关于基础UI组件的开发,开发者可点击下方官网链接进行学习

官网链接:

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

三、自定义UI组件

当Java UI框架提供的组件无法满足设计需求时,开发者就可以创建自定义组件,根据设计需求添加绘制任务,并定义组件的属性及事件响应,完成组件的自定义。目前,已有300+的自定义UI组件在码云社区开源,开发者可根据自己的需求,点击下方链接下载使用:

下载链接:

https://gitee.com/openharmony-tpc/tpc_resource

同基础UI组件一样,本文将自定义UI组件分为布局类、显示类、交互类三类。下面的章节将着重介绍自定义UI组件的使用。

1. 自定义布局类UI组件

自定义布局类组件是由开发者定义的具有特定布局规则的容器类组件,通过扩展ComponentContainer或其子类实现,将各子组件摆放到指定的位置,响应用户的滑动、拖拽等事件。

小编在码云社区找了一些较为常见的自定义布局类组件供大家参考,如表4所示:

表4 常见的自定义布局类组件

97ec598a-1634-11ec-8fb8-12bb97331649.png

本文将例举ShadowLayout布局,阐述自定义布局类组件的使用。

ShadowLayout是一个可以控制界面元素的阴影颜色、范围及显示边界的布局。效果展示如下:

依赖

开发者需在build.gradle中配置如下信息,引入组件库

1.在项目根目录下的build.gradle文件中,需进行如下配置:

allprojects { repositories { maven { url ‘https://s01.oss.sonatype.org/content/repositories/releases/’ } }}

2.在entry模块的build.gradle文件中,需进行如下配置:

dependencies { implementation(‘com.gitee.chinasoft_ohos1.0.0’)}

使用步骤

1.对布局的基础属性进行初始化,比如设置阴影半径范围、阴影颜色,及阴影大小等。

《com.lijiankun24.shadowlayout.v2.ShadowLayout ohos:height=“match_content” ohos:width=“match_content” ohos:layout_alignment=“center” ohos:shadowColor=“#660000” ohos:shadowDx=“0” ohos:shadowDy=“0” ohos:shadowRadius=“50” ohos:shadowSide=“0x1111” 》 《Image ohos:id=“$+id:image” ohos:height=“50vp” ohos:width=“50vp” ohos:layout_alignment=“center” ohos:background_element=“$graphic:background_ability_show” ohos:image_src=“$media:icon” ohos:scale_mode=“zoom_center” /》《/com.lijiankun24.shadowlayout.v2.ShadowLayout》

ShadowLayout属性说明如表5所示:

表5 ShadowLayout自定义属性

2.通过initComponent()方法初始化组件界面,并设置点击事件监听器,监听界面点击事件。

private void initComponent() { ShadowLayout slOval = (ShadowLayout) findComponentById(ResourceTable.Id_sl_oval); ShadowLayout slRectangle = (ShadowLayout) findComponentById(ResourceTable.Id_sl_rectangle); ShadowLayout slRadius = (ShadowLayout) findComponentById(ResourceTable.Id_sl_radius); slOval.setShadowColor(Color.getIntColor(“#FE3311F3”)); slRectangle.setShadowColor(Color.getIntColor(“#EE000000”)); slRadius.setShadowRadius(DEFAULT_RADIUS); Text textOval = (Text) findComponentById(ResourceTable.Id_text_oval); Text textRectangle = (Text) findComponentById(ResourceTable.Id_text_rectangle); Text textRadius = (Text) findComponentById(ResourceTable.Id_text_radius);

textOval.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { slOval.setShadowColor(Color.getIntColor(“#FEFFD700”)); } }); textRectangle.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { slRectangle.setShadowColor(Color.getIntColor(“#EE00FF7F”)); } });

textRadius.setClickedListener(new Component.ClickedListener() { @Override public void onClick(Component component) { slRadius.setShadowRadius(RADIUS); } });}

photoView组件完整代码下载链接:

https://gitee.com/openharmony-tpc/PhotoView

2. 自定义显示类UI组件

自定义显示类UI组件是开发者定义的具有内容显示特性的组件,通过扩展Component或其子类实现。可将富文本、图片、进度条等内容,通过自定义的方式直观地显示给用户。较为常见的自定义显示类组件,如表6所示:

表6 常见的自定义显示类组件

本文通过例举PhotoView组件来阐述自定义显示类组件的使用方法。

PhotoView组件是一个带图片缩放的功能的图片播放器,效果展示如下,通过双击屏幕实现图片的缩放功能。

依赖

开发者需在build.gradle中配置如下信息,引入组件库

dependencies { implementation ‘io.openharmony.tpc.thirdlib1.1.1’}

使用步骤

1.在xml文件中创建布局,对组件的基础属性进行初始化。

《?xml version=“1.0” encoding=“utf-8”?》《DirectionalLayoutxmlns:ohos=“http://schemas.huawei.com/res/ohos”xmlns:photo=“http://schemas.huawei.com/res/photo”ohos:height=“match_parent”ohos:width=“match_parent”ohos:id=“$+id:container”ohos:orientation=“vertical”》

《com.github.chrisbanes.photoview.PhotoView ohos:id=“$+id:photo_v” ohos:height=“match_parent” ohos:width=“match_parent” photo:image=“$media:wallpaper” /》《/DirectionalLayout》

2.初始化photoView

PhotoView photoView = (PhotoView) findComponentById (ResourceTable.Id_photo_v);photoView.setPixelMap(ResourceTable.Media_wallpaper);

3.创建photoView容器

/**创建页面容器 * */@Overridepublic Object createPageInContainer(ComponentContainer componentContainer, int i) { final int data = list.get(i); PhotoView view = new PhotoView(context); view.setPixelMap(data); // 设置组件的布局参数 view.setLayoutConfig(new ComponentContainer.LayoutConfig( ComponentContainer.LayoutConfig.MATCH_PARENT, ComponentContainer.LayoutConfig.MATCH_PARENT )); view.setPageSlider(slider); // 将组件添加到指定位置。 componentContainer.addComponent(view); return view;}

photoView组件完整代码下载链接:

https://gitee.com/openharmony-tpc/PhotoView

3. 自定义交互类UI组件

自定义交互类UI组件是开发者定义具有交互特性的组件,通过扩展Component或其子类实现,可以响应用户的点击、触摸、长按等操作,实现与用户的交互。较为常见的自定义交互类组件,如表7所示:

表7 常见的自定义交互类组件

986b27b0-1634-11ec-8fb8-12bb97331649.png

本文通过SlideSwitch组件,来阐述自定义交互类组件的使用方法。

SlideSwitch在功能上属于交互类组件。展示了不同样式的开关按钮,可以滑动它来打开或关闭按钮开关

依赖

开发者需在build.gradle中配置如下信息,引入组件库:

allprojects{ repositories{ mavenCentral() }}implementation ‘io.openharmony.tpc.thirdlib1.0.3’

使用步骤

1.在xml文件中创建布局,对组件的基础属性进行设置。

《com.leaking.slideswitch.SlideSwitchohos:id=“$+id:swit2”ohos:width=“190vp”ohos:height=“100vp”ohos:top_margin=“30vp”slideswitch:is_open=“true”slideswitch:shape=“2”slideswitch:theme_color=“#0a5a00”/》

2.监听滑动开关的变化,并通过setState()方法设置开关的默认状态。

@Overridepublic void onStart(Intent intent) { super.onStart(intent); setUIContent(ResourceTable.Layout_ability_main); mSlideSwitch = (SlideSwitch) findComponentById(ResourceTable.Id_swit1); mSlideSwitch2 = (SlideSwitch) findComponentById(ResourceTable.Id_swit2); mText = (Text) findComponentById(ResourceTable.Id_text); mSlideSwitch.setSlideListener(this); // 控制开关按钮的默认状态 mSlideSwitch.setState(false);}

@Overridepublic void open(SlideSwitch slideSwitch) { if (slideSwitch.getId() == ResourceTable.Id_swit1) { mText.setText(“first switch is opend,and set the second one is ‘slideable’”); mSlideSwitch2.setSlideable(true); }}

@Overridepublic void close(SlideSwitch slideSwitch) { if (slideSwitch.getId() == ResourceTable.Id_swit1) { mText.setText(“first switch is closed,and set the second one is ‘unslideable’”); mSlideSwitch2.setSlideable(false); }}

SlideSwitch组件完整代码下载链接:

https://gitee.com/openharmony-tpc/slideview

至此,就完成了自定义UI组件的使用。是不是超级方便呀!赶快到码云社区下载源码学习吧~

责任编辑:haq

原文标题:一文带你看懂HarmonyOS UI组件的使用

文章出处:【微信号:HarmonyOS_Dev,微信公众号:HarmonyOS开发者】欢迎添加关注!文章转载请注明出处。

收藏 人收藏
分享:

评论

相关推荐

瘦肉精检测仪的应用范围和产品性能
瘦肉精检测仪的产品性能。瘦肉精检测仪【恒美 HM-SSJ】广泛应用于食药监局、卫生部门、医学院校、科....
发表于 10-15 14:34 9次 阅读
呕吐毒素检测仪的特点
呕吐毒素检测仪,灵敏度高,采用更先进的荧光定量检测原理,准确度更高,与国标法高度符合,满足不同层次对....
发表于 10-15 11:38 112次 阅读
HarmonyOS服务卡片开发-资源访问学习
卡片工程可以访问的资源,包括JS模块的resources资源,应用resources资源(所有JS模块共享)和系统预置资源。资源限定词资源...
发表于 10-15 11:35 202次 阅读
求一种通用的BootLoader方案
BootLoader是什么?如何去配置BootLoader?
发表于 10-15 06:33 0次 阅读
RDA5856蓝牙芯片有哪些特点
什么是MbedOS操作系统? MbedOS操作系统是由哪些部分组成的? RDA5856蓝牙芯片有哪些特点? ...
发表于 10-15 06:08 0次 阅读
专业手持机设计的特点
手持机是能与其他设备进行数据通讯的手持型终端机,具有数据存储和操作系统,有人机交互界面可以显示输入信....
发表于 10-14 16:17 21次 阅读
大米重金属检测仪的作用
检测大米中的重金属镉,推荐【上海飞测】大米重金属检测仪,阻击‘危险’大米,操作快速简便,结果准确定量....
发表于 10-14 14:30 123次 阅读
呕吐毒素检测仪产品特点
上海飞测呕吐毒素检测仪,采用更先进的荧光定量检测原理,准确度更高,与国标法高度符合,满足不同层次对呕....
发表于 10-14 14:29 24次 阅读
大米重金属检测仪的作用
大米重金属检测仪[微测生物],阻击‘危险’大米,检测大米中的镉,操作快速简便,结果准确定量。
发表于 10-14 14:25 45次 阅读
厂界VOC气象站技术参数是什么
厂界VOC气象站技术参数是什么?环保意义上的定义是指活泼的一类挥发性有机物,即会产生危害的那一类挥发....
发表于 10-14 14:12 26次 阅读
HarmonyOS服务卡片开发-文件组织与配置学习
1. 文件组织 目录结构 JS服务卡片(entry/src/main/js/Component)的典型开发目录结构如下: 目录结构中文件分类如下: ....
发表于 10-14 10:19 225次 阅读
STM32F103+RT-thread操作系统+M5311NB模组物联网该如何去设计
STM32的编程逻辑分为哪些?STM32F103+RT-thread操作系统+M5311NB模组物联网该如何去设计?...
发表于 10-14 09:20 0次 阅读
HarmonyOS服务卡片开发-HML语法学习
HML(HarmonyOS Markup Language)是一套类HTML的标记语言,通过组件,事件构建出页面的内容。页面具备数据绑定、事...
发表于 10-13 10:48 16次 阅读
HarmonyOS的组件化设计方案
HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,Ha....
的头像 HarmonyOS开发者 发表于 10-13 09:59 164次 阅读
基于HarmonyOS的黑白翻棋手机版本
前言 之前发过两篇黑白翻棋游戏的手表版本,这次给大家带来的小分享是黑白翻棋的手机版本,也是JS写的,....
的头像 HarmonyOS官方合作社区 发表于 10-13 09:38 105次 阅读
鸿蒙OS 3.0马上就要来了
花粉们都用上鸿蒙系统了吗?据统计,目前鸿蒙OS 2.0升级用户数突破1.2亿,平均每天超100万用户....
的头像 HarmonyOS官方合作社区 发表于 10-13 09:33 638次 阅读
有没有人详细的可以解释下C语言单片机程序的组成、存储与运行STM32实例演示?
有没有人详细的可以解释下C语言单片机程序的组成、存储与运行STM32实例演示?...
发表于 10-13 09:25 0次 阅读
便携式重金属测定仪可以检测什么
便携式重金属测定仪可以检测什么【霍尔德HED-IG-SZ】据有关机构保守估计,目前中国18亿亩耕地中....
发表于 10-13 09:22 16次 阅读
罐区防爆气象站-化工厂气象站的特点
罐区防爆气象站-化工厂气象站FT-FB【风途】面对极端强降雨天气,提前协调气象部门,将公司相关人员及....
发表于 10-12 17:45 98次 阅读
openharmony 应用为什么不能在harmonyos 真机上也harmonyos 虚拟机上运行?
场景:基于openharmony 开发一款产品(假设为手机终端),一个应用开发商为该手机开发一款 openharmony 应用,难道这个应用不能在...
发表于 10-12 16:50 234次 阅读
网传华为手机首发的高通骁龙898是一次无奈的回归
电子发烧友网报道(文/黄山明)自从华为被美国四轮制裁以后,消费者业务在这几年的情况都不容乐观,尤其是....
的头像 电子发烧友网 发表于 10-12 16:49 422次 阅读
油库化工厂一体式气象站技术参数
油库化工厂一体式气象站技术参数FT-FB【风途】化工行业是非常重要的优势产业,但其在生产过程中会造成....
发表于 10-12 16:44 88次 阅读
大米镉重金属检测仪有哪些用处
大米镉重金属检测仪有哪些用处【霍尔德HED-IG-SZ】大米是南方人的主食。但是近些年来,随着南北交....
发表于 10-12 16:18 23次 阅读
一文带你看懂HarmonyOS如何适配多种终端
HarmonyOS是一款面向万物互联时代的、全新的分布式操作系统。在传统的单设备系统能力基础上,HarmonyOS提出了基于同一套系...
发表于 10-12 14:37 339次 阅读
一文带你看懂HarmonyOS如何适配多种终端
国产FPGA GW1NSR的片上资源和特性
   本文介绍国产FPGA GW1NSR的片上资源和特性,从官网能获取资料的途径,完成这一步可以使读....
的头像 高云半导体 发表于 10-12 14:17 759次 阅读
国产FPGA GW1NSR的片上资源和特性
Apple最新发布iOS 15.0.2
Apple 于周一发布了 iOS 15.0.2,并修复了一些重要的错误,包括一些特定于 Find M....
的头像 科技见闻网 发表于 10-12 10:54 420次 阅读
HarmonyOS服务卡片开发-API接口简析
HarmonyOS中的服务卡片为卡片提供方开发者提供以下接口能力。 [table] [tr][td=189]类名 [/td][td=189]接口名 [/td][td=18...
发表于 10-12 10:42 0次 阅读
HarmonyOS服务卡片开发-API接口简析
稻谷重金属测定仪如何选择
稻谷重金属测定仪如何选择【霍尔德HED-IG-SZ】当重金属持续在体内积聚到一定量(或者发生急性中毒....
发表于 10-12 10:28 33次 阅读
欧拉开源操作系统首个全场景版本发布
9月25日,华为孟晚舟回国的消息刷屏了。据央视报道,当地时间24日,孟晚舟在加拿大不列颠哥伦比亚省法....
的头像 电子发烧友网 发表于 10-11 14:45 181次 阅读
HarmonyOS微博第三方登录实现(内附代码)
  前期准备 在微博开放平台注册一个网站应用,微博开放平台地址如下: https: //open.w....
的头像 HarmonyOS技术社区 发表于 10-11 14:21 186次 阅读
鸿蒙开发中怎么引入第三方库
Android 发展到现在不仅提供了很多 API,还提供了很多第三方库。这降低了我们开发者的开发难度....
的头像 HarmonyOS技术社区 发表于 10-11 14:11 184次 阅读
HarmonyOS系统TextField组件基本用法
1. TextField组件基本用法 组件说明: 是Text的子类,用来进行用户输入数据的 常见属性....
的头像 电子发烧友论坛 发表于 10-09 09:18 216次 阅读
HarmonyOS系统TextField组件基本用法
Windows11有哪些值得让人升级的理由
对于微软来说,Windows 11让你升级的最大好处之一就是,可以让你的PC更加流畅,当然他们也是确....
的头像 Android编程精选 发表于 10-08 14:42 361次 阅读
极客时间引领IT技术培训风向,操作系统课程近期火热招募
操作系统是计算机体系中最为重要的组成部分之一,在进行相关应用的开发时,很多细节问题都与操作系统有着紧....
的头像 话说科技 发表于 09-30 16:59 349次 阅读
极客时间引领IT技术培训风向,操作系统课程近期火热招募
iphone13promax和iphone13pro区别
iphone13promax和iphone13pro区别
的头像 lhl545545 发表于 09-30 16:27 13849次 阅读
机智云边缘操作管理系统及边缘服务器满足企业全球化需求
机智云自助开发平台,作为一个零门槛、超低代码的iot开发平台,通过傻瓜化的自助工具、在线可视化开发环....
的头像 机智云物联网 发表于 09-30 16:06 1387次 阅读
微测生物重金属检测仪有哪些特点?
微测生物重金属检测仪可快速简便准确定量的测定出粮食谷物、饲料、食品、中药材、蔬菜、乳品、水产品中多种....
发表于 09-30 14:33 93次 阅读
嵌入式操作系统VxWorks中的网络通信
嵌入式操作系统VxWorks中的网络通信(通信网络保障应急方案)-嵌入式操作系统VxWorks中的网....
发表于 09-30 11:19 37次 阅读
嵌入式操作系统VxWorks中的网络通信
嵌入式VxWorks实时操作系统中串口通信的实现
嵌入式VxWorks实时操作系统中串口通信的实现(通信网络基础课后答案第三章)-嵌入式VxWorks....
发表于 09-30 11:15 41次 阅读
嵌入式VxWorks实时操作系统中串口通信的实现
市场监管局农残速测仪的仪器特点有那些
市场监管局农残速测仪的仪器特点有那些【霍尔德仪器HED-NC12】农残留跟着农业的迅速开展已经变成了....
发表于 09-30 09:14 39次 阅读
华为mate50pro价格官网报价
华为mate50pro价格官网售价约为8000元起,最新搭载鸿蒙操作系统,采用OLED大屏幕设计,外....
的头像 lhl545545 发表于 09-29 16:42 4342次 阅读
生物毒性检测仪器产品介绍
生物毒性检测仪器产品介绍【霍尔德HED-DX】当前,中国在经济高速发展的同时,人为对水体的污染也是越....
发表于 09-29 10:40 38次 阅读
真菌毒素快速检测仪设备 【飞测生物】真菌毒素检测仪
【飞测生物】真菌毒素检测仪,操作快速简便,结果准确定量,可用于粮食、饲料、中药材等多种样品中真菌毒素....
发表于 09-29 10:34 50次 阅读
执法影像记录仪设计
执法记录仪具有摄像、照相、录音、对讲、定位、回放、存储等功能,能够对执法过程中进行动态、静态的现场情....
发表于 09-29 10:27 38次 阅读
iphone13和13pro哪个好 哪款更值得入手
iphone13和13pro小编个人推荐iPhone 13Pro。下面我们就来一起看看iPhone ....
的头像 lhl545545 发表于 09-28 11:30 19887次 阅读
HarmonyOS如何自动生成JS FA调用Java PA的模板代码
JS UI框架提供了JS FA(Feature Ability)调用Java PA(Particle....
的头像 HarmonyOS开发者 发表于 09-28 10:09 315次 阅读
JavaUI框架新增组件开发指南
Java UI框架是HarmonyOS应用开发中诸多开发者需要关注的重要内容。近期,文档君结合各位开....
的头像 HarmonyOS开发者 发表于 09-28 10:04 392次 阅读
JavaUI框架新增组件开发指南
如何对OpenHarmony贡献代码
OpenHarmony 是由开放原子开源基金会(OpenAtom Foundation)孵化及运营的....
的头像 HarmonyOS技术社区 发表于 09-28 09:58 292次 阅读
如何对OpenHarmony贡献代码
在鸿蒙中如何实现一屏多页
众所周知,PageSlider 是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换,而 P....
的头像 HarmonyOS技术社区 发表于 09-28 09:46 279次 阅读
HarmonyOS与OpenHarmony开发角度上的区别
开篇第一句,所有学习与开发资料以官方资料为准。任何博客类只能作为参考,自行判断优良,不要被误导,包括....
的头像 HarmonyOS技术社区 发表于 09-28 09:31 529次 阅读
HarmonyOS与OpenHarmony开发角度上的区别
用Python完成鸿蒙开发板外设控制
话说很久以前,我将 MicroPython 的解释器给“挖”了出来,然后做了适配,成功运行于鸿蒙设备....
的头像 HarmonyOS技术社区 发表于 09-28 09:22 319次 阅读
鸿蒙APP开发鸿蒙权限请求框架
关于 HarmonyOS 的动态授权的常规操作流程和代码我之前写过一篇文章:《鸿蒙动态权限申请完整规....
的头像 HarmonyOS技术社区 发表于 09-28 09:19 273次 阅读
在HarmonyOS点亮LED步骤
Hi3861 模组的介绍 ①外观和基本功能 Hi3861 开发板模组大小约 2cm*5cm,是一款高....
的头像 HarmonyOS技术社区 发表于 09-28 09:16 1062次 阅读
在HarmonyOS点亮LED步骤