华为鸿蒙系统是一款全新的面向全场景的分布式操作系统，基于 harmony 的应用开发也越来越广泛。鸿蒙系统是否也能开发出像安卓平台一样绚丽多彩的应用 UI 界面呢?通过对 android UI 已有知识的回顾和最近 harmony 应用开发的学习研究，我总结了一篇UI框架开发文档，记录一些开发中可能遇到的小问题和有用的小技巧分享给大家。
DirectionalLayout 布局即方向布局，该种分为两种模式 ( vertical ) 垂直排列子元素，( horizontal ) 水平排列子元素。垂直排列子元素 height 的总和不得超过父元素否则会被截取，超过部分无法显示。同理水平排列子元素 width 的总和如果超过父元素也会被截取。
水平排列和垂直排列通过设置 ohos:orientation 属性定义，ohos:orientation = " vertical " 为垂直排列，ohos:orientation = " horizontal" 为水平排列;
复制
<?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"> <Text ohos:text="$string:HelloWorld" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:background_element="#f54444" ohos:layout_alignment="horizontal_center"/> <Text ohos:text="$string:HelloWorld" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:background_element="#f54444" ohos:layout_alignment="horizontal_center"/> <Text ohos:text="$string:HelloWorld" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:background_element="#f54444" ohos:layout_alignment="horizontal_center"/> </DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
如上代码为垂直方向的三个textview布局，效果图如下：
复制
<?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="horizontal"> <Text ohos:text="$string:HelloWorld" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:left_margin="10fp" ohos:background_element="#f54444" ohos:layout_alignment="horizontal_center"/> <Text ohos:text="$string:HelloWorld" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:left_margin="10fp" ohos:background_element="#f54444" ohos:layout_alignment="horizontal_center"/> <Text ohos:text="$string:HelloWorld" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:left_margin="10fp" ohos:background_element="#f54444" ohos:layout_alignment="horizontal_center"/> </DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
如上代码为水平方向的三个textview布局，效果图如下：
DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐方式，当对齐方式与排列方式方向一致时，对齐方式不会生效具体见下表。
三种基本对齐方式：左对齐，右对齐，居中。分别对应 layout_alignment 属性的
复制
ohos:layout_alignment=“left” ohos:layout_alignment=“horizontal_center” ohos:layout_alignment=“right”
1.
2.
3.
4.
5.
布局展示的样式为：
权重( weight )就是按比例来分配组件占用父组件的大小，通过 ohos:weight 属性来定义。布局计算公式为：组件宽度=组件weight/所有组件weight之和*父布局可分配宽度;如 ohos:weight 分别设置为 ohos:weight = “1”，ohos:weight = “2”，ohos:weight = "3"的三个空间，布局则分别占父空间的1/6 , 2/6 , 3/6 。
复制
<?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="horizontal"> <Text ohos:text="TEST" ohos:weight="1" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:background_element="#f78731"/> <Text ohos:text="TEST" ohos:weight="2" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:background_element="#f54444"/> <Text ohos:text="TEST" ohos:weight="3" ohos:width="match_content" ohos:height="match_content" ohos:text_size="50" ohos:top_margin="30fp" ohos:background_element="#f78731"/> </DirectionalLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
以上代码展示的布局效果图如下：
DependentLayout 与 DirectionalLayout相比，拥有更多的排布方式，每个组件可以指定相对于其他同级元素的位置，或者指定相对于父组件的位置。
DependentLayout 布局类似于 Android 的 RelativeLayout 比较灵活，具体怎么展示和调整组件布局可自行测试。
TableLayout使用表格的方式划分子组件, 也就是行和列的方式，TableLayout可配置表格的排列方式，行数和列数，以及组件的位置。
ohos:row_count 表示设置网格布局中行数，ohos:column_count 表示设置网格布局中的列数。如果没有为子布局设置行列数，则自动继承父布局的行数和列数。在网格布局中若子组件的数量超出列数设置，则会自动添加行数。比如设置一行，两列，但是是三个子组件，行数设置失效，就会自动增加一行。如下设置三行两列。则布局就是如下展示。
复制
<TableLayout ... ohos:row_count="3" ohos:column_count="2" />
1.
2.
3.
4.
5.
通过属性 ohos:alignment_type 来设置对齐方式，如下：
复制
<TableLayout ... ohos:alignment_type="align_contents"> ... </TableLayout>
1.
2.
3.
4.
5.
StackLayout 直接在屏幕上开辟出一块空白的区域，添加到这个布局中的视图都是以层叠的方式显示，而它会把这些视图默认放到这块区域的左上角，第一个添加到布局中视图显示在最底层，最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。
复制
<?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="第一层" ohos:height="400vp" ohos:width="400vp" ohos:background_element="#3F56EA" /> <Text ohos:id="$+id:text_light_purple" ohos:text_alignment="bottom|horizontal_center" ohos:text_size="24fp" ohos:text="第二层" ohos:height="300vp" ohos:width="300vp" ohos:background_element="#00AAEE" /> <Text ohos:id="$+id:text_orange" ohos:text_alignment="center" ohos:text_size="24fp" ohos:text="第三层" ohos:height="80vp" ohos:width="80vp" ohos:background_element="#00BFC9" /> </StackLayout>
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
以上代码效果图如下：
![[[417158]]](https://s6.51cto.com/oss/202108/12/532ef4442dfc87bd457daaa35d5591bb.png){kind=link}