【鸿蒙 HarmonyOS】UI 布局 ( 线性布局 DirectionalLayout )

简介: 【鸿蒙 HarmonyOS】UI 布局 ( 线性布局 DirectionalLayout )
+关注继续查看

文章目录

一、线性布局 DirectionalLayout

二、垂直线性布局 DirectionalLayout

三、水平线性布局 DirectionalLayout





一、线性布局 DirectionalLayout


线性布局 DirectionalLayout , 指的是其中的组件都是按照一个方向 , 从左到右 , 或 从上到下 , 线性排列的 ;


线性布局需要设置一个方向 , 使用 ohos:orientation 属性设置 ;


如果设置 vertical 就是垂直方向 , 布局中的组件按照从上到下线性排列 ;


如果设置 horizontal 就是水平方向 , 布局中的组件按照从左到右的顺序线性排列 ;






二、垂直线性布局 DirectionalLayout


线性布局 DirectionalLayout 垂直摆放示例 :


<?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:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FF0000"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 1 "
        ohos:text_size="50"/>
    <Text
        ohos:id="$+id:text2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#00FF00"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 2 "
        ohos:text_size="50"/>
    <Text
        ohos:id="$+id:text3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#0000FF"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 3 "
        ohos:text_size="50"/>
</DirectionalLayout>


上述布局中 ohos:orientation=“vertical” 属性设置该线性布局是垂直摆放 , 展示效果图如下 :


image.png






三、水平线性布局 DirectionalLayout


线性布局 DirectionalLayout 水平摆放示例 :


<?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="horizontal">
    <Text
        ohos:id="$+id:text1"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#FF0000"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 1 "
        ohos:text_size="50"/>
    <Text
        ohos:id="$+id:text2"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#00FF00"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 2 "
        ohos:text_size="50"/>
    <Text
        ohos:id="$+id:text3"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#0000FF"
        ohos:layout_alignment="horizontal_center"
        ohos:text=" Hello World 3 "
        ohos:text_size="50"/>
</DirectionalLayout>



上述布局中 ohos:orientation=“horizontal” 属性设置该线性布局是水平摆放 , 展示效果图如下 :

image.png


目录
相关文章
|
4月前
|
XML Java 数据格式
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 二)
自定义布局 当Java UI框架提供的布局无法满足需求时,可以创建自定义布局,根据需求自定义布局规则
|
4月前
|
XML 前端开发 Java
HarmonyOS学习路之开发篇—Java UI框架(自定义组件与布局 一)
HarmonyOS提供了一套复杂且强大的Java UI框架,其中Component提供内容显示,是界面中所有组件的基类。ComponentContainer作为容器容纳Component或ComponentContainer对象,并对它们进行布局。
|
4月前
|
XML Java Android开发
HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)
Android的布局开发中存在五大布局,在鸿蒙布局开发中也存在与之相似的五种布局类型,唯一多余的一个类型叫做自适应盒子布局,布局可以在不同设备上有不同的展示方式。 熟悉Android开发的小伙伴可以参照Android的布局开发来学习。
HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)
|
4月前
|
XML Java 数据格式
HarmonyOS学习路之开发篇—— Java UI框架(组件与布局说明)
UI即使用在屏幕上显示的用户界面,该界面用来显示所有可能被用户查看和操作的内容。
|
XML 数据格式
【HarmonyOS】【xml】初学XML布局作业
【HarmonyOS】【xml】初学XML布局作业
49 0
【HarmonyOS】【xml】初学XML布局作业
|
XML Java 数据格式
鸿蒙学习笔记之使用 XML 方式创建布局
平常使用的 APP 应用会在屏幕上显示一个用户界面,该界面用来显示所有可被用户查看和交互的内容。而应用中所有的用户界面元素都是由 Component 和 ComponentContainer 对象构成。 Component 是绘制在屏幕上的一个对象,用户能与之交互。 ComponentContainer 是一个用于容纳其他 Component 和 ComponentContainer 对象的容器。
鸿蒙学习笔记之使用 XML 方式创建布局
|
XML JSON JavaScript
鸿蒙 DevEco Studio升级更新、新特性(新设备、布局预览)
鸿蒙 DevEco Studio升级更新、新特性(新设备、布局预览)
340 0
鸿蒙 DevEco Studio升级更新、新特性(新设备、布局预览)
|
XML 数据格式
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(二)
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(二)
181 0
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(二)
|
XML Java 数据格式
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(一)
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(一)
162 0
【鸿蒙 HarmonyOS】Ability 中使用 XML 布局文件 绘制布局及 UI 组件(一)
|
Android开发 容器
【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
209 0
【鸿蒙 HarmonyOS】Ability 中使用纯代码绘制布局及 UI 组件
推荐文章
更多