Harmony应用（java）开发之常用控件

目录

一、Harmony控件通用属性

二、Harmony常用布局

1、线性布局 DirectionalLayout（等同于Android的LinearLayout）

2、相对布局DependentLayout（等同于Android的RelativeLayout）

3、帧布局StackLayout（等同于Android的FrameLayout）

4、网格布局TableLayout（等同于Android的TableLayout）

5、绝对布局PositionLayout（等同于Android的AbsoluteLayout）

6、AdaptiveBoxLayout

---

上一篇文章主要介绍了Harmony应用安装编译器、项目结构等。本篇主要是介绍Harmony应用的常用UI控件。

在了解常用控件之前我们先来了解一下控件的属性怎么用以及通用属性。

一、Harmony控件通用属性

 Android中xml布局的控件属性都是android:xxx="xx"这样的写法，在harmony中属性应该这么写：ohos:xx="xx"。

属性名称	中文描述	取值	取值说明	使用案例
width	宽	float	控件宽	ohos:width="10vp"
height	高	float	控件高	ohos:height="10vp"

width和height取值：match_parent等同于Android的match_parent，match_content同Android的wrap_content。注意：

二、Harmony常用布局

Android开发者都清楚Android常用的布局：LinearLayout（线性布局）、RelativeLayout（相对布局）、ConstraintLayout（约束布局）、FrameLayout（帧布局）、TableLayout（网格布局）、AbsoluteLayout（绝对布局）等，那么在Harmony中有哪些常用布局呢？

1、线性布局 DirectionalLayout（等同于Android的LinearLayout）

DirectionalLayout是Java UI中的一种重要组件布局，用于将一组组件(Component)按照水平或者垂直方向排布，能够方便地对齐布局内的组件。该布局和其他布局的组合，可以实现更加丰富的布局方式。

DirectionalLayout属性：

属性名称	中文描述	取值	取值说明	使用案例
alignment	对齐方式	left	表示左对齐。	可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:alignment="top|left" ohos:alignment="left"
		top	表示顶部对齐。
		right	表示右对齐。
		bottom	表示底部对齐。
		horizontal_center	表示水平居中对齐。
		vertical_center	表示垂直居中对齐。
		center	表示居中对齐。
		start	表示靠起始端对齐。
		end	表示靠结束端对齐。
orientation	子布局排列方向	horizontal	表示水平方向布局。	ohos:orientation="horizontal"
		vertical	表示垂直方向布局。	ohos:orientation="vertical"
total_weight	所有子视图的权重之和	float类型	可以直接设置浮点数值，也可以引用float浮点数资源。	ohos:total_weight="2.5" ohos:total_weight="$float:total_weight"

使用DirectionalLayout子布局支持如下属性：

属性名称	中文描述	取值	取值说明	使用案例
layout_alignment	对齐方式	left	表示左对齐。	可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left"
		top	表示顶部对齐。
		right	表示右对齐。
		bottom	表示底部对齐。
		horizontal_center	表示水平居中对齐。
		vertical_center	表示垂直居中对齐。
		center	表示居中对齐。
weight	比重	float类型	可以直接设置浮点数值，也可以引用float浮点数资源。	ohos:weight="1" ohos:weight="$float:weight"

2、相对布局DependentLayout（等同于Android的RelativeLayout）

DependentLayout是Java UI系统里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。

DependentLayout属性：

属性名称	中文描述	取值	取值说明	使用案例
alignment	对齐方式	left	表示左对齐。	可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:alignment="top|left" ohos:alignment="left"
		top	表示顶部对齐。
		right	表示右对齐。
		bottom	表示底部对齐。
		horizontal_center	表示水平居中对齐。
		vertical_center	表示垂直居中对齐。
		center	表示居中对齐。

DependentLayout子布局支持如下属性：

属性名称	中文描述	取值	取值说明	使用案例
left_of	将右边缘与另一个子组件的左边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:left_of="$id:component_id"
right_of	将左边缘与另一个子组件的右边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:right_of="$id:component_id"
start_of	将结束边与另一个子组件的起始边对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:start_of="$id:component_id"
end_of	将起始边与另一个子组件的结束边对齐	引用	仅可引用DependentLayout中包含的其他组件的id。 说明	ohos:end_of="$id:component_id"
above	将下边缘与另一个子组件的上边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id	ohos:above="$id:component_id"
below	将上边缘与另一个子组件的下边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id	ohos:below="$id:component_id"
align_baseline	将子组件的基线与另一个子组件的基线对齐	引用	仅可引用DependentLayout中包含的其他组件的id	ohos:align_baseline="$id:component_id"
align_left	将左边缘与另一个子组件的左边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:align_left="$id:component_id"
align_top	将上边缘与另一个子组件的上边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id	ohos:align_top="$id:component_id"
align_right	将右边缘与另一个子组件的右边缘对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:align_right="$id:component_id"
align_bottom	将底边与另一个子组件的底边对齐	引用	仅可引用DependentLayout中包含的其他组件的id	ohos:align_bottom="$id:component_id"
align_start	将起始边与另一个子组件的起始边对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:align_start="$id:component_id"
align_end	将结束边与另一个子组件的结束边对齐	引用	仅可引用DependentLayout中包含的其他组件的id。	ohos:align_end="$id:component_id"
align_parent_left	将左边缘与父组件的左边缘对齐	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:align_parent_left="true" ohos:align_parent_left="$boolean:true"
align_parent_top	将上边缘与父组件的上边缘对齐	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:align_parent_top="true" ohos:align_parent_top="$boolean:true"
align_parent_right	将右边缘与父组件的右边缘对齐	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:align_parent_right="true" ohos:align_parent_right="$boolean:true"
align_parent_bottom	将底边与父组件的底边对齐	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:align_parent_bottom="true" ohos:align_parent_bottom="$boolean:true"
align_parent_start	将起始边与父组件的起始边对齐	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:align_parent_start="true" ohos:align_parent_start="$boolean:true"
align_parent_end	将结束边与父组件的结束边对齐	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:align_parent_end="true" ohos:align_parent_end="$boolean:true"
center_in_parent	将子组件保持在父组件的中心	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:center_in_parent="true" ohos:center_in_parent="$boolean:true"
horizontal_center	将子组件保持在父组件水平方向的中心	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:horizontal_center="true" ohos:horizontal_center="$boolean:true"
vertical_center	将子组件保持在父组件垂直方向的中心	boolean类型	可以直接设置true/false，也可以引用boolean资源。	ohos:vertical_center="true" ohos:vertical_center="$boolean:true"

3、帧布局StackLayout（等同于Android的FrameLayout）

StackLayout直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。

StackLayout子布局支持如下属性：

属性名称	中文描述	取值	取值说明	使用案例
layout_alignment	对齐方式	left	表示左对齐。	可以设置取值项如表中所列，也可以使用“|”进行多项组合。 ohos:layout_alignment="top" ohos:layout_alignment="top|left"
		top	表示顶部对齐。
		right	表示右对齐。
		bottom	表示底部对齐。
		horizontal_center	表示水平居中对齐。
		vertical_center	表示垂直居中对齐。
		center	表示居中对齐。

 

4、网格布局TableLayout（等同于Android的TableLayout）

TableLayout使用表格的方式划分子组件。

TableLayout属性：

属性名称	中文描述	取值	取值说明	使用案例
alignment_type	对齐方式	align_edges	表示TableLayout内的组件按边界对齐。	ohos:alignment_type="align_edges"
		align_contents	表示TableLayout内的组件按边距对齐。	ohos:alignment_type="align_contents"
column_count	列数	integer类型	可以直接设置整型数值，也可以引用integer资源。	ohos:column_count="3" ohos:column_count="$integer:count"
row_count	行数	integer类型	可以直接设置整型数值，也可以引用integer资源。	ohos:row_count="2" ohos:row_count="$integer:count"
orientation	排列方向	horizontal	表示水平方向布局。	ohos:orientation="horizontal"
		vertical	表示垂直方向布局。	ohos:orientation="vertical"

5、绝对布局PositionLayout（等同于Android的AbsoluteLayout）

在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。

6、AdaptiveBoxLayout

AdaptiveBoxLayout是自适应盒子布局，该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。

1. 该布局中的每个子组件都用一个单独的“盒子”装起来，子组件设置的布局参数都是以盒子作为父布局生效，不以整个自适应布局为生效范围。
2. 该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数，高度为match_content，每一行中的所有盒子按高度最高的进行对齐。
3. 该布局水平方向是自动分块，因此水平方向不支持match_content，布局水平宽度仅支持match_parent或固定宽度。
4. 自适应仅在水平方向进行了自动分块，纵向没有做限制，因此如果某个子组件的高设置为match_parent类型，可能导致后续行无法显示。

 

AdaptiveBoxLayout常用的方法：

方法	功能
addAdaptiveRule(int minWidth, int maxWidth, int columns)	添加一个自适应盒子布局规则。
removeAdaptiveRule(int minWidth, int maxWidth, int columns)	移除一个自适应盒子布局规则。
clearAdaptiveRules()	移除所有自适应盒子布局规则。

 

本篇到此为止，学习新东西还是要多写。