HarmonyOS之Java UI界面布局（一）详细-零基础

Code许小懒 05-29 2652

前言：

此刻姐妹们对“java背景颜色”都比较着重，我们都需要分析一些“java背景颜色”的相关知识。那么小编同时在网上收集了一些有关“java背景颜色””的相关文章，希望姐妹们能喜欢，大家快快来学习一下吧！

目录导读定向布局 DirectionLayout依赖布局 DependentLayout位置布局 PositionLayout表格布局 TableLayout自适应布局 AdaptiveBoxLayout堆叠布局 StackLayoutHarmonyOS相关阅读导读

大家好，本系列文章小懒给大家介绍HarmonyOS的页面布局，0基础也可以学会，创作不易，希望大家持续关注评论转发。

页面布局，顾名思义就是APP界面每个组件的布局。

HarmonyOS页面布局可以用JavaScript来布局，可以用java代码来布局，也可以用xml来布局。

什么是xml?

xml一般指可扩展标记语言。可扩展标记语言，标准通用标记语言的子集，简称xml。是一种用于标记电子文件使其具有结构性的标记语言。

我这边推荐使用xml来布局，安装Node.js可以调用Previewer预览器。

安装Node.js，步骤如下：请根据下载和安装Node.js指导，安装Node.js软件。在DevEco Studio中关闭当前打开的工程，然后重启DevEco Studio。重启DevEco Studio后，重新打开工程，然后点击Previewer使用预览器。

本系列文章分为3次详细讲解Java UI的6种布局。

定向布局 DirectionLayout

DirectionLayout是java UI中的常用布局。

排列方向（orientation）分为水平（horizontal）或者垂直（vertical）方向。

可以与其他布局组合成为更加复杂的组合布局。

<?xml version="1.0" encoding="utf-8"?>  <DirectionalLayout  //定向布局xmlns:ohos=";ohos:width="match_parent"  //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小ohos:height="match_content"  //表示组件大小与它的内容占据的大小范围相适应ohos:orientation="vertical">  //布局方向：垂直  ……//组件代码写这边</DirectionalLayout>

例子

下面实战演练下，譬如图片的布局应该如何写呢？

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout  //定向布局    xmlns:ohos=";    ohos:width="match_parent"  //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小    ohos:height="match_content"  //表示组件大小与它的内容占据的大小范围相适应    ohos:orientation="vertical">  //布局方向：垂直    <Button		//按钮        ohos:width="33vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:bottom_margin="3vp"  //组件上边距        ohos:left_margin="13vp"  //组件左边距        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:text="Button 1"/>  //组件文本              <Button  //按钮        ohos:width="33vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:bottom_margin="3vp"  //组件上边距        ohos:left_margin="13vp"  //组件左边距        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:text="Button 2"/>  //组件文本          <Button  //按钮        ohos:width="33vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:bottom_margin="3vp"  //组件上边距        ohos:left_margin="13vp"  //组件左边距        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:text="Button 3"/>  //组件文本         </DirectionalLayout>

对齐方式

DirectionalLayout中的组件使用layout_alignment控制自身在布局中的对齐方式

layout_alignment参数

参数

作用

可搭配排列方式

left

左对齐

垂直排列

top

顶部对齐

水平排列

right

右对齐

垂直排列

bottom

底部对齐

水平排列

horizontal_center

水平方向居中

垂直排列

vertical_center

垂直方向居中

水平排列

center

垂直与水平方向都居中

水平/垂直排列

例子

下面实战演练下，譬如图片的布局应该如何写呢？

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout  //定向布局    xmlns:ohos=";    ohos:width="match_parent"  //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小    ohos:height="60vp">  //布局高度    <Button        ohos:width="50vp"		//组件宽度        ohos:height="20vp"  //组件高度        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:layout_alignment="left"  //组件左对齐        ohos:text="Button 1"/>  //组件文本    <Button        ohos:width="50vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:layout_alignment="horizontal_center"  //组件水平方向居中        ohos:text="Button 2"/>  //组件文本    <Button        ohos:width="50vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:layout_alignment="right"  //组件右对其        ohos:text="Button 3"/>  //组件文本</DirectionalLayout>

权重

在实际开发中，很多时候需要组件按照比例来分配占用父组件的大小，这时候需要用到权重。

水平布局下计算公式：

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

组件宽度=组件weight/所有组件weight之和*父布局可分配宽度；

实际使用过程中，建议使用width=0来按比例分配父布局的宽度。

例子

<?xml version="1.0" encoding="utf-8"?><DirectionalLayout  //定向布局    xmlns:ohos=";    ohos:width="match_parent"   //表示组件大小将扩展为父组件允许的最大值，它将占据父组件方向上的剩余大小    ohos:height="match_content"  //表示组件大小与它的内容占据的大小范围相适应    ohos:orientation="horizontal">  //布局方向水平      <Button  //按钮        ohos:width="0vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:weight="1"  //权重        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:text="Button 1"/>  //组件文本          <Button        ohos:width="0vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:weight="1"  //权重        ohos:background_element="#878787"  //背景（定义背景颜色以及形状等等）        ohos:text="Button 2"/>  //组件文本       <Button        ohos:width="0vp"  //组件宽度        ohos:height="20vp"  //组件高度        ohos:weight="1"  //权重        ohos:background_element="#00FFFD"  //背景（定义背景颜色以及形状等等）        ohos:text="Button 3"/>  //组件文本</DirectionalLayout>

依赖布局 DependentLayout

DependentLayout是Java UI系统里的一种常用布局。

简单的来说就是一个组件相对于父组件或者同级组件他的相对位置。

<?xml version="1.0" encoding="utf-8"?>  <DependentLayout  //依赖布局  	    xmlns:ohos=";    ohos:width="match_content"	//表示组件大小与它的内容占据的大小范围相适应    ohos:height="match_content"	>  //表示组件大小与它的内容占据的大小范围相适应          ……//组件写这边		 </DependentLayout>

例子

下面实战演练下，譬如图片的布局应该如何写呢？

<?xml version="1.0" encoding="utf-8"?><DependentLayout	//依赖布局    xmlns:ohos=";    ohos:width="match_content"	//表示组件大小与它的内容占据的大小范围相适应    ohos:height="match_content"	//表示组件大小与它的内容占据的大小范围相适应    ohos:background_element="#EDEDED">  //背景（定义背景颜色以及形状等等）    <Text        ohos:id="$+id:text1"	//自己设置的每个组件的独立ID        ohos:width="match_content"	//表示组件大小与它的内容占据的大小范围相适应        ohos:height="match_content"	 //表示组件大小与它的内容占据的大小范围相适应        ohos:left_margin="15vp"  //组件左边距        ohos:top_margin="15vp"		//组件上边距        ohos:right_margin="40vp"  //组件右边距        ohos:text="text1"		//组件文本        ohos:text_size="20fp"	//组件文本字体大小        ohos:background_element="#00FFFD"/>	//背景（定义背景颜色以及形状等等）    <Text        ohos:id="$+id:text2"        ohos:width="match_content"	//表示组件大小与它的内容占据的大小范围相适应        ohos:height="match_content" 	//表示组件大小与它的内容占据的大小范围相适应        ohos:left_margin="15vp"  //组件左边距        ohos:top_margin="15vp"  //组件上边距        ohos:right_margin="40vp"  //组件右边距        ohos:bottom_margin="15vp"  //组件下边距        ohos:text="below text1"  //组件文本        ohos:text_size="20fp"  //组件字体大小        ohos:background_element="#00FFFD"		//背景（定义背景颜色以及形状等等）        ohos:below="$id:text1"/>  //在id:text1的下面</DependentLayout>

位置布局

描述

above

处于同级组件的上侧。

below

处于同级组件的下侧。

start_of

处于同级组件的起始侧。

end_of

处于同级组件的结束侧。

left_of

处于同级组件的左侧。