HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)

一、布局介绍

Android的布局开发中存在五大布局，在鸿蒙布局开发中也存在与之相似的五种布局类型，唯一多余的一个类型叫做自适应盒子布局，布局可以在不同设备上有不同的展示方式。

熟悉Android开发的小伙伴可以参照Android的布局开发来学习。

二、布局开发

① DirectionalLayout 对应 LinearLayout

在此布局中可以对布局中的所有组件进行横向或纵向排列，并且使组件与组件之间进行对齐。在布局开发中也是最常用的一种布局，而且可以结合其他布局进行页面设计。

自有XML属性：(基础属性省略了，这里罗列重要的一些属性)

所包含组件可支持的XML属性：

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

② DependentLayout 对应 RelativeLayout

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

自有XML属性：

所包含组件可支持的XML属性表：

包含组件的xml属性可以理解为DependentLayout布局的一大特性，种类较多就不一一列举了，简单的描述一下即可。

③ StackLayout 对应 FrameLayout

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

自有XML属性：

属性名称 属性描述 使用案例

layout_alignment 对齐方式 可以设置取值项如表中所列，也可以使用“|”进行多项组合。

ohos:alignment=“top|left”

④ TableLayout 对应 TableLayout

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

TableLayout的自有XML属性：

注意事项：在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。

目前仅支持Java代码设置TableLayout子组件的行列属性。

⑤ PositionLayout 对应 AbsoluteLayout

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

布局方式

PositionLayout以坐标的形式控制组件的显示位置，允许组件相互重叠。

在layout目录下的XML文件中创建PositionLayout并添加多个组件，并通过position_x和position_y属性设置子组件的坐标。

⑥ AdaptiveBoxLayout

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

该布局中的每个子组件都用一个单独的“盒子”装起来，子组件设置的布局参数都是以盒子作为父布局生效，不以整个自适应布局为生效范围。

该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数，高度为match_content，每一行中的所有盒子按高度最高的进行对齐。

该布局水平方向是自动分块，因此水平方向不支持match_content，布局水平宽度仅支持match_parent或固定宽度。

自适应仅在水平方向进行了自动分块，纵向没有做限制，因此如果某个子组件的高设置为match_parent类型，可能导致后续行无法显示。

AdaptiveBoxLayout常用方法列表

Java关键代码：

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
    // 添加规则
    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));
findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
    // 移除规则
    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));