如果你需要一种布局,在不使用复杂的层次结构的情况下,可以轻松控制子元件与父或兄弟元件的相对位置,那么 Lynx 自研的相对布局(relative layout)是最佳选择。
相对布局允许显示子元件在相对位置,每个元件的位置可以相对于兄弟元件(例如,位于另一个元件的左侧或下方)或相对于父区域来指定(例如,对齐底部、左侧或中心)。有关支持的属性,请参见参考部分。
以下示例展示了“用户名”(user name)和“用户名下面的描述”(user description)之间的位置关系,以及“用户名”与左侧的“头像”(avatar)的关系。此外,还有“关注”(follow)、“用户等级”(lv)和“关闭按钮”(close)之间的位置关系。该图用虚线和箭头表示了它们的相对位置关系。
使用相对布局实现上述效果,步骤如下:
display: relative
要使用相对布局,只需将 display: relative
应用于你想要进行相对布局的父元件。
通过使用 relative-id
(非 0
的整数)为相对布局中的子元件声明 ID,以便更好地识别每个元件。
使用以下边缘对齐样式,将当前元件与父或兄弟元件的某个边缘对齐。例如,使用 relative-align-top
可指定当前元件与目标元件的上边缘对齐。
物理属性:
逻辑属性:
使用以下相对位置样式,指定元件与兄弟元件的相对位置。例如,使用 relative-left-of
指定当前元件的右边缘紧靠着目标兄弟元件的左边缘。
物理属性:
逻辑属性:
使用 relative-center
可以指定子元件在容器中的居中方式。通过设置 vertical
实现垂直居中,设置 horizontal
实现水平居中,或者设置 both
同时实现垂直和水平居中。
该示例中,容器的宽度是固定的,高度则会依据内容变化。
根据渲染效果需求,可以为每个元件赋予相应属性。需要设置元件之间的间隙时,可使用 margin
。
最佳实践
使用相对布局可以为开发者带来便捷、高效的布局方案。开发时建议遵循以下原则:
相对于父容器的定位不会影响性能,可以自由使用。
当在兄弟间进行定位时,建议开启 relative-layout-once
属性(默认开启)。
非必要时,避免使用 a 依赖 b 的横向与 b 依赖 a 的纵向这种循环依赖,因为对性能影响较大。
请勿出现不能解决的循环依赖,这会导致布局失败。
尽量使用逻辑属性,如 relative-align-inline-start
和 relative-inline-start-of
以支持页面国际化。
目前,相对布局支持以下特有的布局属性:
编号
边缘对齐样式
物理属性
逻辑属性
相对位置样式
物理属性
逻辑属性
居中样式
布局优化开关