HarmonyOS学习路之开发篇JavaUI框架（六大布局开发）

　　一、布局介绍
　　Android的布局开发中存在五大布局，在鸿蒙布局开发中也存在与之相似的五种布局类型，唯一多余的一个类型叫做自适应盒子布局，布局可以在不同设备上有不同的展示方式。
　　熟悉Android开发的小伙伴可以参照Android的布局开发来学习。 二、布局开发
　　① DirectionalLayout 对应 LinearLayout
　　在此布局中可以对布局中的所有组件进行横向或纵向排列，并且使组件与组件之间进行对齐。在布局开发中也是最常用的一种布局，而且可以结合其他布局进行页面设计。
　　自有XML属性：(基础属性省略了，这里罗列重要的一些属性)
　　属性名称
　　属性描述
　　使用案例
　　orientation
　　子布局排列方向
　　ohos:orientation=＂horizontal＂ //表示水平方向布局
　　ohos:orientation=＂vertical＂ //表示垂直方向布局
　　total_weight
　　所有子视图的权重之和
　　ohos:total_weight=＂2.5＂
　　所包含组件可支持的XML属性：
　　属性名称
　　属性描述
　　使用案例
　　weight
　　比重
　　ohos:weight=＂1＂
　　注意事项：DirectionalLayout不会自动换行，其子组件会按照设定的方向依次排列，若超过布局本身的大小，超出布局大小的部分将不会被显示。
　　② DependentLayout 对应 RelativeLayout
　　DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。
　　自有XML属性：
　　属性名称
　　属性描述
　　使用案例
　　alignment
　　对齐方式
　　可以设置取值项如表中所列，也可以使用＂|＂进行多项组合。
　　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
　　对齐方式
　　可以设置取值项如表中所列，也可以使用＂|＂进行多项组合。
　　ohos:alignment=＂top|left＂
　　④ TableLayout 对应 TableLayout
　　TableLayout使用表格的方式划分子组件。
　　TableLayout的自有XML属性：
　　属性名称
　　属性描述
　　使用案例
　　alignment_type
　　对齐方式
　　ohos:alignment_type=＂align_edges＂ 表示TableLayout内的组件按边界对齐
　　ohos:alignment_type=＂align_contents＂ 表示TableLayout内的组件按边距对齐
　　column_count
　　列数
　　ohos:column_count=＂3＂
　　row_count
　　行数
　　ohos:row_count=＂2＂
　　orientation
　　排列方向
　　ohos:orientation=＂horizontal＂ 表示水平方向布局
　　ohos:orientation=＂vertical＂ 表示垂直方向布局  注意事项：在设置子组件的行列属性时，TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。
　　目前仅支持Java代码设置TableLayout子组件的行列属性。
　　⑤ PositionLayout 对应 AbsoluteLayout
　　在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。
　　布局方式
　　PositionLayout以坐标的形式控制组件的显示位置，允许组件相互重叠。
　　在layout目录下的XML文件中创建PositionLayout并添加多个组件，并通过position_x和position_y属性设置子组件的坐标。
　　⑥ AdaptiveBoxLayout
　　AdaptiveBoxLayout是自适应盒子布局，该布局提供了在不同屏幕尺寸设备上的自适应布局能力，主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。 该布局中的每个子组件都用一个单独的＂盒子＂装起来，子组件设置的布局参数都是以盒子作为父布局生效，不以整个自适应布局为生效范围。 该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数，高度为match_content，每一行中的所有盒子按高度最高的进行对齐。 该布局水平方向是自动分块，因此水平方向不支持match_content，布局水平宽度仅支持match_parent或固定宽度。 自适应仅在水平方向进行了自动分块，纵向没有做限制，因此如果某个子组件的高设置为match_parent类型，可能导致后续行无法显示。
　　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(); }));