第5章

布局




【学习目标】
■ 理解HarmonyOS应用中的布局
■ 掌握布局创建的两种基本方法
■ 掌握常用的布局，如DirectionalLayout、DependentLayout、StackLayout、TableLayout、PositionLayout等
■ 了解自定义布局及组件继承体系



10min






5.1布局概述
在HarmonyOS的UI框架中，布局其实就是组件容器。组件是为了解决在界面上放什么的问题，而布局则是为了解决怎么放的问题。我们可以把用户看到的界面看成一个大容器，容器中可以放置组件，也可以放置小的容器。
放置在用户界面中的布局(组件容器)和组件结构可以用树表示，树根是一个布局，里面包含组件和子布局，子布局中又包含组件或布局。实际上，组件容器可以理解成特殊的组件，这样用户界面中的元素就形成了一棵组件树，如图51所示，根据这种规律，设计者可以设计出丰富的界面效果。


图51组件树


组件树只是说明了应用界面中组件容器和组件之间的逻辑关系，为了更好地理解，可以把设备屏幕理解成一个矩形框。用户界面中的组件树结构如图52所示，这样就可以更容易地和设备中的应用界面对应。


图52用户界面中的组件树结构


尽管根据图52更容易把组件树结构和应用界面联系在一起，但是，同一个组件树在屏幕中放置组件的位置还没有确定。如果不进行一定的设定或约束，则势必会造成界面凌乱。布局可以很好地组织界面中的元素，使应用界面组织更有序、更丰富多彩。

Java UI框架关于组件和组件容器提供了Component和ComponentContainer两个类，前者称为组件，后者称为组件容器。实际上，ComponentContainer类继承自Component类，因此，组件容器是特殊的组件。
正如Text、Button、Image等继承自Componet的具体组件一样，组件容器也有常用的具体组件容器，如DirectionalLayout、DependentLayout、StackLayout等，这些具体的组件容器一般以Layout结尾，故通常称为布局。
每种布局都有自己的特点，根据自身特点提供了布局配置，通过布局配置为布局中的组件设定布局属性和参数。布局通过设置属性对包含在其中的子组件进行布置和约束，进而使应用界面的效果达到设计要求。
在布局文件代码方面，组件树是以XML文件方式组织的，布局属性是和XML标签属性对应的，图52对应的XML文件的结构如下：


<ComponentContainer1

属性 = 值

…>

<Component21/>

<ComponentContainer22

属性 = 值

…>

<Component31/>

<Component32/>

</ComponentContainer22>

<Component23/>

</ComponentContainer1>


5.2创建布局方式
创建布局有两种基本方式，一种方式是通过XML布局文件加载布局，另外一种方式是通过系统提供的布局类创建布局对象。
1. 通过XML文件加载布局
通过XML声明布局的方式简便直观。XML文件本身就是一个树形结构的标签文档，系统支持的每种布局都可以用XML标签表示，布局的属性可以通过设置XML标签的属性表示。
定义方向布局(DirectionalLayout)，代码如下：


<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_parent"

ohos:orientation="vertical"

ohos:padding="32">

<Button

ohos:id="$+id:button"

ohos:margin="50"

ohos:width="match_content"

ohos:height="match_content"

ohos:layout_alignment="horizontal_center"

ohos:text="My name is Button."

ohos:text_size="50"/>

</DirectionalLayout>


布局中可以放置组件或布局，这样编写的布局代码可以根据需要定义得更加复杂，只要按照布局树的基本结构，就可以任意定义布局文件。
通过setUIContent()方法可以使用定义好的布局文件资源，代码如下：


setUIContent(ResourceTable.Layout_ability_main);


在项目中，布局文件一般放置在entry→src→main→resources→base→layout目录下。
2. 使用布局类创建布局
布局在代码中也是一个对象，使用内置的布局类可以直接创建布局对象，通过设置对象的一些属性达到使用布局的目的。
下面以方向布局(DirectionalLayout)为例，说明使用该方式的过程。
首先，创建布局对象，代码如下：


DirectionalLayout dirLayout = new DirectionalLayout(getContext());


其次，设置布局属性，一般需要设置大小，即宽度和高度。调用方法设置布局对象的属性基本的代码如下：


dirLayout.setWidth(ComponentContainer.LayoutConfig.MATCH_PARENT);

dirLayout.setHeight(ComponentContainer.LayoutConfig.MATCH_PARENT);


方向布局一般需要设置布局中组件的排列方向，将排列方向设置为垂直排列，代码如下：


dirLayout.setOrientation(Component.VERTICAL);


通过调用布局方法，可以向布局中添加组件，也可以添加子布局。向布局中添加一个事先定义好的button组件，代码如下：


dirLayout.addComponent(button);


最后，将布局设置到应用界面中，代码如下：


setUIContent(directionalLayout);





17min






5.3常用布局
5.3.1DirectionalLayout


DirectionalLayout布局，也可以称为方向布局或线性布局，

该布局中的组件会按照某一方向线性排列在其中，方向布局是最常用的布局之一。


图53垂直方向线性排列


DirectionalLayout的排列方向(orientation)分为水平(horizontal)和垂直(vertical)两种方式。可以使用orientation属性设置布局内组件的排列方式，默认为垂直方式。
如果希望在一个布局里以垂直方向依次放置3个按钮组件，则可以选择方向布局，设计效果如图53所示。

将3个按钮按照垂直方向依次放置到方向布局中，左边界和布局对齐，按钮之间有一定的间隔，代码如下：


//ch05＼DirectionalLayout1项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_content"

ohos:orientation="vertical">

<Button



ohos:width="90vp"

ohos:height="50vp"

ohos:top_margin="10vp"

ohos:left_margin="10vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="Button 1"/>

<Button

ohos:width="90vp"

ohos:height="50vp"

ohos:top_margin="10vp"

ohos:left_margin="10vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="Button 2"/>

<Button

ohos:width="90vp"

ohos:height="50vp"

ohos:top_margin="10vp"

ohos:left_margin="10vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="Button 3"/>

</DirectionalLayout>




图54垂直方向线性
布局的运行效果



以上布局代码运行的效果如图54所示，该布局中的组件排列方向是通过布局的属性ohos:orientation进行设置的，当其值为vertical时，布局中的组件将按照垂直方向排列，当其值为horizontal时，布局中的组件将按照水平方向排列。

在布局代码中，方向布局属性ohos:width的值是match_parent，表示其宽度匹配父组件容器，由于该方向布局的外层没有别的布局了，因此其父组件容器为设备屏幕，属性ohos:height的值为match_content，表示适配其内容，即自动匹配其中的组件的高度。
代码中按钮组件属性ohos:background_element的值为$graphic:color_button_element，引用了别的资源文件，所引用的资源必须存在，因此对应的资源文件color_button_element.xml必须存在，代码如下：


//ch05＼DirectionalLayout1项目中的color_button_element.xml

<?xml version="1.0" encoding="utf-8"?>



<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:shape="rectangle">

<solid

ohos:color="#00FFFD"/>

</shape>


在方向布局中，通过orientation属性可以设定其中的组件应遵循的排列方向，但并不是说其中的组件只能放置在布局的一侧，可以使用组件的属性layout_alignment控制组件本身在布局中的对齐方式，当方向布局为垂直方向时，其中的组件layout_alignment的属性值可以为left、horizontal_center、right。
如图55所示，3个按钮按照垂直方向排列，第1个按钮居左，第2个按钮居中，第3个按钮居右。


图55不同的对齐方式


设置布局中组件的对齐方式属性ohos:layout_alignment的值，代码如下：


//ch05＼DirectionalLayout2项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_content"

ohos:orientation="vertical">

<Button

ohos:width="90vp"

ohos:height="50vp"

ohos:margin="10vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:layout_alignment="left"

ohos:text="Button 1"/>

<Button

ohos:width="90vp"

ohos:height="50vp"

ohos:margin="10vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"



ohos:layout_alignment="center"

ohos:text="Button 2"/>

<Button

ohos:width="90vp"

ohos:height="50vp"

ohos:margin="10vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:layout_alignment="right"

ohos:text="Button 3"/>

</DirectionalLayout>


运行效果如图56所示。

实际上既可以理解成3个按钮组件按照垂直排列，也可以理解成按照水平排列，只不过按照水平方向排列时，它们在父组件中的对齐方式依次为上、中、下而已。
在应用中，很多时候需要平均或按照一定比例分配组件所在的布局的空间大小，如图57(a)下方的导航菜单所示，4个菜单选项“消息”“好友”“动态”“我的”被平均分布在一个布局中，这样当界面从竖屏调整到横批时可以动态地调整，如图57(b)所示。


图56不同的对齐方式的运行效果图




图57导航菜单效果图



为了达到组件在线性布局中按照一定比例显示的目的，可以为线性布局中的组件设置权重，即weight属性，代码如下：


//ch05＼DirectionalLayoutDemo项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"



ohos:width="match_parent"

ohos:orientation="vertical">



<Text

ohos:height="0"

ohos:width="match_parent"

ohos:layout_alignment="center"

ohos:text_alignment="center"

ohos:background_element="#CCCCCC"

ohos:text="内容"

ohos:text_size="36vp"

ohos:weight="1"

>

</Text>



<DirectionalLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_content"

ohos:width="match_parent"

ohos:background_element="#330000FF"

ohos:orientation="horizontal">



<Button

ohos:height="match_content"

ohos:width="0vp"

ohos:element_top="$media:icon"

ohos:margin="5vp"

ohos:text="消息"

ohos:text_size="20vp"

ohos:layout_alignment="center"

ohos:weight="1"/>



<Button

ohos:height="match_content"

ohos:width="0vp"

ohos:element_top="$media:icon"

ohos:margin="5vp"

ohos:text="好友"

ohos:text_size="20vp"

ohos:layout_alignment="bottom"

ohos:weight="1"/>



<Button

ohos:height="match_content"

ohos:width="0vp"

ohos:element_top="$media:icon"



ohos:margin="5vp"

ohos:text="动态"

ohos:text_size="20vp"

ohos:layout_alignment="bottom"

ohos:weight="1"/>



<Button

ohos:height="match_content"

ohos:width="0vp"

ohos:element_top="$media:icon"

ohos:margin="5vp"

ohos:text="我的"

ohos:text_size="20vp"

ohos:layout_alignment="bottom"

ohos:weight="1"/>

</DirectionalLayout>

</DirectionalLayout>


该布局文件，外层是一个方向布局，布局的方向是垂直方向，里面包括一个Text和一个内层方向布局。内层方向布局的方向是水平方向，里面包含了4个按钮，分别是“消息”“好友”“动态”和“我的”，这4个按钮的ohos:weight属性值都被设置成了1，由于它们的权重一样，所以平均分配内层方向布局的水平空间。
一般情况下，组件在分配父布局的水平宽度空间的计算公式如下：

组件宽度=组件权重同级所有组件权重之和×父布局可分配宽度(51)

其中：

父布局可分配宽度=父布局宽度－所有同级组件宽度之和(52)

在实际使用过程中，为了使组件大小和权重成比例，一般会将同级的组件宽度属性width的值均设置为0，这样组件宽度就会按设置的权重比例分配父布局的宽度。对于未设置权重的组件，默认其权重是0。
在垂直方向的线性布局中，组件权重设置和组件高度分配与水平方向的线性布局类似，这里不再赘述。



15min






5.3.2DependentLayout
DependentLayout称为依赖布局，与方向布局相比，依赖布局拥有更多的排布方式。在依赖布局里，组件可以相对于其他组件设置位置，可以相对于其他同级元素组件的位置设置位置，也可以相对于父组件的位置设置位置。
依赖布局自身相对于父组件的对齐方式的属性取值如表51所示。


表51依赖布局的对齐方式的属性取值



属 性 取 值取 值 说 明使 用 说 明


ohos:alignment="left"左对齐，和其父组件左侧对齐
ohos:alignment="top"顶部对齐
ohos:alignment="right"右对齐
ohos:alignment="bottom"底部对齐
ohos:alignment="horizontal_center"水平居中，放置到其父组件的水平中心
ohos:alignment="vertical_center"垂直居中，放置到其父组件的垂直中心
ohos:alignment="center"居中，水平和垂直同时居中可以设置单个值，也可以使用"|"进行多值组合



如： 表示居上和居左

ohos:alignment="top|left"

在依赖布局中，组件可以通过一些属性设置其相对于其他组件或依赖布局的相对位置，组件的主要属性及含义如表52所示。


表52依赖布局中组件的属性值说明



属 性 名 称值类型说明
left_of
引用类型，仅可引用依赖布局中包含的其他组件的ID
将右边缘与另一个子组件的左边缘对齐
right_of
同上
将左边缘与另一个子组件的右边缘对齐
above
同上
将下边缘与另一个子组件的上边缘对齐
below
同上
将上边缘与另一个子组件的下边缘对齐
align_baseline
同上
将子组件的基线与另一个子组件的基线对齐
align_left
同上
将左边缘与另一个子组件的左边缘对齐
align_top
同上
将上边缘与另一个子组件的上边缘对齐
align_right
同上
将右边缘与另一个子组件的右边缘对齐
align_bottom
同上
将底边与另一个子组件的底边对齐
start_of
同上
将结束边与另一个子组件的起始边对齐
end_of
同上
将起始边与另一个子组件的结束边对齐
align_start
同上
将起始边与另一个子组件的起始边对齐
align_end
同上
将结束边与另一个子组件的结束边对齐
align_parent_left
布尔类型值
将左边缘与父组件的左边缘对齐，true表示对齐
align_parent_top
布尔类型值
将上边缘与父组件的上边缘对齐，true表示对齐
align_parent_right
布尔类型值
将右边缘与父组件的右边缘对齐，true表示对齐
align_parent_bottom
布尔类型值
将底边与父组件的底边对齐，true表示对齐
center_in_parent
布尔类型值
将子组件保持在父组件的中心，true表示对齐
horizontal_center
布尔类型值
将子组件保持在父组件水平方向的中心，true表示对齐
vertical_center
布尔类型值
将子组件保持在父组件垂直方向的中心，true表示对齐
align_parent_start
布尔类型值
将起始边与父组件的起始边对齐，true表示对齐
align_parent_end布尔类型值
将结束边与父组件的结束边对齐，true表示对齐

表52中属性的名字和它的含义是基本对应的。下面以图58说明组件间的相对位置依赖关系，假定依赖布局中组件A的位置已经确定，组件B~组件F和组件A位于同一个依赖布局内，它们可以放置在A的周边，这时我们就可以设置组件B~组件F的属性值来确定相对于组件A的位置。


图58依赖组件的位置关系


假设组件A的ID是component_a，如果希望达到图58所示的放置效果，则组件B~组件F的属性设置如表53所示。


表53组件B~F相对于组件A的位置属性设置



组件属 性 设 置说明
组件Bohos:left_of="$id:component_a"

ohos:align_top="$id:component_a"
放到A的左侧

上边缘和A对齐
组件C
ohos:above="$id:component_a"

ohos:align_left="$id:component_a"
放到A的上方

左边缘和A对齐
组件D
ohos:right_of="$id:component_a"

ohos:align_bottom="$id:component_a"
放到A的右侧

下边缘和A对齐
组件E
ohos:below="$id:component_a"

ohos:align_right="$id:component_a"
放到A的下边

右边缘和A对齐

组件F
ohos:left_of="$id:component_a"

ohos:below="$id:component_a"
放到A的左侧

下边缘和A的上边缘对齐

ohos:below="$id:component_a"

ohos:start_of="$id:component_a"
放到A的下面

结束边(右边)和A的起始边(左边)对齐

具体实现的布局，代码如下：


//ch05＼DependentLayout1项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<DependentLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_parent">

<Button

ohos:id="$+id:component_a"



ohos:width="100vp"

ohos:height="100vp"

ohos:margin="1vp"

ohos:horizontal_center="true"

ohos:vertical_center="true"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 A"/>

<Button

ohos:id="$+id:component_b"

ohos:width="60vp"

ohos:height="50vp"

ohos:left_of="$id:component_a"

ohos:align_top="$id:component_a"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 B"/>

<Button

ohos:id="$+id:component_c"

ohos:width="60vp"

ohos:height="50vp"

ohos:above="$id:component_a"

ohos:align_left="$id:component_a"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 C"/>

<Button

ohos:id="$+id:component_d"

ohos:width="60vp"

ohos:height="50vp"

ohos:right_of="$id:component_a"

ohos:align_bottom="$id:component_a"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 D"/>

<Button

ohos:id="$+id:component_e"

ohos:width="60vp"

ohos:height="50vp"

ohos:below="$id:component_a"




ohos:align_right="$id:component_a"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 E"/>

<Button

ohos:id="$+id:component_f"

ohos:width="60vp"

ohos:height="50vp"

ohos:below="$id:component_a"

ohos:start_of="$id:component_a"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 F"/>

</DependentLayout>



以上布局代码的运行效果如图59所示。
当依赖布局作为组件容器时，其包含的组件位置也可以相对于依赖布局进行设置。容器A是一个依赖布局，里面包含了组件B~组件F，它们可以相对于容器A放置到指定的位置，如图510所示。


图59依赖布局相对组件的运行效果





图510依赖布局的位置关系



如果希望达到该放置效果，则组件B~组件F的属性设置如表54所示。
有时组件的位置可以通过不同的属性设置方式实现，如组件F位于父容器A的中心，可以直接通过center_in_parent属性设置，也可以通过horizontal_center(水平居中)和vertical_center(垂直居中)两个属性共同设置，代码如下：


表54组件B~F相对于容器A的位置属性设置



组件属性设置说明
组件Bohos:align_parent_left="true"

ohos:align_parent_top="true"
左边缘和A对齐

上边缘和A对齐
组件C
ohos:align_parent_top="true"

ohos:horizontal_center="true"
上边缘和A对齐

水平方向在父组件中心
组件D
ohos:align_parent_right="true"

ohos:align_parent_top="true"
右边缘和A对齐

上边缘和A对齐
组件E
ohos:align_parent_right="true"

ohos:align_parent_bottom="true"
右边缘和A对齐

下边缘和A对齐

组件F
ohos:center_in_parent="true"放到父组件A中心

ohos:horizontal_center="true"

ohos:vertical_center="true"
放到父组件A水平中心

放到父组件A垂直中心




//ch05＼DependentLayout2项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<DependentLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_parent">

<DependentLayout

ohos:id="$+id:component_a"

ohos:width="300vp"

ohos:height="300vp"

ohos:margin="1vp"

ohos:horizontal_center="true"

ohos:vertical_center="true"

ohos:background_element="#FFBBBBBB"

>

<Button

ohos:id="$+id:component_b"

ohos:width="60vp"

ohos:height="50vp"

ohos:align_parent_left="true"

ohos:align_parent_top="true"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 B"/>

<Button

ohos:id="$+id:component_c"

ohos:width="60vp"

ohos:height="50vp"

ohos:align_parent_top="true"



ohos:horizontal_center="true"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 C"/>

<Button

ohos:id="$+id:component_d"

ohos:width="60vp"

ohos:height="50vp"

ohos:align_parent_right="true"

ohos:align_parent_top="true"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 D"/>

<Button

ohos:id="$+id:component_e"

ohos:width="60vp"

ohos:height="50vp"

ohos:align_parent_right="true"

ohos:align_parent_bottom="true"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 E"/>

<Button

ohos:id="$+id:component_f"

ohos:width="60vp"

ohos:height="50vp"

ohos:center_in_parent="true"

ohos:margin="1vp"

ohos:background_element="$graphic:color_button_element"

ohos:text_size="20vp"

ohos:text="组件 F"/>

</DependentLayout>

</DependentLayout>


这里，整体是一个依赖布局，在这个依赖布局里又包含了一个依赖布局，即容器A，其位置在父布局的中心，宽度和高度均为300vp，id为container_a，其内部又包含了组件B~F，运行效果如图511所示。

下面给出一个使用依赖布局的综合例子，该示例的运行效果如图512所示。

图512所示的界面效果与一些支付类移动应用界面类似，可以供开发者借鉴参考，界面中的一些图标及图片资源需要开发者自行准备，界面布局的代码如下：



图511依赖布局相对布局的运行效果




图512依赖布局综合示例







7min








//ch05＼DependentLayoutDemo项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<DependentLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:width="match_parent"

ohos:height="match_parent"

ohos:padding="5vp"

ohos:background_element="#25878787"

>

<DirectionalLayout

ohos:id="$+id:dirlayout1"

ohos:width="match_parent"

ohos:height="match_content"

ohos:orientation="horizontal"

ohos:align_parent_top="true"

ohos:background_element="#FF00FF00"

>

<Button

ohos:width="0"

ohos:weight="1"

ohos:height="match_content"

ohos:padding="30vp"

ohos:element_top="$media:icon1"

ohos:text="收款"

ohos:text_size="20vp" />

<Button

ohos:width="0"

ohos:weight="1"

ohos:height="match_content"

ohos:padding="30vp"

ohos:text="钱包"




ohos:element_top="$media:icon2"

ohos:text_size="20vp" />

</DirectionalLayout>

<Text

ohos:id="$+id:category01"

ohos:height="match_content"

ohos:width="match_parent"

ohos:top_margin="5vp"

ohos:below="$id:dirlayout1"

ohos:align_left="$id:dirlayout1"

ohos:background_element="#FFFFFF"

ohos:text_size="18vp"

ohos:text="理财类"

/>

<Button

ohos:id="$+id:btn01"

ohos:width="80vp"

ohos:height="match_content"

ohos:below="$id:category01"

ohos:align_left="$id:category01"

ohos:padding="10vp"

ohos:text="信用卡"

ohos:element_top="$media:icon3"

ohos:background_element="#FFFFFF"

ohos:text_size="18vp"/>

<Button

ohos:id="$+id:btn02"

ohos:width="80vp"

ohos:height="match_content"

ohos:right_of="$id:btn01"

ohos:align_top="$id:btn01"

ohos:padding="10vp"

ohos:text="理财通"

ohos:element_top="$media:icon4"

ohos:background_element="#FFFFFF"

ohos:text_size="18vp"/>



<Text

ohos:id="$+id:category02"

ohos:height="match_content"

ohos:width="match_parent"

ohos:top_margin="5vp"

ohos:below="$id:btn01"

ohos:align_left="$id:dirlayout1"

ohos:background_element="#FFFFFF"

ohos:text_size="18vp"


ohos:text="生活类"

/>

<Button





ohos:id="$+id:btn11"

ohos:width="80vp"

ohos:height="match_content"

ohos:below="$id:category02"

ohos:align_left="$id:category02"

ohos:padding="10vp"

ohos:text="水电费"

ohos:element_top="$media:icon5"

ohos:background_element="#FFFFFF"

ohos:text_size="18vp"/>

</DependentLayout>


这里，最外层是一个依赖布局，其内部的上方包含了一个方向布局，方向布局内又包含了收款和钱包功能。依赖布局的下方有多个文本和按钮，通过依赖的位置关系进行了布局。类似本例效果的界面在很多支付类应用中会出现，只不过会有一些差异，开发者可以根据实际需求，合理利用布局构建应用界面。



8min









图513栈布局


5.3.3StackLayout
StackLayout，即栈布局，栈布局直接在屏幕上开辟出一块空白的区域，位于栈布局中的组件以层叠的方式依次放置，栈布局中的元素类似一个栈结构，故称为栈布局。先放置的元素位于栈的下层，后放置的元素位于栈的上层，上一层的元素会遮挡下一层的元素视图，如图513所示。在栈布局中，所有的元素默认放置在栈布局的左上角。

栈布局好像没有布局，因为放置在其中的组件只是一层层堆放而已，因此栈布局自身没有定义更多的属性，一般仅需要设置栈布局的宽度、高度和背景。
栈布局中的元素默认被放置到左上角，也可以通过设置组件的布局对齐方式(layout_alignment)属性控制组件在栈布局中放置的位置，该属性的取值及说明如表55所示。


表55栈布局中组件对齐方式



组件布局方式取值取 值 说 明
ohos:layout_alignment="left"左对齐，组件左侧和所在布局左侧对齐
ohos:layout_alignment="top"
顶部对齐，组件上侧和所在布局上侧对齐
ohos:layout_alignment="right"
右对齐，组件右侧和所在布局右侧对齐
ohos:layout_alignment="bottom"
底部对齐，组件底边和所在布局底边对齐
ohos:layout_alignment="horizontal_center"
水平居中对齐，组件在水平方向上位于所在布局中心
ohos:layout_alignment="vertical_center"
垂直居中对齐，组件在垂直方向上位于所在布局中心
ohos:layout_alignment="center"
居中对齐，组件在水平和垂直方向上都位于所在布局中心

布局对齐方式layout_alignment属性的值可以使用“|”进行组合，如下代码表示顶部对齐且右对齐，即组件的右上角和所在的布局的右上角对齐，组件会被放置到所在布局的右下角，代码如下：


ohos:layout_alignment="right|buttom"


下面是一个栈布局的例子，运行效果如图514所示。在屏幕中有3个组件，分别是Layer1、Layer2、Layer3，Layer1被放置于最底层，Layer2被放置于第2层，Layer3被放置于Layer2之上，3个组件以中心对齐的方式被放置于同一个栈布局中。


图514栈布局示例的运行效果


如图514所示，运行效果对应的布局代码如下：


//ch05＼StackLayout1项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<StackLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:id="$+id:stack_layout"

ohos:height="match_parent"

ohos:width="match_parent">

<Text

ohos:id="$+id:text_blue"

ohos:text_alignment="bottom|horizontal_center"

ohos:text_size="24fp"

ohos:text="Layer 1"

ohos:height="400vp"

ohos:width="400vp"

ohos:layout_alignment="center"

ohos:background_element="#3F56EA" />



<Text

ohos:id="$+id:text_light_purple"

ohos:text_alignment="bottom|horizontal_center"

ohos:text_size="24fp"

ohos:text="Layer 2"

ohos:height="300vp"

ohos:width="300vp"

ohos:layout_alignment="center"

ohos:background_element="#00AAEE" />

<Text

ohos:id="$+id:text_orange"

ohos:text_alignment="bottom|horizontal_center"

ohos:text_size="24fp"

ohos:text="Layer 3"

ohos:height="200vp"

ohos:width="200vp"

ohos:layout_alignment="center"

ohos:background_element="#00BFC9" />

</StackLayout>


栈布局中组件首次放置时有一定的层次，但是，栈布局中组件的显示层次是可以动态调整的，可以通过代码加以修改控制。栈布局提供了改变其子组件显示层次的方法，将栈布局中的一个Text组件移动到栈布局的最上层，代码如下：


//ch05＼StackLayout1项目中的MainAbilitySlice.java

public void onStart(Intent intent) {

super.onStart(intent);

super.setUIContent(ResourceTable.Layout_ability_main);

ComponentContainer stackLayout = (ComponentContainer)

findComponentById(ResourceTable.Id_stack_layout);

Text textFirst=(Text)findComponentById(ResourceTable.Id_text_blue);

//设置单击监听

textFirst.setClickedListener(new Component.ClickedListener() {

@Override

public void onClick(Component component) {

//将组件移动到最前面，即最上层

stackLayout.moveChildToFront(component);

}

});

}





8min






5.3.4PositionLayout
PositionLayout，即坐标布局，也可称为位置布局或绝对布局。位于坐标布局中的子组件通过指定准确的(x,y)坐标值确定在布局中显示的位置。坐标布局可以理解成一个坐标系，其左上角为(0,0)，向右为x轴方向，向下为y轴方向，在坐标布局中，每个组件都可以设定一个坐标位置。
在坐标布局中，设置组件位置坐标的属性为ohos:translation_x和ohos:translation_y，前者表示x坐标，后者表示y坐标。使用坐标布局进行界面布局的示例，代码如下：


//ch05＼PositionLayout项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<PositionLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:id="$+id:position"

ohos:height="match_parent"

ohos:width="300vp"

ohos:background_element="#3387CEFA"

>

<Text

ohos:id="$+id:position_text_1"

ohos:height="50vp"

ohos:width="200vp"

ohos:background_element="#9987CEFA"

ohos:translation_x="100"

ohos:translation_y="20"

ohos:text="Title"

ohos:text_alignment="center"

ohos:text_size="20fp"/>

<Text

ohos:id="$+id:position_text_2"

ohos:height="200vp"

ohos:width="200vp"

ohos:background_element="#9987CEFA"

ohos:translation_x="20"

ohos:translation_y="180"

ohos:text="Content2"

ohos:text_alignment="center"

ohos:text_size="20fp"/>

<Text

ohos:id="$+id:position_text_3"

ohos:height="200vp"

ohos:width="300vp"

ohos:background_element="#9987CEFA"

ohos:translation_x="180"

ohos:translation_y="400"

ohos:text="Content3"

ohos:text_alignment="center"

ohos:text_size="20fp"/>

</PositionLayout>


以上代码的运行效果如图515所示。

组件坐标位置指的是组件左上角的位置。组件大小超出布局的部分将无法显示，如上例中Content3右侧超出了坐标布局的宽度，被自动裁剪了。当组件出现重叠时，处理方法和栈布局相同，即后放置的组件会被放置于先放置的组件的上方，如上例中Content3遮挡了Content2的一部分。
坐标布局中的组件位置也可以动态变化，组件提供了3个设置方法，帮助开发者在程序中控制组件在坐标布局的位置。setTranslation_x(float x)用于设置x坐标，setTranslation(float y)用于设置y坐标，setTranslation(float x, float y)可以同时设置x和y坐标。
坐标布局主要在同一个平面内通过坐标位置确定组件的位置关系，栈布局更适用于布置立体的层次关系。二者结合可以很好地解决应用中面与层之间的关系。下面以坦克大战游戏为例，综合应用一下栈布局和坐标布局。
在坦克大战游戏中有若干坦克、草地、奖品等，它们需要位于不同的层次，坦克位于底层，草地位于第2层，奖品位于最上层，因此可采用栈布局，这样不管何时出现坦克，坦克都能在草地下行驶，如图516所示。


图515坐标布局示例的运行效果




图516坦克游戏布局的应用示例



在同一层中，元素位置是可以变化的，如坦克是可以移动的，因此可以采用坐标布局，进而可以通过程序代码控制游戏，代码如下：


//ch05＼TankDemo项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<StackLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:background_element="#000000"



>

<PositionLayout

ohos:id="$+id:tanks"

ohos:height="match_parent"

ohos:width="match_parent"

>

<Image

 ohos:id="$+id:tank1"

 ohos:height="40vp"

 ohos:width="40vp"

 ohos:image_src="$media:pic"

 ohos:clip_alignment="top|center"

 />



<Image

ohos:id="$+id:tank2"

ohos:height="40vp"

ohos:width="40vp"

ohos:image_src="$media:pic"

ohos:clip_alignment="left|top"

ohos:translation_x="200"

ohos:translation_y="300"

/>

</PositionLayout>

<PositionLayout

ohos:id="$+id:grassland"

ohos:height="match_parent"

ohos:width="match_parent"

>

<Image

ohos:id="$+id:grassland1"

ohos:height="40vp"

ohos:width="40vp"

ohos:image_src="$media:pic"

ohos:clip_alignment="right|bottom"

ohos:translation_x="260"

ohos:translation_y="220"

/>

<Image

ohos:id="$+id:grassland2"

ohos:height="40vp"

ohos:width="40vp"

ohos:image_src="$media:pic"

ohos:clip_alignment="right|bottom"

ohos:translation_x="380"

ohos:translation_y="220"



/>

</PositionLayout>

<PositionLayout

ohos:id="$+id:reward"

ohos:height="match_parent"

ohos:width="match_parent"

>

<Image

ohos:id="$+id:star"

ohos:height="40vp"

ohos:width="40vp"

ohos:image_src="$media:pic"

ohos:clip_alignment="right|top"

ohos:translation_x="320"

ohos:translation_y="160"

/>

</PositionLayout>

</StackLayout>


在以上代码中，多次引用了图片资源$media:pic，并进行了适当的裁剪。资源图片文件pic.png如图517所示，该图片是一个120×80像素的图片，每个基本元素是40×40像素，共6个基本元素，分别代表4个方向的坦克、五角星、草地，当按照适当的方式裁剪后刚好可以得到其中的一个基本元素。

5.3.5TableLayout
TableLayout，即表格布局，表格布局使用表格的方式来组织其中的组件，一个表格可以分为若干行和若干列，表格布局中的组件依次被放置到各个单元格中。一个3行2列的表格布局示意图，如图518所示。



7min








图517资源图片文件pic.png




图518表格布局示意图



表格布局除了拥有布局统一具有的属性外，还有几个特有的属性，几个常用的属性及说明如表56所示。


表56表格布局的主要属性



属 性 名 称说明
ohos:row_count值取整数，表示表格的行数
ohos:column_count值取整数，表示表格的列数
ohos:orientation表格中组件排列方向。当取值为horizontal时表示水平方向，即表格布局的组件按照行优先的方式依次放入表格布局中，水平方向是默认方向； 当取值为vertical时表示垂直方向，即表格布局的组件按照列优先的方式依次放入表格布局中

表格布局为放置在其中的组件布置了一个隐形若干行和若干列的单元格，表格中的元素将依次被放置到各个单元格中。
对于一个3行2列的表格，如果按照行优先放置4个组件，则它们放置的顺序如图519(a)所示； 如果按照列优先放置4个组件，则放置的顺序如图519(b)所示。

下面是一个使用表格布局显示图片的示例，效果如图520所示。界面中包含6张图片，采用3行2列的表格布局。


图519按照行或列排列组件




图520使用表格布局



对应的布局文件的代码如下：


//ch05＼TableLayoutDemo项目中的ability_main.xml

<?xml version="1.0" encoding="utf-8"?>

<TableLayout

xmlns:ohos="http://schemas.huawei.com/res/ohos"

ohos:height="match_parent"

ohos:width="match_parent"

ohos:background_element="#EEEEEE"

ohos:layout_alignment="horizontal_center"

ohos:row_count="3"



ohos:column_count="2"

ohos:padding="8vp">

<Image

ohos:height="100vp"

ohos:width="130vp"

ohos:image_src="$media:pic1"

ohos:background_element="#2200FF00"

ohos:scale_mode="inside"

ohos:margin="8vp"

ohos:text="1"

ohos:text_alignment="center"

ohos:text_size="20fp"/>



<Image

ohos:height="100vp"

ohos:width="130vp"

ohos:image_src="$media:pic2"

ohos:background_element="#2200FF00"

ohos:scale_mode="inside"

ohos:margin="8vp"

ohos:text="2"

ohos:text_alignment="center"

ohos:text_size="20fp"/>



<Image

ohos:height="130vp"

ohos:width="130vp"

ohos:image_src="$media:pic3"

ohos:background_element="#2200FF00"

ohos:scale_mode="inside"

ohos:margin="8vp"

ohos:text="2"

ohos:text_alignment="center"

ohos:text_size="20fp"/>



<Image

ohos:height="100vp"

ohos:width="130vp"

ohos:image_src="$media:pic4"

ohos:background_element="#2200FF00"

ohos:scale_mode="inside"

ohos:margin="8vp"

ohos:text="2"

ohos:text_alignment="center"

ohos:text_size="20fp"/>





<Image

ohos:height="100vp"

ohos:width="130vp"

ohos:image_src="$media:pic5"

ohos:background_element="#2200FF00"

ohos:scale_mode="inside"

ohos:margin="8vp"

ohos:text="2"

ohos:text_alignment="center"

ohos:text_size="20fp"/>



<Image

ohos:height="130vp"

ohos:width="130vp"

ohos:image_src="$media:pic6"

ohos:background_element="#2200FF00"

ohos:scale_mode="inside"

ohos:margin="8vp"

ohos:text="2"

ohos:text_alignment="center"

ohos:text_size="20fp"/>



</TableLayout>


表格布局的单元格是隐形的，需放置的组件依次被放置到表格的每个格中，当表格中的元素大小不一致时，每一行的高度会取该行最高的元素的高度，每一列的宽度会取该列最宽的元素的宽度。如上例中，尽管每一行的顶部是对齐的，但是由于图片组件的高度不同，出现了下边界不齐的情况，因此，开发者在使用表格布局时，可以将其中的组件设置为相同的高度和宽度，以便表格中的元素显示及排列得更加整齐。



6min






5.4自定义布局
系统提供了一些常用的布局，多数情况下可以满足开发者的需要，但是，有时现有的布局不能很好地满足特殊需求，这时可以考虑自定义布局。
在Java UI框架中，布局其实就是一个具体的组件容器类，Java UI中组件类的继承关系如图521所示，箭头指向的方向为父类，前面介绍的常见布局DirectionalLayout、DependentLayout、StackLayout、PositionLayout、TableLayout都继承自ComponentContainer类。
在整个组件体系中，Component类是所有类的父类，由它派生出来很多组件容器和组件类。一般情况下，开发者只需选择合适的组件或组件容器便可满足开发应用的需求，但是，如果开发者需要，则完全可以通过继承组件体系中的类，进而扩展自定义布局或组件，以满足用户的特定需求。


图521组件类继承关系图


自定义布局可以继承ComponentContainer类或其子类，自定义布局类一般需要重新定义布局里的监听，需要测量控制布局及其包含的组件的大小，还需要控制组件的排列方式和位置等。下面是自定义布局的基本步骤： 
(1) 创建自定义布局的类，继承ComponentContainer类或其子类。
(2) 实现ComponentContainer.EstimateSizeListener接口，在onEstimateSize()方法中进行测量计算。
(3) 测量计算布局中每个子组件的大小和位置数据，并保存。
(4) 实现ComponentContainer.ArrangeListener接口，并在onArrange()方法中根据测量计算数据布置排列自定义布局中的子组件。
(5) 使用自定义布局创建布局对象，并在布局中添加若干子组件。
实际上，现有的常用布局也是通过继承ComponentContainer类实现的，它们只不过是事前定义好的自定义布局而已，开发者也可以学习其开源的源代码实现。总之，所有在已有布局中通过配置XML布局文件可以实现的，在自定义布局时都需要通过代码进行实现。
一般情况下，开发者不需要自定义布局或组件，可以通过现有的布局或组件嵌套、组合等多种方式完成复杂的界面设计效果。
小结
布局是组件容器，它可以更好地布置应用中的组件及组件容器，从而为应用创建丰富且灵活的符合用户需求的图形界面。Java UI框架主要提供了两种创建布局的方式，一种是通过XML定义布局，另一种是通过系统提供的布局类创建布局。常用的布局包括方向布局、依赖布局、栈布局、表格布局、坐标布局等，每种常用布局都有自身的特点。常用布局都继承自ComponentContainer类，开发者也可通过继承该类或其子类自定义布局。Java UI框架以Component类为根，建立了丰富的界面布局和组件体系。
习题
1. 判断题
(1) 布局一般继承自Container类。()
(2) 组件容器ComponentContainer类继承自Component类，因此布局其实是一种特殊的组件。()
(3) 创建和使用布局有两种基本方式，一种方式是通过XML布局文件加载布局，另一种方式是通过系统提供的布局类创建布局对象。()
(4) setUIContent()方法的作用是把布局设置到界面中。()
(5) 系统已经提供给了丰富的布局，可以通过组合、嵌套等方式实现所有的布局方式，因此开发者只能使用系统提供的布局，不可以自定义布局。()
2. 选择题
(1) 下面不是鸿蒙应用开发常用的布局的是()。

A. StackLayoutB. TableLayout
C. PositionLayoutD. GridLayout
(2) 关于布局说法不正确的是()。
A. 布局也是组件B. 布局可以嵌套
C. 布局也有大小D. 布局属性一旦确定不能改变
(3) 关于DirectionLayout说法不正确的是()。
A. 该布局中元素可以按水平方向线性排列
B. 该布局中元素可以按垂直方向线性排列
C. 该布局中元素默认为居中对齐
D. 该布局中可以嵌套DirectionLayout
(4) 下面的属性设置，可以把当前组件放到其父容器且水平居中的是()。
A. ohos:horizontal_center="true"
B. ohos:align_parent_top="true"
C. ohos:align_parent="center"
D. ohos:align_parent_in="center"
(5) 位置布局中组件通过指定(x，y)坐标设置位置，这里的坐标系的原点在()。
A. 设备屏幕的左上角B. 组件所在位置布局的左上角
C. 屏幕的中心D. 组件所在位置布局的中心
3. 填空题
(1) DirectionalLayout的排列方向属性ohos:orientation的值为时，表示其中的组件按垂直方向排列。
(2) 称为依赖布局，在依赖布局里，每个组件可以指定相对于其他同级元素的位置，也可以指定相对于父组件的位置。
(3) 布局中放置的组件是一层层的。
(4) TableLayout，即表格布局，在表格布局中，属性ohos:可以设置表格的列数。
(5) 布局是以组件坐标值确定在布局中位置的。
4. 上机题
(1) 仿照微信，实现其聊天界面的布局。
(2) 请实现一个九宫格界面布局，每个格中放置一张图片。