Component共有属性 原创

发布于 2021-8-20 22:44
浏览
1收藏

  HarmonyOS提供的ACE UI框架可以为开发人员提供界面开发所需的重要组件,将这些组件进行有效组合来实现页面的设计。本章将学习Java UI框架中常用组件的用法。

  在Java UI框架中,图形界面设计方法主要有两种:一是使用XML方式描述整个布局效果,这也是最常使用的方式;二是使用Java代码设计页面展示效果。两种方式都是通过属性和值来制定具体样式,以此创建组件。创建完成后,开发者可以设置各种各样的交互、相应的事件处理及后续属性状态变更或动作行为呈现。HarmonyOS提供了相应的API可供开发者使用。

  HarmonyOS应用的绝大部分UI组件都放在ohos.agp.components包中,应用中所有的用户界面元素都是由Component(非容器组件)和ComponentContainer(容器组件)对象构成。Component是绘制在屏幕上的一个对象,用户能与之交互。ComponentContainer是一个用于容纳其他Component或ComponentContainer对象的容器组件。Component与ComponentContainer的层次结构如图1所示。

Component共有属性-开源基础软件社区

图1 Component与ComponentContainer层次结构

  Java UI框架提供了一部分Component和ComponentContainer的具体子类,即创建用户界面(UI)的各类组件,包括一些常用的组件(比如:文本框、按钮、图片、列表等)和常用的布局(比如:DirectionalLayout和DependentLayout)。用户可通过组件进行交互操作,并获得响应。所有的UI操作都应该在主线程进行设置。

  Component与ComponentContainer的继承关系如图2所示。ComponentContainer是Component的直接子类,且实现了ComponentParent接口。

Component共有属性-开源基础软件社区

图2 Component与ComponentContainer的继承关系

Component和ComponentContainer

  Component:提供内容显示,是界面中所有组件的基类,开发者可以给Component设置事件处理回调来创建一个可交互的组件。Java UI框架提供了一些常用的界面元素,也可称之为组件,组件一般直接继承Component或它的子类,如Text、Image等。

  ComponentContainer:作为容器容纳Component或ComponentContainer对象,并对它们进行布局。Java UI框架提供了一些标准布局功能的容器,它们继承自ComponentContainer,一般以“Layout”结尾,如DirectionalLayout、DependentLayout等。

  用户界面元素统称为组件,组件根据一定的层级结构进行组合形成布局。组件在未被添加到布局中时,既无法显示也无法交互,因此一个用户界面至少包含一个布局。在UI框架中,具体的布局类通常以XXLayout命名,完整的用户界面是一个布局,也可以是嵌套的布局,即一个用户界面必须包含一个XXLayout布局组件,该布局组件中可以包含若干Component、ComponentContainer或XXLayout布局组件。

  布局把Component和ComponentContainer以树状的层级结构进行组织,这样的一个布局就称为组件树。组件树的特点是仅有一个根组件,其他组件有且仅有一个父节点,组件之间的关系受到父节点的规则约束。

  每个组件对应一个类,每个组件类都有其支持的属性和方法,这些属性有些是自有属性,有些是公有属性。通过继承关系,不同的组件也拥有了公有属性。这些公有属性来自于所有组件的基类Component。Component支持的自有XML属性,其它组件都支持。Component支持的属性分为5类:基础属性、间距属性、滚动属性、缩放属性、焦点属性。

1. 基础属性

(1)id:控件identity,取值为integer类型,用以唯一识别不同控件对象。在XML中的用法:ohos:id=“$+id:component_id”。

(2)width:宽度,必需属性,取值为float类型,其值的设置有3种形式。

  • 固定值:默认单位为px;也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。在XML中的用法:ohos:width=“20”、ohos:width=“20vp”、ohos:width=“$float:size_value”(float表示引用资源的类型,size_value表示资源名称)。
  • match_parent:表示组件宽度与其父组件去掉内部边距后的宽度相同(宽度占满父容器组件)。在XML中的用法:ohos:width=“match_parent”。
  • match_content:表示组件宽度由其包含的内容决定,包括其内容的宽度以及内部边距的总和。在XML中的用法:ohos:width=“match_content”。

(3)height:高度,必需属性,取值为float类型,其值的设置与width属性相同,有3种形式。

  • 固定值:同width。
  • match_parent:表示组件高度与其父组件去掉内部边距后的高度相同(高度占满父容器组件)。在XML中的用法:ohos:height=“match_parent”。
  • match_content:表示组件高度由其包含的内容决定,包括其内容的高度以及内部边距的总和。在XML中的用法:ohos:height=“match_content”。

(4)min_width:最小宽度,取值为float类型,默认单位为px;也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。在XML中的使用方法:ohos:min_width=“20”、ohos:min_width=“20vp”、ohos:min_width=“$float:size_value”。

(5)min_height:最小高度,取值和用法同min_width。

(6)alpha:透明度,取值为float类型,可以直接设置浮点数值,也可以引用float资源。取值范围在0~1。在XML中的用法:ohos:alpha=“0.86”、ohos:alpha=“$float:value”。

(7)clickable:是否可点击,取值为boolean类型,可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:clickable=“true”、ohos:clickable=“$boolean:true”。

(8)long_click_enabled:是否支持长点击,取值为boolean类型,可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:long_click_enabled=“true”、ohos:long_click_enabled=“$boolean:true”。

(9)enabled:是否启用,取值为boolean类型,可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:enabled=“true”、ohos:enabled=“$boolean:true”。

(10)visibility:可见性,取值范围为:

  • visible:表示控件可见。在XML中的用法:ohos:visibility=“visible”。
  • invisible:表示控件不可见,但仍然占用布局空间。在XML中的用法:ohos:visibility=“invisible”。
  • hide:表示控件不可见,且不占用布局空间。在XML中的用法:ohos:visibility=“hide”。

(11)layout_direction:定义水平布局方向,取值范围为:

  • ltr:表示布局方向为水平方向从左到右。在XML中的用法:ohos:layout_direction=“ltr”。
  • rtl:表示布局方向为水平方向从右到左。在XML中的用法:ohos:layout_direction=“rtl”。
  • inherit:表示继承水平布局方向。在XML中的用法:ohos:layout_direction=“inherit”。
  • locale:表示布局方向跟随系统设置。在XML中的用法:ohos:layout_direction=“locale”。

(12)background_element:背景图层,取值为Element类型,可直接配置色值,也可引用color资源或引用media/graphic下的图片资源。在XML中的用法:

  • 配置颜色值:ohos:background_element=“#FF000000”
  • 引用color资源:ohos:background_element=“$color:black”
  • 引用media图片资源:ohos:background_element=“$media:media_src”
  • 引用graphic图片资源:ohos:background_element=“$graphic:graphic_src”

(13)foreground_element:前景图层,取值和用法同background_element。

(14)theme:样式,取值为引用类型,近可引用pattern资源。在XML中的用方法:ohos:theme=“$pattern:button_pattern”。

(15)component_description:描述,取值为String类型,可以直接设置文本字串,也可以引用String资源。在XML中的用法:ohos:component_description=“test”、ohos:component_description=“$string:test_str”。

2. 间距属性

​ (1)padding:内间距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法是:ohos:padding=“20”、ohos:padding=“20vp”、ohos:padding=“$float:padding_value”。

​ 注意:

  • padding与left_padding、right_padding、start_padding、end_padding、top_padding、bottom_padding属性有冲突,不建议一起使用;
  • 同时配置时,left_padding、right_padding、start_padding、end_padding、top_padding、bottom_padding优先级高于padding属性;

​ (2)left_padding:左内间距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:left_padding=“20”、ohos:left_padding=“20vp”、ohos:left_padding=“$float:padding_value”。

​ 注意:

  • left_padding与start_padding、end_padding属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,left_padding会与start_padding属性冲突;
  • 在“水平布局方向为从右到左”时,left_padding会与end_padding属性冲突。
  • 同时配置时,start_padding、end_padding优先级高于left_padding属性。

(3)start_padding:前内间距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px;也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。在XML中的用法:ohos:start_padding=“20”、ohos:start_padding=“20vp”、ohos:start_padding=“$float:padding_value”。

注意:

  • start_padding与left_padding、right_padding属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,start_padding会与left_padding属性冲突;
  • 在“水平布局方向为从右到左”时,start_padding会与right_padding属性冲突。
  • 同时配置时,start_padding优先级高于left_padding、right_padding属性。

(4)right_padding:右内间距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:right_padding=“20”、ohos:right_padding=“20vp”、ohos:right_padding=“$float:padding_value”。

注意:

  • right_padding与start_padding、end_padding属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,right_padding会与end_padding属性冲突;
  • 在“水平布局方向为从右到左”时,right_padding会与start_padding属性冲突。
  • 同时配置时,start_padding、end_padding优先级高于right_padding属性。

(5)end_padding:后内间距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:end_padding=“20”、ohos:end_padding=“20vp”、ohos:end_padding=“$float:padding_value”。

注意:

  • end_padding与left_padding、right_padding属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,end_padding会与right_padding属性冲突;
  • 在“水平布局方向为从右到左”时,end_padding会与left_padding属性冲突;
  • 同时配置时,end_padding优先级高于left_padding、right_padding属性。

(6)top_padding:上内间距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:top_padding=“20”、ohos:top_padding=“20vp”、ohos:top_padding=“$float:padding_value”。

(7)bottom_padding:下内间距,表示间距尺寸的float类型。可以是浮点数值,其默认单位为px;也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。在XML中的用法:ohos:bottom_padding=“20”、ohos:bottom_padding=“20vp”、ohos:bottom_padding=“$float:padding_value”。

(8)margin:外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:margin=“20”、ohos:margin=“20vp”、ohos:margin=“$float:margin_value”。

注意:

  • margin与left_margin、right_margin、start_margin、end_margin、top_margin、bottom_margin属性有冲突,不建议一起使用;
  • 同时配置时,margin优先级高于left_margin、right_margin、start_margin、end_margin、top_margin、bottom_margin属性;

(9)left_margin:左外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。与margin同时配置时,margin优先级高于left_margin。在XML中的用法:ohos:left_margin=“20”、ohos:left_margin=“20vp”、ohos:left_margin=“$float:margin_value”。

注意:

  • left_margin与start_margin、end_margin属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,left_margin会与start_margin属性冲突;
  • 在“水平布局方向为从右到左”时,left_margin会与end_margin属性冲突;
  • 同时配置时,start_margin、end_margin优先级高于left_margin属性;

(10)start_margin:前外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。与margin同时配置时,margin优先级高于start_margin。在XML中的用法:ohos:start_margin=“20”、ohos:start_margin=“20vp”、ohos:start_margin=“$float:margin_value”。

注意:

  • start_margin与left_margin、right_margin属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,start_margin会与left_margin属性冲突;
  • 在“水平布局方向为从右到左”时,start_margin会与right_margin属性冲突;
  • 同时配置时,start_margin优先级高于left_margin、right_margin属性;

(11)right_margin:右外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。

与margin同时配置时,margin优先级高于right_margin。在XML中的用法:ohos:right_margin=“20”、ohos:right_margin=“20vp”、ohos:right_margin=“$float:margin_value”。

注意:

  • right_margin与start_margin、end_margin属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,right_margin会与end_margin属性冲突;
  • 在“水平布局方向为从右到左”时,right_margin会与start_margin属性冲突;
  • 同时配置时,start_margin、end_margin优先级高于right_margin属性;

(12)end_margin:后外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。与margin同时配置时,margin优先级高于end_margin。在XML中的用法:ohos:end_margin=“20”、ohos:end_margin=“20vp”、ohos:end_margin=“$float:margin_value”。

注意:

  • end_margin与left_margin、right_margin属性有冲突,不建议一起使用;
  • 在“水平布局方向为从左到右”时,end_margin会与right_margin属性冲突;
  • 在“水平布局方向为从右到左”时,end_margin会与left_margin属性冲突;
  • 同时配置时,end_margin优先级高于left_margin、right_margin属性;

(13)top_margin:上外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。与margin同时配置时,margin优先级高于top_margin。在XML中的用法:ohos:top_margin=“20”、ohos:top_margin=“20vp”、ohos:top_margin=“$float:margin_value”。

(14)bottom_margin:下外边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。与margin同时配置时,margin优先级高于bottom_margin。在XML中的用法:ohos:bottom_margin=“20”、ohos:bottom_margin=“20vp”、ohos:bottom_margin=“$float:margin_value”。

3. 滚动属性

(1)scrollbar_thickness:滚动条的厚度,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px;也可以是带px/vp/fp单位的浮点数值;也可以引用float资源。在XML中的用法:ohos:scrollbar_thickness=“30”、ohos:scrollbar_thickness=“10vp”、ohos:scrollbar_thickness=“$float:size_value”。

(2)scrollbar_start_angle:滚动条的起始角度、取值为float类型。可以直接设置浮点数值,也可以引用float资源。在XML中的用法:ohos:scrollbar_start_angle=“30”、ohos:scrollbar_start_angle=“$float:value”。

(3)scrollbar_sweep_angle:滚动条的扫描角度,取值为float类型。可以直接设置浮点数值,也可以引用float资源。在XML中的用法:ohos:scrollbar_sweep_angle=“30”、ohos:scrollbar_sweep_angle=“$float:value”。

(4)scrollbar_background_color:滚动条背景颜色,取值为color类型。可以直接设置色值,也可以引用color资源。在XML中的用法:ohos:scrollbar_background_color=“#A8FFFFFF”、ohos:scrollbar_background_color=“$color:black”。

(5)scrollbar_color:滚动条颜色,取值为color类型。可以直接设置色值,也可以引用color资源。在XML中的用法:ohos:scrollbar_color=“#A8FFFFFF”、ohos:scrollbar_color=“$color:black”。

(6)scrollbar_fading_enabled:滚动条是否会渐隐,取值为boolean类型。可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:scrollbar_fading_enabled=“true”、ohos:scrollbar_fading_enabled=“$boolean:true”。

(7)scrollbar_overlap_enabled:滚动条是否可以重叠,取值为boolean类型。可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:scrollbar_overlap_enabled=“true”、ohos:scrollbar_overlap_enabled=“$boolean:true”。

(8)scrollbar_fading_delay:滚动条渐隐前的延迟时间(单位ms),取值为integer类型。可以直接设置整型数值,也可以引用integer资源。在XML中的用法:ohos:scrollbar_fading_delay=“1000”、ohos:scrollbar_fading_delay=“$integer:delay”。

(9)scrollbar_fading_duration:滚动条渐隐时长(单位ms),取值为integer类型。可以直接设置整型数值,也可以引用integer资源。在XML中的用法:ohos:scrollbar_fading_duration=“1000”、ohos:scrollbar_fading_duration=“$integer:duration”。

4. 缩放属性

(1)pivot_x:旋转点X位置,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:pivot_x=“20”、ohos:pivot_x=“$float:value”。

(2)pivot_y:旋转点Y位置,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:pivot_y=“20”、ohos:pivot_y=“$float:value”。

(3)rotate:围绕其中心点旋转的角度,取值为float类型。可以直接设置浮点数值,也可以引用float资源。在XML中的用法:ohos:rotate=“30”、ohos:rotate=“$float:value”。

(4)scale_x:X方向的缩放级别,取值为float类型。可以直接设置浮点数值,也可以引用float浮点数资源。在XML中的用法:ohos:scale_x=“1.2”、ohos:scale_x=“$float:value”。

(5)scale_y:Y方向的缩放级别,取值为float类型。可以直接设置浮点数值,也可以引用float资源。在XML中的用法:ohos:scale_y=“1.2”、ohos:scale_y=“$float:value”。

(6)translation_x:X方向移动的距离,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:translation_x=“20”、ohos:translation_x=“20vp”、ohos:translation_x=“$float:value”。

(7)translation_y:Y方向移动的距离,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:translation_y=“20”、ohos:translation_y=“20vp”、ohos:translation_y=“$float:value”。

5. 焦点属性

(1)focusable:是否可获焦,取值范围为:

  • focus_disable:表示控件不可获焦,在XML中的用法:ohos:focusable=“focus_disable”;
  • focus_adaptable:表示控件获焦状态跟随控件自身默认特性,在XML中的用法:ohos:focusable=“focus_adaptable”;
  • focus_enable:表示控件可以获焦,在XML中的用法:ohos:focusable=“focus_enable”;

(2)focus_border_radius:焦点边框圆角半径,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:focus_border_radius=“10”、ohos:focus_border_radius=“10vp”、ohos:focus_border_radius=“$float:value”。

(3)focus_border_enable:是否有焦点边框,取值为boolean类型。可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:focus_border_enable=“true”、ohos:focus_border_enable=“$boolean:true”。

(4)focus_border_width:焦点边框宽度,取值为表示尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:focus_border_width=“20”、ohos:focus_border_width=“20vp”、ohos:focus_border_width=“$float:size_value”。

(5)focus_border_padding:焦点边框的边距,取值为表示间距尺寸的float类型。可以是浮点数值,其默认单位为px,也可以是带px/vp/fp单位的浮点数值,也可以引用float资源。在XML中的用法:ohos:focus_border_padding=“20”、ohos:focus_border_padding=“20vp”、ohos:focus_border_padding=“$float:padding_value”

(6)focusable_in_touch:触摸状态下,取值为boolean类型。可以直接设置true/false,也可以引用boolean资源。在XML中的用法:ohos:focusable_in_touch=“true”、ohos:focusable_in_touch=“$boolean:true”。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
3
收藏 1
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐