天干计划（阏逢）-第四章Java UI设计与开发(4.5 常用布局开发指导)

作者：HairtailofDai

©著作权归作者所有：来自51CTOHarmonyOS技术社区作者HairtailofDai的原创作品，谢绝转载，否则将追究法律责任

一、天干计划介绍

见文章：天干计划介绍

见专栏：鸿蒙北向天干计划

频率：一周保底一更

一语以蔽之：天干计划是基于HCIA鸿蒙应用开发认证的学习路线、学习总结、学习经验的系列分享，以天干名称命名系列文章。

二、本文把握

• 归属：天干计划（阏逢）-第四章Java UI设计与开发

  • 对于本章的把握在天干计划（阏逢）-第四章Java UI设计与开发(4.1、4.2、4.4)中的第四章Java UI设计与开发总体把握有详细的分析

• 前驱：天干计划（阏逢）-第四章Java UI设计与开发(4.1、4.2、4.4)

• 本文：4.5 常用布局开发指导

  • 以文档驱动分析知识考点
  • 以代码驱动实现知识掌握

• 注意（重点把握方向、依赖、堆叠、表格四种常用布局）

  • 1. 《培训教材》只有DirectionalLayout、DependentLayout、StackLayout、TableLayout四种常见布局
    2. 《学员用书》有六种常见布局即DirectionalLayout、DependentLayout、StackLayout、TableLayout、PositionLayout、AdaptiveBoxLayout

三、4.5 常用布局开发指导（均提供源代码）

（一）四种重点常用布局

1. DirectionalLayout（两描述一特性）

（1）基本要点

• 中文描述：方向布局
• 概述：提供单一方向排列
• Java API：
  • A directional layout in which controls are arranged horizontally or vertically.一种定向布局，其中组件水平或垂直排列
  • 

（2）两描述一特性

• 两描述

  • 用于组件水平（horizontal）或垂直（vertical）排布，默认垂直（vertical）排布。
  • 不会自动换行，超出布局部分不予显示。

• 一特性

  • weight（权重）的使用：按比例分配子组件占父组件的大小

  • 区分：

    • DirectionalLayout自有属性：total_weight（所有子组件的权重之和）
    • DirectionalLayout所包含组件可支持的XML属性：weight（权重）
    • 总结：weight不是方向布局的自有属性，但方向布局可以作为子组件时，可设置其父组件支持他使用的属性weight。（有点绕，多半不会考，但学习的时候理清思路总是好的）

  • 计算：

    • 注意：在理解计算公式的时候，要注意在实际使用过程中，建议使用width=0来按比例分配父布局的宽度

    • $$
      父布局可分配宽度=父布局宽度-所有子组件宽度之和
      $$

    • $$
      组件宽度=\frac{weight}{total_-weight}*父布局可分配宽度
      $$

  • 代码演示（均可在本地预览器进行）：

    • demo1_directionallayout_base ，演示不会自动换行，超出布局部分不予显示。五个Text，第五个没完全显示。
    • demo2_directionallayout_weight ，演示weight的使用，五个Text按照1:2:3:2:1。
    • 图片：
    • 
    • 

2. DependentLayout（一描述两优先级）

(1)基本要点

• 中文描述：依赖布局
• 概述：提供相对位置排列
• Java API：
  • A dependent layout can contain multiple child components, which specifies their positions dependent on other components within the layout.从属布局可以包含多个子组件，这些子组件指定其位置，这些子组件依赖于布局中的其他组件。
  • 

（2）一描述两优先级

• 一描述

  • 可以指定子组件与父组件的相对位置关系，也可以指定子组件与子组件的相对位置关系

• 两优先级（在DependentLayout所包含组件可支持的XML属性）

  • 概述：设置子组件与父组件的相对位置时，属性之间会发生同时配置，发生冲突的情况。同理设置子组件与子组件的相对位置关系时也会发生。
  • 优先级图表：
  • 
  • 

• 代码演示（均可在本地预览器进行）：

• demo3_dependentlayout_conflict：演示冲突前与冲突后

  • 

3. StackLayout（一描述一方法）

（1）基本要点

• 中文描述：堆叠布局
• 概述：可以重叠组件的布局
• Java API：
  • StackLayout is used to reserve an area on the screen to display elements in the component. In general, only a single child component should be placed in a frame layout. If multiple child components exist, the latest component is displayed.StackLayout用于在屏幕上保留一个区域以显示组件中的元素。通常，框架布局中只应放置一个子构件。如果存在多个子组件，将显示最新的组件。
  • 

（2）一描述一方法

• 一描述
  • 堆叠布局中第一个添加到布局中的组件显示在最底层，最后一个被放在最顶层。上一层的组件会覆盖下一层的组件。
• 一方法
  • moveChildToFront(component)
    • 表示：将子组件从底层移到顶层显示
• 代码演示（需要在远程模拟器上跑）：
  • demo4_stacklayout_move ，演示基本堆叠效果与方法moveChildToFront(component)
  • 
  • 
  • 

4. TableLayout(三属性)

（1）基本要点

• 中文描述：表格布局
• 概述：提供带有表的组件的排列
• Java API：
  • TableLayout provides interfaces for aligning and arranging the components to display components in a component with tables. The arrangement mode, the number of rows and columns, and the component’s position can be configured.TableLayout提供了用于对齐和排列组件的接口，以显示带有表的组件中的组件。可以配置排列模式、行数和列数以及元件的位置。
  • 

（2）三属性（行数、列数、对齐方式）

• 设置行列（整数类型）
  • column_count列数
  • row_count行数
  • 注意：默认为一列多行
• 对齐方式
  • align_edges表示按边界对齐
  • align_contents表示按边距对齐
  • 注意：默认align_contents（按边距对齐）
  • 建议：大家对按边距和按别界其实没有什么概念，所以诸位可以按提供的源代码瞧一瞧。
• 代码演示（预览器）：
  • demo5_tablelayout_align_contents，演示按边距对齐
  • demo5_tablelayout_align_edges，演示按边界对齐
  • 
  • 

（二）两种稍微没那么重要的常用布局

1. PositionLayout（一注意）

（1）基本要点

• 中文描述：位置布局
• 概述：设置组件的X、Y坐标的位置布局
• Java API：
  • Position layouts are less flexible and more difficult to maintain due to the use of absolute positioning.由于使用绝对定位，位置布局不太灵活，更难维护。
  • 

（2）一注意

• 一注意
  • (0, 0)为左上角，允许组件之间互相重叠，不灵活，难维护。
• 代码示例：
  • PositionLayout官方提供的sample。关于sample的示例代码工程的学习，诸位可以关注我的专栏《山海经异兽录》一个sample一个异兽，解析sample，吞噬异兽！
  • demo6_positionlayout：演示一个平板的登录页面。（需要对xml使用preview）
  • 

2. AdaptiveBoxLayout（三方法）

（1）基本要点

• 中文描述：自适应盒子布局
• 概述：提供了在不同屏幕尺寸设备上的自适应布局能力
• Java API：
  • 自适应长方体布局自动划分为具有相同宽度和可能不同高度的长方体行和列。框的宽度取决于布局策略指定的布局宽度和每行框的数量。只有在前一行被填充后，新行才会开始。每个框包含一个子组件。每个长方体的高度由其包含的子构件的高度确定。每行的高度由该行中最高的框决定。布局的宽度只能设置为匹配父项或固定值。可以为布局中的构件设置长度、宽度和对齐模式。
  • 

（2）三方法

• 关于此布局主要是需要掌握AdaptiveBoxLayout布局常用方法即
  • addAdaptiveRule(int minWidth, int maxWidth, int columns)（添加规则）
  • removeAdaptiveRule(int minWidth, int maxWidth, int columns)（移除规则）
  • clearAdaptiveRules()（移除所有规则）
• 代码示例（需要对xml使用preview）
  • demo7_adaptiveboxlayout，演示了自定义盒子布局的方法。
  • 
  • 
  • 
  •