HarmonyOS应用开发-原子化布局能力 原创

鸿蒙时代
发布于 2021-9-28 11:01
浏览
0收藏

由于设备屏幕规格的多样性,设计师往往需要花费许多时间精力在界面适配工作上,为了解决这一问题,HarmonyOS 设计工具提供了原子化布局能力。通过给画板上的图层设置不同能力,实现在任意拉伸画板时能够呈现理想的响应式布局效果,快速适配多屏幕设计。

工具提炼了七种原子化布局能力,可以划分为“自适应变化能力”和“自适应布局能力”两类。其中,自适应变化能力包含了缩放能力和拉伸能力,自适应布局能力包含了隐藏、折行、均分、占比和延伸能力。

一.自适应变化能力
当画板尺寸发生变化时,设置了自适应变化能力的图层,可以通过自身变化去适应画板尺寸的改变。

  1. 缩放能力
    缩放能力可以固定一个元素在容器中所占的宽、高比例,自动计算调整图层组的尺寸,避免手动拖拽修改尺寸带来的排版错乱等问题。缩放能力的可调参数包括:

可用空间:需要应用定义元素在容器中水平和垂直方向可用空间的百分比。
放大极限:定义元素缩放的最大值和最小值。当按照可用空间百分比计算得出的宽度或高度,超出了放大极限的定义,则按照相应的放大极限进行显示。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

  1. 拉伸能力
    拉伸能力可以固定一个元素在容器中的边距,容器发生水平或垂直方向上的拉伸时,元素保持设定的边距不变,进行拉伸。拉伸能力的可调参数包括:

固定边距:需要固定元素在容器中各个方向上的间距。
拉伸极限:定义元素宽高的最大值和最小值。定义了最大值后,若可用区域继续变大,元素宽高维持最大值;定义了最小值后,若可用区域继续变小,元素宽高维持最小值。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

二.自适应布局能力

  1. 隐藏能力
    隐藏能力能根据容器可用空间大小,动态计算容器内适合展示的元素,空间无法容纳全部元素时,显示优先级低的元素自动隐藏。隐藏能力的可调参数包括:

隐藏方向:容器可以指定水平方向还是垂直方向有隐藏能力,图层排成一行或者一列时,隐藏能力才会被触发。
隐藏顺序:当容器某一方向的空间发生变化时,元素根据定义的隐藏优先级顺序,体现隐藏效果。在设置隐藏优先级时,数字越大代表越优先隐藏,当有多个元素的优先级相同时,将同时出现或隐藏。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

  1. 折行能力
    折行能力根据容器的宽度计算出每行可容纳的元素个数,当容器宽度缩小,横向空间不足时,元素将自动向下折行。折行能力的可调参数包括:

折行方向:定义折行后的位置顺序。
对齐方式:定义元素的对齐情况。
元素间距:定义元素之间的间距。
折行参考值:可以定义各元素折行的参考值,当容器的可用宽度大于参考值之和时,体现为行布局,如未定义,默认的折行参考值等于各元素的实际宽度值。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

  1. 均分能力
    均分能力根据容器尺寸变化,重新调整内部图层与图层之间的距离,始终保证相等。均分能力的可调参数包括:

均分方向:容器可以指定水平方向还是垂直方向有均分能力。
边距定义:可以定义首尾两端的元素边距是否参与均分,或是指定固定的边距值。
间距极限:允许应用定义均分后的最小间距和最大间距。若达到定义的间距极限后,整体按定义的极限值,在空间中心对齐布局。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

  1. 占比能力
    占比能力按百分比把容器划分为多个可用空间,指定每个元素在各自的比例空间中进行布局。占比能力的可调参数包括:

占比方向:容器可以指定水平方向还是垂直方向有占比能力。
比值定义:当容器尺寸发生变化,组件内元素根据当前定义好的占比规则,分别在各自可用的容器区域内进行布局。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区
5. 延伸能力
延伸能力可以根据容器大小,动态计算容器中可以显示的元素个数,自动复制或者隐藏元素来适应容器大小。延伸能力的可调参数包括:

延伸方向:容器可以指定水平方向还是垂直方向有延伸能力。
间距定义:需要应用给出图层之间的间距,可显示的图层数量根据可用宽度和此值计算得出。
露出特征:可以定义最后是否需要有露出特征,用具体的vp值进行定义。
间距极限:在有露出特征的情况下,根据推荐间距,露出特征,当前宽度动态计算出可显示的元素个数和最终间距。允许定义最小间距。当最终间距不满足间距最小值时,可显示的元素个数减一。
HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

HarmonyOS应用开发-原子化布局能力-鸿蒙开发者社区

本文主要根据HarmonyOS官方文档整理创作。

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
HarmonyOS应用开发-原子化布局能力.docx 173.87K 23次下载
1
收藏
回复
举报
回复
    相关推荐