【HarmonyOS】【xml】初学XML布局作业
首先要明确，有两种布局方式
线性布局：
DirectionalLayout
依赖布局：
DependentLayout
好，接下来看一看下面的例子
页面案例1
代码如下：
<?xml version="1.0" encoding="utf-8"?>
<!--依赖布局-->
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#CCCCCC"
>
<!--添加ListContainer标识多行数据 -->
<ListContainer
ohos:id="$+id:list_container"
ohos:height="match_content"
ohos:width="match_parent"
ohos:above="$id:layout_bottom"
>
</ListContainer>
<!--按钮子布局-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true"
>
<!-- 编辑城市按钮-->
<Button
ohos:id="$+id:button_edit"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="编辑城市"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="24vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
/>
<!-- 添加城市按钮-->
<Button
ohos:id="$+id:button_add"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="添加城市"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="24vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
/>
</DirectionalLayout>
</DependentLayout>
<?xml version="1.0" encoding="utf-8"?>
<!--依赖布局-->
<DependentLayout //依赖布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#CCCCCC"
>
<!--添加ListContainer标识多行数据 -->
<ListContainer
ohos:id="$+id:list_container"
ohos:height="match_content"
ohos:width="match_parent"
ohos:above="$id:layout_bottom" //让此组件下边缘与另一个组件的上边缘对齐
>
</ListContainer>
<!--按钮子布局-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true" //将底边与父组件对齐
>
<!-- 编辑城市按钮-->
<Button
ohos:id="$+id:button_edit"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="编辑城市"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="24vp"
ohos:weight="1" //权重：1
ohos:layout_alignment="bottom" //对齐方式：底部对齐
/>
<!-- 添加城市按钮-->
<Button
ohos:id="$+id:button_add"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="添加城市"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="24vp"
ohos:weight="1" //权重：1
ohos:layout_alignment="bottom" //对齐方式：底部对齐
/>
</DirectionalLayout>
</DependentLayout>
页面案例2
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#F5FFC3"
ohos:orientation="vertical"
>
<!-- 线性布局 Picker-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:background_element="#FFAFF8CE"
ohos:above="$id:layout_bottom"
>
<Picker
ohos:id="$+id:picker_province"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
<Picker
ohos:id="$+id:picker_city"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
<Picker
ohos:id="$+id:picker_county"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
</DirectionalLayout>
<!-- 线性布局 按钮-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true"
>
<!-- 取消按钮-->
<Button
ohos:id="$+id:button_cancel"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="取消"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
<!-- 确定按钮-->
<Button
ohos:id="$+id:button_enter"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="确定"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
</DirectionalLayout>
</DependentLayout>
<?xml version="1.0" encoding="utf-8"?>
<DependentLayout //依赖布局
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#F5FFC3"
ohos:orientation="vertical" //子布局上下排列
>
<!-- 线性布局 Picker-->
<DirectionalLayout
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="horizontal" //子布局左右排列
ohos:background_element="#FFAFF8CE"
ohos:above="$id:layout_bottom"
>
<Picker
ohos:id="$+id:picker_province"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000" //顶部框线：颜色值
ohos:bottom_line_element="#000000" //底部框线：颜色值
ohos:layout_alignment="horizontal_center" //对齐方式：居中对齐
/>
<Picker
ohos:id="$+id:picker_city"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
<Picker
ohos:id="$+id:picker_county"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:weight="1"
ohos:normal_text_size="28vp"
ohos:selected_text_size="48vp"
ohos:normal_text_color="#FF6D6D6D"
ohos:selected_text_color="#FF000000"
ohos:top_line_element="#000000"
ohos:bottom_line_element="#000000"
ohos:layout_alignment="horizontal_center"
/>
</DirectionalLayout>
<!-- 线性布局 按钮-->
<DirectionalLayout
ohos:id="$+id:layout_bottom"
ohos:height="match_content"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:align_parent_bottom="true" //此组件底线与父组件底线对齐
>
<!-- 取消按钮-->
<Button
ohos:id="$+id:button_cancel"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="取消"
ohos:background_element="#FFFFFF"
ohos:text_color="#1F69FF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
<!-- 确定按钮-->
<Button
ohos:id="$+id:button_enter"
ohos:height="match_content"
ohos:width="match_parent"
ohos:text="确定"
ohos:background_element="#1F69FF"
ohos:text_color="#FFFFFF"
ohos:text_size="18vp"
ohos:weight="1"
ohos:layout_alignment="bottom"
ohos:padding="5vp"
/>
</DirectionalLayout>
</DependentLayout>
页面案例3
<?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:alignment="center"
ohos:orientation="vertical">
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="地区"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="温度"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="天气"
/>
</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:alignment="center"
ohos:orientation="vertical"> //上下布局
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp" //顶部边距
ohos:text="地区"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="温度"
/>
<Text
ohos:height="match_content"
ohos:width="match_content"
ohos:text_size="18vp"
ohos:top_margin="20vp"
ohos:text="天气"
/>
</DirectionalLayout>
【HarmonyOS】【xml】初学XML布局作业的更多相关文章
- Xml解析作业与Xml建模andXml建模作业
作业:config.xml解析 1.获取所有action中的type的值 public static void main(String[] args) throws Exception { Input ...
- XML初学笔记
一.基本概要: XML,全称是eXtensible Markup Language,可扩展的标记语言,是Web服务的基础之一,使用XML,用户可以定义自己需要的标记.而用户创建的标记可以使用文档类型定 ...
- xml初学简单介绍
什么是XML? 1.全称Extensible Markup Language,可扩展标记语言,W3C组织公布. 2.XML用来保存有一定结构关系的数据. 3.标签的嵌套,实质是一串字符串. 4.跨平台 ...
- XML 参考：XML基础 XML 简介
XML 参考:XML基础 -- XML简介和用途 转:http://www.cnblogs.com/Dlonghow/archive/2009/01/22/1379799.html XML 参考:XM ...
- hadoop三个配置文件的参数含义说明core-site.xml,hdfs-site.xml,mapred-site.xml
配置hadoop,主要是配置core-site.xml,hdfs-site.xml,mapred-site.xml三个配置文件,默认下来,这些配置文件都是空的,所以很难知道这些配置文件有哪些配置可以生 ...
- js解析xml,获取XMl标签属性值
<script type="text/javascript"> var xml="<?xml version=\"1.0\" enc ...
- XML Helper XML操作类
写的一个XML操作类,包括读取/插入/修改/删除. using System;using System.Data;using System.Configuration;using System.Web ...
- Linq to XML 读取XML 备忘笔记
本文转载:http://www.cnblogs.com/infozero/archive/2010/07/13/1776383.html Linq to XML 读取XML 备忘笔记 最近一个项目中有 ...
- Struts2中有关struts-default.xml,struts.xml,struts.properties文件详解
1) struts-default.xml 这个文件是struts2框架默认加载的配置文件.它定义struts2一些核心的bean和拦截器. <?xml version="1.0&qu ...
- XML.ObjTree -- XML source code from/to JavaScript object like E4X
转载于:http://www.kawa.net/works/js/xml/objtree-try-e.html // ========================================= ...
随机推荐
- 第二课 Dubbo设计的架构设计
总体架构 Dubbo的总体架构,如图所示: Dubbo框架设计一共划分了10个层,而最上面的Service层是留给实际想要使用Dubbo开发分布式服务的开发者实现业务逻辑的接口层.图中左边淡蓝背景的为 ...
- Java学习（十一）
今天学习了this和static关键字,这两个都是c++中学过的,但讲师还是讲了2个小时... 学得东西大部分都知道吧. this是当前对象的地址,类中带有static的方法不能使用this. 类中带 ...
- Python布尔值
在学到Python数据类型时,发现与大多数语言没什么区别 布尔值可以用 and or not 来运算 and运算是与运算,所有条件都符合才为true >>> True and Tru ...
- python读写文件with open
简介 使用python的过程中肯定少不了读取文件的操作, 传统的形式是使用 直接打开.然后在操作.然后再关闭, 这样代码量稍微大些不说,一旦在操作步骤中出现报错,则无法进行文件的关闭: 案例一(读取) ...
- Scrum精髓读书笔记
Scrum精髓 四 . Sprint Sprint的定义 Scrum在最长一个月的迭代或周期中安排工作,一般为2个星期,这些迭代或周期称为Sprint Sprint提供基本的Scrum骨架,大多数其他 ...
- myeclipse maven web打包
1.在当前的项目pom.xml的文件上,如下图所示:鼠标右键->run As->Maven Build...
- JavaScript高级程序设计读后感（一）之零碎知识点查漏补缺
目录 1-script延迟脚本defer及异步脚本async,区别及应用场景 2-未声明的变量,未初始化变量 3-Number parseInt 字符串转数值 ,进制转换 4-undefined &a ...
- ☕【Java深层系列】「技术盲区」让我们一起完全吃透针对于时间和日期相关的API指南
技术简介 java中的日期处理一直是个问题,没有很好的方式去处理,所以才有第三方框架的位置比如joda.文章主要对java日期处理的详解,用1.8可以不用joda. 时间概念 首先我们对一些基本的概念 ...
- Java计算器的简易实现（+-*/）
java计算器的简易实现(+-*/) import java.util.Scanner; /* 写一个计算器 实现加减乘除四个功能 并且能够用循环接收新的数据,通过用户交互实现 写四个方法 + - * ...
- Python 3 快速入门 2 —— 流程控制与函数
本文假设你已经有一门面向对象编程语言基础,如Java等,且希望快速了解并使用Python语言.本文对重点语法和数据结构以及用法进行详细说明,同时对一些难以理解的点进行了图解,以便大家快速入门.一些较偏 ...