HarmonyOS学习路之开发篇—Java UI框架(六大布局开发)

简介: Android的布局开发中存在五大布局,在鸿蒙布局开发中也存在与之相似的五种布局类型,唯一多余的一个类型叫做自适应盒子布局,布局可以在不同设备上有不同的展示方式。熟悉Android开发的小伙伴可以参照Android的布局开发来学习。

一、布局介绍

Android的布局开发中存在五大布局,在鸿蒙布局开发中也存在与之相似的五种布局类型,唯一多余的一个类型叫做自适应盒子布局,布局可以在不同设备上有不同的展示方式。

熟悉Android开发的小伙伴可以参照Android的布局开发来学习。


二、布局开发

① DirectionalLayout 对应 LinearLayout

在此布局中可以对布局中的所有组件进行横向或纵向排列,并且使组件与组件之间进行对齐。在布局开发中也是最常用的一种布局,而且可以结合其他布局进行页面设计。

自有XML属性:(基础属性省略了,这里罗列重要的一些属性)


image.png


所包含组件可支持的XML属性:

属性名称 属性描述 使用案例
weight 比重 ohos:weight=“1”

注意事项:DirectionalLayout不会自动换行,其子组件会按照设定的方向依次排列,若超过布局本身的大小,超出布局大小的部分将不会被显示。


② DependentLayout 对应 Relaimage.pngtiveLayout


DependentLayout是Java UI框架里的一种常见布局。与DirectionalLayout相比,拥有更多的排布方式,每个组件可以指定相对于其他同级元素的位置,或者指定相对于父组件的位置。

自有XML属性:

image.png



所包含组件可支持的XML属性表:

image.png

包含组件的xml属性可以理解为DependentLayout布局的一大特性,种类较多就不一一列举了,简单的描述一下即可。


image.png

③ StackLayout 对应 FrameLayout


StackLayout直接在屏幕上开辟出一块空白的区域,添加到这个布局中的视图都是以层叠的方式显示,而它会把这些视图默认放到这块区域的左上角,第一个添加到布局中的视图显示在最底层,最后一个被放在最顶层。上一层的视图会覆盖下一层的视图。


自有XML属性:

image.png

属性名称 属性描述 使用案例

layout_alignment 对齐方式 可以设置取值项如表中所列,也可以使用“|”进行多项组合。

ohos:alignment=“top|left”

④ TableLayout 对应 TableLayout


TableLayout使用表格的方式划分子组件。


TableLayout的自有XML属性:


image.png



注意事项:在设置子组件的行列属性时,TableLayout剩余的行数和列数必须大于等于该子组件所设置的行数和列数。


目前仅支持Java代码设置TableLayout子组件的行列属性。


⑤ PositionLayout 对应 AbsoluteLayout


在PositionLayout中,子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角;当向下或向右移动时,坐标值变大;允许组件之间互相重叠。


布局方式


PositionLayout以坐标的形式控制组件的显示位置,允许组件相互重叠。


在layout目录下的XML文件中创建PositionLayout并添加多个组件,并通过position_x和position_y属性设置子组件的坐标。


⑥ AdaptiveBoxLayout


AdaptiveBoxLayout是自适应盒子布局,该布局提供了在不同屏幕尺寸设备上的自适应布局能力,主要用于相同级别的多个组件需要在不同屏幕尺寸设备上自动调整列数的场景。


该布局中的每个子组件都用一个单独的“盒子”装起来,子组件设置的布局参数都是以盒子作为父布局生效,不以整个自适应布局为生效范围。

该布局中每个盒子的宽度固定为布局总宽度除以自适应得到的列数,高度为match_content,每一行中的所有盒子按高度最高的进行对齐。

该布局水平方向是自动分块,因此水平方向不支持match_content,布局水平宽度仅支持match_parent或固定宽度。

自适应仅在水平方向进行了自动分块,纵向没有做限制,因此如果某个子组件的高设置为match_parent类型,可能导致后续行无法显示。

AdaptiveBoxLayout常用方法列表



image.png

image.png

Java关键代码:

AdaptiveBoxLayout adaptiveBoxLayout = (AdaptiveBoxLayout)findComponentById(ResourceTable.Id_adaptive_box_layout);
findComponentById(ResourceTable.Id_add_rule_btn).setClickedListener((component-> {
    // 添加规则
    adaptiveBoxLayout.addAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));
findComponentById(ResourceTable.Id_remove_rule_btn).setClickedListener((component-> {
    // 移除规则
    adaptiveBoxLayout.removeAdaptiveRule(100, 2000, 3);
    // 更新布局
    adaptiveBoxLayout.postLayout();
}));
相关文章
|
7月前
|
IDE Java 编译器
java编程最基础学习
Java入门需掌握:环境搭建、基础语法、面向对象、数组集合与异常处理。通过实践编写简单程序,逐步深入学习,打牢编程基础。
405 1
|
7月前
|
存储 Oracle Java
java零基础学习者入门课程
本课程为Java零基础入门教程,涵盖环境搭建、变量、运算符、条件循环、数组及面向对象基础,每讲配示例代码与实践建议,助你循序渐进掌握核心知识,轻松迈入Java编程世界。
634 0
|
7月前
|
安全 前端开发 Java
《深入理解Spring》:现代Java开发的核心框架
Spring自2003年诞生以来,已成为Java企业级开发的基石,凭借IoC、AOP、声明式编程等核心特性,极大简化了开发复杂度。本系列将深入解析Spring框架核心原理及Spring Boot、Cloud、Security等生态组件,助力开发者构建高效、可扩展的应用体系。(238字)
|
7月前
|
负载均衡 Java API
grpc-java 架构学习指南
本指南系统解析 grpc-java 架构,涵盖分层设计、核心流程与源码结构,结合实战路径与调试技巧,助你从入门到精通,掌握高性能 RPC 开发精髓。
739 8
|
7月前
|
消息中间件 缓存 Java
Spring框架优化:提高Java应用的性能与适应性
以上方法均旨在综合考虑Java Spring 应该程序设计原则, 数据库交互, 编码实践和系统架构布局等多角度因素, 旨在达到高效稳定运转目标同时也易于未来扩展.
650 8
|
7月前
|
存储 安全 Java
《数据之美》:Java集合框架全景解析
Java集合框架是数据管理的核心工具,涵盖List、Set、Map等体系,提供丰富接口与实现类,支持高效的数据操作与算法处理。
|
7月前
|
存储 算法 安全
Java集合框架:理解类型多样性与限制
总之,在 Java 题材中正确地应对多样化与约束条件要求开发人员深入理解面向对象原则、范式编程思想以及JVM工作机理等核心知识点。通过精心设计与周密规划能够有效地利用 Java 高级特征打造出既健壮又灵活易维护系统软件产品。
205 7
|
8月前
|
Java
Java基础学习day08-作业
本作业涵盖Java中Lambda表达式的应用,包括Runnable与Comparator接口的简化实现、自定义函数式接口NumberProcessor进行加减乘及最大值操作,以及通过IntProcessor处理整数数组,实现遍历、平方和奇偶判断等功能,强化函数式编程实践。
125 5
|
容器
HarmonyOS实战—布局和组件的概述
HarmonyOS实战—布局和组件的概述
336 0
HarmonyOS实战—布局和组件的概述
|
7月前
|
移动开发 前端开发 Android开发
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡
1356 12
【02】建立各项目录和页面标准化产品-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓伊凡