HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用

落日映苍穹つ 2022-10-09 04:53 175阅读 0赞

## AdaptiveBoxLayout 是什么 ##

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

个人感觉这个比较有意思的布局，不过感觉常用的还是DirectionalLayout和DependentLayout

比如下面的是竖着的，现在想让它变成横着的，

![20210623233108923.png][]

添加规则之后可以变成横着的

![20210623233221908.png][]

这个下面会用代码写一下，想看下AdaptiveBoxLayout 的属性把

下面是使用AdaptiveBoxLayout 需要注意的几点

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

## AdaptiveBoxLayout常用方法列表 ##

<table> 
 <thead> 
  <tr> 
   <th> <p>方法</p> </th> 
   <th> <p>功能</p> </th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td style="vertical-align:top;"> <p>addAdaptiveRule(int minWidth, int maxWidth, int columns)</p> </td> 
   <td style="vertical-align:top;"> <p>添加一个自适应盒子布局规则。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>removeAdaptiveRule(int minWidth, int maxWidth, int columns)</p> </td> 
   <td style="vertical-align:top;"> <p>移除一个自适应盒子布局规则。</p> </td> 
  </tr> 
  <tr> 
   <td style="vertical-align:top;"> <p>clearAdaptiveRules()</p> </td> 
   <td style="vertical-align:top;"> <p>移除所有自适应盒子布局规则。</p> </td> 
  </tr> 
 </tbody> 
</table>

##  demo 练习AdaptiveBoxLayout 的使用 ##

### demo1 竖着的布局变成两派两列 ###

xml 代码如下

<?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:weight="1"
            ohos:id="$+id:adaptive_box_layout">
    
            <Button
                ohos:id="$+id:button1"
                ohos:height="50vp"
                ohos:width="120vp"
                ohos:top_margin="10vp"
                ohos:background_element="#00FFFF"
                ohos:text="HarmonyOS"
                ohos:text_size="20fp"/>
    
            <Button
                ohos:id="$+id:button2"
                ohos:height="50vp"
                ohos:width="120vp"
                ohos:top_margin="10vp"
                ohos:background_element="#FF0000"
                ohos:text="HarmonyOS"
                ohos:text_size="20fp"/>
    
    
            <Button
                ohos:id="$+id:button3"
                ohos:height="50vp"
                ohos:width="120vp"
                ohos:top_margin="10vp"
                ohos:background_element="#00d8a0"
                ohos:text="HarmonyOS"
                ohos:text_size="20fp"/>
    
            <Button
                ohos:id="$+id:button4"
                ohos:height="50vp"
                ohos:width="120vp"
                ohos:top_margin="10vp"
                ohos:background_element="#00d8a0"
                ohos:text="HarmonyOS"
                ohos:text_size="20fp"/>
    
        </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="添加规则"/>
    
        <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="移除规则"/>
    
    </DirectionalLayout>

布局的效果图

![20210623233509375.png][]

java 代码添加规则

package com.example.myapplication.slice;
    
    import com.example.myapplication.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.AdaptiveBoxLayout;
    
    public class MainAbilitySlice extends AbilitySlice {
    
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
    
            AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
    
            findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
                // 添加规则
                adaptiveBoxLayout.addAdaptiveRule(100, 2000, 2);
                // 更新布局
                adaptiveBoxLayout.postLayout();
            }));
    
            findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
                // 移除规则
                adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 2);
                // 更新布局
                adaptiveBoxLayout.postLayout();
            }));
    
        }
    
    
        @Override
        public void onActive() {
            super.onActive();
        }
    
        @Override
        public void onForeground(Intent intent) {
            super.onForeground(intent);
        }
    }

实现的效果如下

![20210623233807184.gif][]

### demo2 把一排布局变成一排三列 ###

xml 代码

<?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:weight="1"
            ohos:id="$+id:adaptive_box_layout">
    
            <Button
                ohos:id="$+id:button1"
                ohos:height="50vp"
                ohos:width="80vp"
                ohos:top_margin="10vp"
                ohos:background_element="#00FFFF"
                ohos:text="java"
                ohos:text_size="20fp"/>
    
            <Button
                ohos:id="$+id:button2"
                ohos:height="50vp"
                ohos:width="80vp"
                ohos:top_margin="10vp"
                ohos:background_element="#FF0000"
                ohos:text="java"
                ohos:text_size="20fp"/>
    
    
            <Button
                ohos:id="$+id:button3"
                ohos:height="50vp"
                ohos:width="80vp"
                ohos:top_margin="10vp"
                ohos:background_element="#00d8a0"
                ohos:text="java"
                ohos:text_size="20fp"/>
    
    
        </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="添加规则"/>
    
        <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="移除规则"/>
    
    </DirectionalLayout>

xml 效果

![20210623234154493.png][]

java 代码添加规则

package com.example.myapplication.slice;
    
    import com.example.myapplication.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.AdaptiveBoxLayout;
    
    public class MainAbilitySlice extends AbilitySlice {
    
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
    
            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();
            }));
    
        }
    
    
        @Override
        public void onActive() {
            super.onActive();
        }
    
        @Override
        public void onForeground(Intent intent) {
            super.onForeground(intent);
        }
    }

具体效果图如下

![20210623234318840.gif][]

特别注意：添加规则和移除规则的columns 要相同否则没有效果会是移除没有效果，具体的位置如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

[官方文档参考链接][Link 1]

其他的布局

[HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用][HarmonyOS UI_ DirectionalLayout_]  
[HarmonyOS UI开发 DependentLayout(依赖布局) 的使用][HarmonyOS UI_ DependentLayout_]

[HarmonyOS UI开发 StackLayout(堆栈布局) 的使用][HarmonyOS UI_ StackLayout_]

[HarmonyOS UI开发 PositionLayout(位置布局) 的使用][HarmonyOS UI_ PositionLayout_]

[HarmonyOS UI开发 TableLayout(表格布局) 的使用][HarmonyOS UI_ TableLayout_]

[20210623233108923.png]: /images/20221005/024c3df13aa14168b2c3ba1fe3e06168.png
[20210623233221908.png]: /images/20221005/8a52280089ae4958a04f6f4304aa1f6b.png
[20210623233509375.png]: /images/20221005/2e5b190d486743b8a8e27c3a59e690fa.png
[20210623233807184.gif]: /images/20221005/bf7fefd147774ad0869a712bef2716ad.png
[20210623234154493.png]: /images/20221005/ee1377455fa543b39a38cd970b151936.png
[20210623234318840.gif]: /images/20221005/d4d71bcfed3a413cb9f8df931cc49e6f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221005/3b46c41783e84256a66ade2b22270491.png
[Link 1]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-adaptiveboxlayout-0000001104341118
[HarmonyOS UI_ DirectionalLayout_]: https://huxiaomu.blog.csdn.net/article/details/118075010
[HarmonyOS UI_ DependentLayout_]: https://huxiaomu.blog.csdn.net/article/details/118076995
[HarmonyOS UI_ StackLayout_]: https://huxiaomu.blog.csdn.net/article/details/118095017
[HarmonyOS UI_ PositionLayout_]: https://huxiaomu.blog.csdn.net/article/details/118163933
[HarmonyOS UI_ TableLayout_]: https://huxiaomu.blog.csdn.net/article/details/118198350