谷歌浏览器如果下载不了软件,请右键复制下载地址,到新标签页粘贴访问即可下载;或者换个浏览器

HarmonyOS之Java UI界面布局(一)详细-零基础

作者: 站长软件 日期: 2021-10-13 10:51:15 人气: - 标签: HarmonyOS Java UI界面 布局

科技速递:

目录

  1. 导读
  2. 定向布局 DirectionLayout
  3. 依赖布局 DependentLayout
  4. 位置布局 PositionLayout
  5. 表格布局 TableLayout
  6. 自适应布局 AdaptiveBoxLayout
  7. 堆叠布局 StackLayout
  8. HarmonyOS相关阅读

导读

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

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

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

什么是xml?

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

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

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

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

定向布局 DirectionLayout

DirectionLayout是java UI中的常用布局。

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

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

<?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">  //布局方向:垂直

  ……//组件代码写这边

</DirectionalLayout>
HarmonyOS之Java UI界面布局(一)详细-零基础

例子

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

<?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="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

垂直与水平方向都居中

水平/垂直排列

HarmonyOS之Java UI界面布局(一)详细-零基础

例子

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

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout  //定向布局
    xmlns:ohos="http://schemas.huawei.com/res/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来按比例分配父布局的宽度。

HarmonyOS之Java UI界面布局(一)详细-零基础

例子

<?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="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="http://schemas.huawei.com/res/ohos"
    ohos:width="match_content"	//表示组件大小与它的内容占据的大小范围相适应
    ohos:height="match_content"	>  //表示组件大小与它的内容占据的大小范围相适应
      
    ……//组件写这边
		 
</DependentLayout>
HarmonyOS之Java UI界面布局(一)详细-零基础

例子

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

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout	//依赖布局
    xmlns:ohos="http://schemas.huawei.com/res/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

处于同级组件的左侧。

right_of

处于同级组件的右侧。


HarmonyOS相关阅读

网友评论:

鸿蒙开发者许小懒 :没人看[流泪]

疯景先森 :这是啥[吃瓜群众]

跌进逆世界 :HTML我会,xml我是真不会

消灭伍独 :加油。国产系统靠你们了

晓之车 :应该升级下,别用这种,换vue那种写法

再路途 :啊你这,懂的人不需要看,别的人都看不懂[我想静静]

就在ni身边 :收藏,吃灰去吧[酷拽]

My19991231 :通俗易懂,??

晨风mj :学习学习

夜晚再动手 :这种东西发头条确实没啥人看CSDN看的人多,哈哈

My19991231 :好棒棒

文章来源:https://www.toutiao.com/group/6925959560230421003/

Copyright © 2009-2021 水淼软件技术 Inc. 保留所有权利。粤ICP备16013086号 粤ICP备16013086号-1 霏凡 转载侵权联系删除