鸿蒙系统中的AdaptiveBoxLayout自适应盒子布局

Posted 2021-07-21 前进道路上的程序猿

前言

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

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

AdaptiveBoxLayout常用方法列表

参考文档：https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-adaptiveboxlayout-0000001104341118
下面我们就以案例来讲解下

准备

我们新建一个页面用于验证AdaptiveBoxLayout的使用

在弹出窗口中填入页面名称->点击finish

MainAbility中使用AdaptiveBoxSlice

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setMainRoute(AdaptiveBoxSlice.class.getName());
    }
}

AdaptiveBoxLayout的使用

我们在页面的样式文件中使用AdaptiveBoxLayout

定义组件

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <AdaptiveBoxLayout
        xmlns:ohos="http://schemas.huawei.com/res/ohos"
        ohos:height="0vp"
        ohos:width="match_parent"
        ohos:background_element="#A5D465"
        ohos:weight="1"
        ohos:id="$+id:adaptive_box_layout">
        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 1"
            ohos:text_size="18fp" />
        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 2"
            ohos:text_size="18fp" />
        <Text
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:multiple_lines="true"
            ohos:text="AdaptiveBoxLayout, where a number of boxes with the same width but varied heights are laid out. The height of a row is determined by the highest box."
            ohos:text_size="18fp" />
        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 4"
            ohos:text_size="18fp" />

        <Text
            ohos:height="40vp"
            ohos:width="match_parent"
            ohos:background_element="#952155"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="Add"
            ohos:text_size="18fp" />
        <Text
            ohos:height="40vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 5"
            ohos:text_size="18fp" />
        <Text
            ohos:height="160vp"
            ohos:width="80vp"
            ohos:background_element="#EC9DAA"
            ohos:margin="10vp"
            ohos:padding="10vp"
            ohos:text="NO 6"
            ohos:text_size="18fp" />
    </AdaptiveBoxLayout>

    <Button
        ohos:id="$+id:add_rule_btn"
        ohos:layout_alignment="horizontal_center"
        ohos:top_margin="10vp"
        ohos:padding="10vp"
        ohos:background_element="#A9CFF0"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="22fp"
        ohos:text="adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);"/>
    <Button
        ohos:id="$+id:remove_rule_btn"
        ohos:padding="10vp"
        ohos:top_margin="10vp"
        ohos:layout_alignment="horizontal_center"
        ohos:bottom_margin="10vp"
        ohos:background_element="#D5D5D5"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text_size="22fp"
        ohos:text="adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);"/>
</DirectionalLayout>

该文件中，首先在最外层添加垂直线性布局，然后里面添加自适应盒子布局和两个按钮用于添加样式和移除样式；
自适应盒子布局里有七个子组件，分别定义了他们的高度、宽度、背景、内边距、外边距，同时第三个子组件定义ohos:multiple_lines="true"表明该组件为多行

添加和移除布局规则

我们在slice中给两个按钮添加和移除自适应盒子布局规则

@Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_adaptive_box);

        AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);

        findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
            // 添加规则
            adaptiveBoxLayout.addAdaptiveRule(100, 3000, 3);
            // 更新布局
            adaptiveBoxLayout.postLayout();
        }));

        findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
            // 移除规则
            adaptiveBoxLayout.removeAdaptiveRule(100, 3000, 3);
            // 更新布局
            adaptiveBoxLayout.postLayout();
        }));
    }

代码中我们首先获取自适应盒子布局组件，然后获取两个按钮组件，并分别绑定点击事件，
第一个按钮用于给自适应盒子布局组件添加规则，规则中将盒子分为三列，每列宽度在100至3000之间
第二个按钮移除该布局规则

测试

我们在模拟器里查看

点击第一个按钮后

可以看到，自适应盒子布局被分为了三列，其中，最后一个组件NO 6因为被挤出了盒子，所以其样式不改变

点击第二个按钮后恢复：

更多技术交流请加入QQ群
群名称：华为鸿蒙harmonyos开发
群 号：1164091073