当前位置:   article > 正文

21.HarmonyOS App(JAVA)自适应布局Layout使用方法

21.HarmonyOS App(JAVA)自适应布局Layout使用方法

AdaptiveBoxLayout是鸿蒙操作系统中最具有特色的布局,可以方便开发者对组件的自适应排布。

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

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

AdaptiveBoxLayout布局常用方法如下。

表1 AdaptiveBoxLayout常用方法列表

方法

功能

addAdaptiveRule(int minWidth, int maxWidth, int columns)

添加一个自适应盒子布局规则。

removeAdaptiveRule(int minWidth, int maxWidth, int columns)

移除一个自适应盒子布局规则。

clearAdaptiveRules()

移除所有自适应盒子布局规则。

手机横屏与竖屏显示: 

 

 

  1. package com.example.myapplication.slice;
  2. import com.example.myapplication.ResourceTable;
  3. import ohos.aafwk.ability.AbilitySlice;
  4. import ohos.aafwk.content.Intent;
  5. import ohos.agp.components.AdaptiveBoxLayout;
  6. public class MainAbilitySlice extends AbilitySlice {
  7. @Override
  8. public void onStart(Intent intent) {
  9. super.onStart(intent);
  10. super.setUIContent(ResourceTable.Layout_ability_main);
  11. AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout) findComponentById(ResourceTable.Id_adap_box_layout);
  12. //移除所有规则
  13. adaptiveBoxLayout.clearAdaptiveRules();
  14. //当布局宽在0~10000,每行显示2个组件
  15. adaptiveBoxLayout.addAdaptiveRule(0,1000,2);
  16. adaptiveBoxLayout.addAdaptiveRule(1000,2000,3);
  17. adaptiveBoxLayout.addAdaptiveRule(2000,3000,4);
  18. adaptiveBoxLayout.addAdaptiveRule(300,Integer.MAX_VALUE,5);
  19. }
  20. @Override
  21. public void onActive() {
  22. super.onActive();
  23. }
  24. @Override
  25. public void onForeground(Intent intent) {
  26. super.onForeground(intent);
  27. }
  28. }

 xml:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <AdaptiveBoxLayout
  3. xmlns:ohos="http://schemas.huawei.com/res/ohos"
  4. ohos:id="$+id:adap_box_layout"
  5. ohos:height="match_parent"
  6. ohos:width="match_parent"
  7. >
  8. <Text
  9. ohos:id="$+id:text_helloworld"
  10. ohos:height="match_content"
  11. ohos:width="match_content"
  12. ohos:background_element="$graphic:background_ability_main"
  13. ohos:layout_alignment="horizontal_center"
  14. ohos:text="$string:mainability_HelloWorld"
  15. ohos:text_size="40vp"
  16. />
  17. <Text
  18. ohos:id="$+id:text_helloworld2"
  19. ohos:height="match_content"
  20. ohos:width="match_content"
  21. ohos:background_element="#A989F86B"
  22. ohos:layout_alignment="horizontal_center"
  23. ohos:text="冰箱"
  24. ohos:text_size="40vp"
  25. />
  26. <Text
  27. ohos:id="$+id:text_helloworld3"
  28. ohos:height="match_content"
  29. ohos:width="match_content"
  30. ohos:background_element="$graphic:background_ability_main"
  31. ohos:layout_alignment="horizontal_center"
  32. ohos:text="洗衣机"
  33. ohos:text_size="40vp"
  34. />
  35. <Text
  36. ohos:id="$+id:text_helloworld4"
  37. ohos:height="match_content"
  38. ohos:width="match_content"
  39. ohos:background_element="#A989F86B"
  40. ohos:layout_alignment="horizontal_center"
  41. ohos:text="热水器"
  42. ohos:text_size="40vp"
  43. />
  44. <Text
  45. ohos:id="$+id:text_helloworld5"
  46. ohos:height="match_content"
  47. ohos:width="match_content"
  48. ohos:background_element="$graphic:background_ability_main"
  49. ohos:layout_alignment="horizontal_center"
  50. ohos:text="饮水机"
  51. ohos:text_size="40vp"
  52. />
  53. </AdaptiveBoxLayout>

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家小花儿/article/detail/237017
推荐阅读
相关标签
  

闽ICP备14008679号