AdaptiveBoxLayout是鸿蒙操作系统中最具有特色的布局,可以方便开发者对组件的自适应排布。
AdaptiveBoxLayout是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。
- 该布局中的每个子组件都用一个单独的“盒子”装起来,子组件设置的布局参数都是以盒子作为父布局生效,不以整个自适应布局为生效范围。
- 该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数,高度为match_content,每一行中的所有盒子按高度最高的进行对齐。
- 该布局水平方向是自动分块,因此水平方向不支持match_content,布局水平宽度仅支持match_parent或固定宽度。
- 自适应仅在水平方向进行了自动分块,纵向没有做限制,因此如果某个子组件的高设置为match_parent类型,可能导致后续行无法显示。
AdaptiveBoxLayout布局常用方法如下。
方法 | 功能 |
---|---|
addAdaptiveRule(int minWidth, int maxWidth, int columns) | 添加一个自适应盒子布局规则。 |
removeAdaptiveRule(int minWidth, int maxWidth, int columns) | 移除一个自适应盒子布局规则。 |
clearAdaptiveRules() | 移除所有自适应盒子布局规则。 |
手机横屏与竖屏显示:
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_adap_box_layout);
//移除所有规则
adaptiveBoxLayout.clearAdaptiveRules();
//当布局宽在0~10000,每行显示2个组件
adaptiveBoxLayout.addAdaptiveRule(0,1000,2);
adaptiveBoxLayout.addAdaptiveRule(1000,2000,3);
adaptiveBoxLayout.addAdaptiveRule(2000,3000,4);
adaptiveBoxLayout.addAdaptiveRule(300,Integer.MAX_VALUE,5);
}
@Override
public void onActive() {
super.onActive();
}
@Override
public void onForeground(Intent intent) {
super.onForeground(intent);
}
}
xml:
<?xml version="1.0" encoding="utf-8"?>
<AdaptiveBoxLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:id="$+id:adap_box_layout"
ohos:height="match_parent"
ohos:width="match_parent"
>
<Text
ohos:id="$+id:text_helloworld"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="$string:mainability_HelloWorld"
ohos:text_size="40vp"
/>
<Text
ohos:id="$+id:text_helloworld2"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="#A989F86B"
ohos:layout_alignment="horizontal_center"
ohos:text="冰箱"
ohos:text_size="40vp"
/>
<Text
ohos:id="$+id:text_helloworld3"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="洗衣机"
ohos:text_size="40vp"
/>
<Text
ohos:id="$+id:text_helloworld4"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="#A989F86B"
ohos:layout_alignment="horizontal_center"
ohos:text="热水器"
ohos:text_size="40vp"
/>
<Text
ohos:id="$+id:text_helloworld5"
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$graphic:background_ability_main"
ohos:layout_alignment="horizontal_center"
ohos:text="饮水机"
ohos:text_size="40vp"
/>
</AdaptiveBoxLayout>