【中软国际】HarmonyOS 基础之 UI 布局(一) 精华

发布于 2021-8-5 10:44
浏览
2收藏

概述

​ 华为鸿蒙系统是一款全新的面向全场景的分布式操作系统,基于 harmony 的应用开发也越来越广泛。鸿蒙系统是否也能开发出像安卓平台一样绚丽多彩的应用 UI 界面呢?通过对 android UI 已有知识的回顾和最近 harmony 应用开发的学习研究,我总结了一篇UI框架开发文档,记录一些开发中可能遇到的小问题和有用的小技巧分享给大家。

常用布局

一、DirectionalLayout 布局

​ DirectionalLayout 布局即方向布局,该种分为两种模式 ( vertical ) 垂直排列子元素,( horizontal ) 水平排列子元素。垂直排列子元素 height 的总和不得超过父元素否则会被截取,超过部分无法显示。同理水平排列子元素 width 的总和如果超过父元素也会被截取。

​ 水平排列和垂直排列通过设置 ohos:orientation 属性定义,ohos:orientation = " vertical " 为垂直排列,ohos:orientation = " horizontal" 为水平排列;

1、垂直排列
<?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>

如上代码为垂直方向的三个textview布局,效果图如下:

【中软国际】HarmonyOS 基础之 UI 布局(一)-开源基础软件社区

2、水平排列
<?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>

如上代码为水平方向的三个textview布局,效果图如下:

【中软国际】HarmonyOS 基础之 UI 布局(一)-开源基础软件社区

3、对齐方式

DirectionalLayout 中的组件使用 layout_alignment 控制自身在布局中的对齐方式,当对齐方式与排列方式方向一致时,对齐方式不会生效具体见下表。

参数 作用 可搭配排列方式
left 左对齐 垂直排列
top 顶部对齐 水平排列
right 右对齐 垂直排列
bottom 底部对齐 水平排列
horizontal_center 水平方向居中 垂直排列
vertical_center 垂直方向居中 水平排列
center 垂直与水平方向都居中 水平/垂直排列

三种基本对齐方式:左对齐,右对齐,居中。分别对应 layout_alignment 属性的

ohos:layout_alignment=“left”

ohos:layout_alignment=“horizontal_center”

ohos:layout_alignment=“right”

布局展示的样式为:

【中软国际】HarmonyOS 基础之 UI 布局(一)-开源基础软件社区

4、权重

权重( 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>

以上代码展示的布局效果图如下:

【中软国际】HarmonyOS 基础之 UI 布局(一)-开源基础软件社区

二、DependentLayout 布局

DependentLayout 与 DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。

1、相对于同级组件的位置布局
位置布局 描述
above 处于同级组件的上侧。
below 处于同级组件的下侧。
start_of 处于同级组件的起始侧。
end_of 处于同级组件的结束侧。
left_of 处于同级组件的左侧。
right_of 处于同级组件的右侧。
2、相对于父组件的位置布局
位置布局 描述
align_parent_left 处于父组件的左侧。
align_parent_right 处于父组件的右侧。
align_parent_start 处于父组件的起始侧。
align_parent_end 处于父组件的结束侧。
align_parent_top 处于父组件的上侧。
align_parent_bottom 处于父组件的下侧。
center_in_parent 处于父组件的中间。

DependentLayout 布局类似于 Android 的 RelativeLayout 比较灵活,具体怎么展示和调整组件布局可自行测试。

三、TableLayout 布局

TableLayout使用表格的方式划分子组件, 也就是行和列的方式,TableLayout可配置表格的排列方式,行数和列数,以及组件的位置。

1、行列的设置

ohos:row_count 表示设置网格布局中行数,ohos:column_count 表示设置网格布局中的列数。如果没有为子布局设置行列数,则自动继承父布局的行数和列数。在网格布局中若子组件的数量超出列数设置,则会自动添加行数。比如设置一行,两列,但是是三个子组件,行数设置失效,就会自动增加一行。如下设置三行两列。则布局就是如下展示。

<TableLayout
    ...
    ohos:row_count="3"
    ohos:column_count="2"
    />

【中软国际】HarmonyOS 基础之 UI 布局(一)-开源基础软件社区

2、设置对齐方式

通过属性 ohos:alignment_type 来设置对齐方式,如下:

<TableLayout
    ...
    ohos:alignment_type="align_contents">
    ...
</TableLayout>
属性值 效果
align_edges 表示子组件边界对齐,默认对齐方式。
align_contents 表示子组件边距对齐。

四、StackLayout

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>

以上代码效果图如下:
【中软国际】HarmonyOS 基础之 UI 布局(一)-开源基础软件社区

更多原创内容请关注: 中软国际 HarmonyOS 技术学院

在研发和使用过程中关于组件的扩展、移植,复用及数据结构和算法等问题,欢迎各位研发小伙伴交流讨论,让我们一起携手前行共建鸿蒙生态。

4
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐