HarmonyOS学习路之开发篇—Java UI框架(DirectionalLayout)

DirectionalLayout

 

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

HarmonyOS学习路之开发篇—Java UI框架(DirectionalLayout)_第1张图片

                                                            DirectionalLayout示意图

支持的XML属性

DirectionalLayout的共有XML属性继承自:Component

DirectionalLayout的自有XML属性见下表:

属性名称

中文描述

取值

取值说明

使用案例

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_weigh

t="$float:total_weight"

DirectionalLayout所包含组件可支持的XML属性见下表:

属性名称

中文描述

取值

取值说明

使用案例

layout_alignment 对齐方式 left 表示左对齐。

可以设置取值项如表中所列,也可以使用“|”进行多项组合。

ohos:layout_alignment

="top"

ohos:layout_alignmen

t="top|left"

top 表示顶部对齐。
right 表示右对齐
bottom 表示底部对齐。
horizontal_center 表示水平居中对齐。
vertical_center 表示垂直居中对齐。
center 表示居中对齐。

weight

比重

float类型

可以直接设置浮点数值,也可以引用float浮点数资源。

ohos:weight

="1"

ohos:weight

="$float:weight"

排列方式

DirectionalLayout的排列方向(orientation)分为水平(horizontal)或者垂直(vertical)方向。使用orientation设置布局内组件的排列方式,默认为垂直排列。

垂直排列

垂直方向排列三个按钮,效果如下:



    

color_cyan_element.xml:



    

水平排列

 子组件未超过布局本身大小 

水平方向排列三个按钮,效果如下:



    

color_cyan_element.xml:



    
  • 子组件超过布局本身大小

DirectionalLayout不会自动换行,其子组件会按照设定的方向依次排列,若超过布局本身的大小,超出布局大小的部分将不会被显示。



    

 color_cyan_element.xml:



    

此布局包含了三个按钮,但由于DirectionalLayout不会自动换行,超出布局大小的组件部分无法显示。界面显示如下:

对齐方式

 DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式。对齐方式和排列方式密切相关,当排列方式为水平方向时,可选的对齐方式只有作用于垂直方向的类型(top、bottom、vertical_center、center)其他对齐方式不会生效。当排列方式为垂直方向时,可选的对齐方式只有作用于水平方向的类型(left、right、start、end、horizontal_center、center)其他对齐方式不会生效。

三种对齐方式的示例代码:



    

color_cyan_element.xml:



    

三种对齐方式效果示例

HarmonyOS学习路之开发篇—Java UI框架(DirectionalLayout)_第2张图片

 权重

权重(weight)就是按比例来分配组件占用父组件的大小,在水平布局下计算公式为:

父布局可分配宽度=父布局宽度-所有子组件width之和;

组件宽度=组件weight/所有组件weight之和*父布局可分配宽度;

实际使用过程中,建议使用width=0来按比例分配父布局的宽度,1:1:1效果如下:



    

 color_cyan_element.xml:



    

color_gray_element.xml:



    

场景示例

HarmonyOS学习路之开发篇—Java UI框架(DirectionalLayout)_第3张图片

 源码示例:




    

        

你可能感兴趣的:(HarmonyOS,学习,学习,harmonyos)