基本概念
-
锚点:通过锚点设置当前元素基于哪个元素确定位置。
-
对齐方式:通过对齐方式,设置当前元素是基于锚点的上中下对齐,还是基于锚点的左中右对齐。
锚点设置
锚点设置是指设置子元素相对于父元素或兄弟元素的位置依赖关系。
在水平方向上,可以设置left、middle、right的锚点。在竖直方向上,可以设置top、center、bottom的锚点。
为了明确定义锚点,必须为RelativeContainer及其子元素设置ID,用于指定锚点信息。ID默认为“__container__”,其余子元素的ID通过id属性设置。
不设置id的组件能显示,但是不能被其他子组件作为锚点,相对布局容器会为其拼接id,此id的规律无法被应用感知。
注意:互相依赖,环形依赖时容器内子组件全部不绘制。同方向上两个以上位置设置锚点,但锚点位置逆序时此子组件大小为0,即不绘制。
使用格式:
.alignRules({right:{anchor:'first',align:HorizontalAlign.Start},top:{anchor:'first',align:VerticalAlign.Bottom}} )
.alignRules(
{
方向:{anchor: 锚点id,align: 对齐方式}
}
)
一、实现一个相对父容器右上角显示的子元素
二、实现两个子元素相对排列
元素一(id:"first")相对父容器右上角排列,
要求元素二(id:"second")相对与元素一实现
1、元素二顶部在元素一下方
2、元素二右侧在元素二左侧
子组件位置偏移
子组件经过相对位置对齐后,位置可能还不是目标位置,开发者可根据需要进行额外偏移设置offset
.offset({x:-40,y:-20})