文章23 | 阅读 11448 | 点赞0
Android的布局开发中存在五大布局,在鸿蒙布局开发中也存在与之相似的五种布局类型,唯一多余的一个类型叫做自适应盒子布局,布局可以在不同设备上有不同的展示方式。
熟悉Android开发的小伙伴可以参照Android的布局开发来学习。
① DirectionalLayout 对应 LinearLayout
在此布局中可以对布局中的所有组件进行横向或纵向排列,并且使组件与组件之间进行对齐。在布局开发中也是最常用的一种布局,而且可以结合其他布局进行页面设计。
自有XML属性:(基础属性省略了,这里罗列重要的一些属性)
属性名称 | 属性描述 | 使用案例 |
---|---|---|
orientation | 子布局排列方向 | ohos:orientation=“horizontal” //表示水平方向布局<br>ohos:orientation=“vertical” //表示垂直方向布局 |
total_weight | 所有子视图的权重之和 | ohos:total_weight=“2.5” |
所包含组件可支持的XML属性:
属性名称 | 属性描述 | 使用案例 |
---|---|---|
weight | 比重 | ohos:weight=“1” |
注意事项:DirectionalLayout不会自动换行,其子组件会按照设定的方向依次排列,若超过布局本身的大小,超出布局大小的部分将不会被显示。
② DependentLayout 对应 RelativeLayout
DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。
自有XML属性:
属性名称 | 属性描述 | 使用案例 |
---|---|---|
alignment | 对齐方式 | 可以设置取值项如表中所列,也可以使用“|”进行多项组合。<br>ohos:alignment=“top|left” |
所包含组件可支持的XML属性表:
包含组件的xml属性可以理解为DependentLayout布局的一大特性,种类较多就不一一列举了,简单的描述一下即可。
属性名称 | 属性描述 | 使用案例 |
---|---|---|
left/right/end/start_of | 将右/左/开始/结束边缘与另一个子组件的左/右/结束/开始边缘对齐 | ohos:left/right/end/start_of="$id:component_id" |
above | 将下边缘与另一个子组件的上边缘对齐 | ohos:above="$id:component_id" |
below | 将上边缘与另一个子组件的下边缘对齐 | ohos:below="$id:component_id" |
align_baseline | 将子组件的基线与另一个子组件的基线对齐 | ohos:align_baseline="$id:component_id" |
align_left/right/top/bottom/start/end | 将左/右/顶部/底部边缘与另一个子组件的左/右/顶部/底部/开始/结束边缘对齐 | ohos:align_left/right/top/bottom/start/end="$id:component_id" |
align_parent_left/right/top/bottom/start/end | 将左/右/顶部/底部/开始/结束边与父组件的左/右/顶部/底部/开始/结束边对齐 | ohos:align_parent_left/right/top/bottom/start/end=“true” |
center_in_parent | 将子组件保持在父组件的中心 | ohos:center_in_parent=“true” |
horizontal_center | 将子组件保持在父组件水平方向的中心 | ohos:horizontal_center=“true” |
vertical_center | 将子组件保持在父组件垂直方向的中心 | ohos:vertical_center=“true” |
③ StackLayout 对应 FrameLayout
StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中的视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。
自有XML属性:
属性名称 | 属性描述 | 使用案例 |
---|---|---|
layout_alignment | 对齐方式 | 可以设置取值项如表中所列,也可以使用“|”进行多项组合。<br>ohos:alignment=“top|left” |
④ TableLayout 对应 TableLayout
TableLayout使用表格的方式划分子组件。
TableLayout的自有XML属性:
属性名称 | 属性描述 | 使用案例 |
---|---|---|
alignment_type | 对齐方式 | ohos:alignment_type=“align_edges” 表示TableLayout内的组件按边界对齐<br>ohos:alignment_type=“align_contents” 表示TableLayout内的组件按边距对齐 |
column_count | 列数 | ohos:column_count=“3” |
row_count | 行数 | ohos:row_count=“2” |
orientation | 排列方向 | ohos:orientation=“horizontal” 表示水平方向布局<br>ohos:orientation=“vertical” 表示垂直方向布局 |
注意事项:在设置子组件的行列属性时,TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
目前仅支持Java代码设置TableLayout子组件的行列属性。
⑤ PositionLayout 对应 AbsoluteLayout
在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角;当向下或向右移动时,坐标值变大;允许组件之间互相重叠。
布局方式
PositionLayout以坐标的形式控制组件的显示位置,允许组件相互重叠。
在layout目录下的XML文件中创建PositionLayout并添加多个组件,并通过position_x和position_y属性设置子组件的坐标。
⑥ AdaptiveBoxLayout
AdaptiveBoxLayout是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。
AdaptiveBoxLayout常用方法列表
方法 | 功能 |
---|---|
addAdaptiveRule(int minWidth, int maxWidth, int columns) | 添加一个自适应盒子布局规则。 |
removeAdaptiveRule(int minWidth, int maxWidth, int columns) | 移除一个自适应盒子布局规则。 |
clearAdaptiveRules() | 移除所有自适应盒子布局规则。 |
Java关键代码:
AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
// 添加规则
adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);
// 更新布局
adaptiveBoxLayout.postLayout();
}));
findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
// 移除规则
adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);
// 更新布局
adaptiveBoxLayout.postLayout();
}));
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47094733/article/details/121694711
内容来源于网络,如有侵权,请联系作者删除!