鸿蒙的四大布局

导读

前面八篇文章描述了鸿蒙app的配置文件,关于版本号,开发版本,桌面图标等等配置方式。从这一篇文章开始学习鸿蒙的UI使用方式。

前面我们学习到鸿蒙有ability和page的区分,ability类似Activity但又不完全一样(比如ability每一个都是独立的运行中菜单图标和名称,一样的是都有生命周期),page类似于xml也不完全一样(比如page中既有view的定义也有事件的定义)。
但是可以也看的出来page是负责UI组件描述的。

官方文档

Android视角看鸿蒙第九课-鸿蒙的布局-LMLPHP
文档地址
可以看的出来,鸿蒙和Android的UI分类基本类似,都是由布局(viewgroup)、组件(text,ibtn)、页面路由(intent,tab)、图形(img)、动画(anim)、交互事件(onTouch)等构成的,但是又多出来一个ArkTs,这个是鸿蒙的开发语言,但他放在了UI开发概述中,还是第一个,也许这个会是我们学习的重点,但是先不管他,还是从我们熟悉的五大布局开始。

鸿蒙的八大布局

Android视角看鸿蒙第九课-鸿蒙的布局-LMLPHP
相信有很多同学应该都对Android的五大布局滚瓜烂熟,没有办法早期面试必问,初学的同学可能还会磕磕绊绊的,想来想去都想不出来最不常用的AbsoluteLayout绝对布局。
现在好了华为有8大布局,哈哈哈哈!
其实鸿蒙的八大布局和Android的五大布局的概念是不一样的,具体分析后可以分为三类

线性布局(Row、Column)、层叠布局(Stack)、相对布局(RelativeContainer)

这三个是和Android无法布局一个概念,等同于LinearLayout、FrameLayout、RelativeLayout
虽然Android有五大布局但最常用的也就是这三个,
AbsoluteLayout绝对布局因为兼容问题基本没有使用场景,
TableLayout表格布局则太局限了,性能上也无法和GridLayout(recyclerView的GridLayout)相提并论。

弹性布局(Flex)

弹性布局是与线性布局类似的布局方式。区别在于弹性布局默认能够使子组件压缩或拉伸。在子组件需要计算拉伸或压缩比例时优先使用此布局,可使得多个容器内子组件能有更好的视觉上的填充容器效果。

类似于线性布局加强版

列表(List)、网格(Grid)

等同于Android 中的ListView、GridView,Android把这两个划分在了列表控件,鸿蒙则依然描述为布局。

栅格布局(GridRow、GridCol)

文档描述:
栅格是,通过将空间分割为有规律的栅格。栅格不同于网格布局固定的空间划分,它可以实现不同设备下不同的布局,空间划分更随心所欲,从而显著降低适配不同屏幕尺寸的设计及开发成本,使得整体设计和开发流程更有秩序和节奏感,同时也保证多设备上应用显示的协调性和一致性,提升用户体验。推荐手机、大屏、平板等不同设备,内容相同但布局不同时使用。

这个一定要和Grid区分开,虽然他也是Grid开头的,但他是为了保证屏幕比例差别越来越大的情况下时的UI体验,妥妥时代的巨轮。

说一下我自己的理解吧,在华为的元服务中把手机页面分为横排4个正方形格子,可以看下面的图
Android视角看鸿蒙第九课-鸿蒙的布局-LMLPHP
其他设备也是这样划分的,PC、TV等,是华为为了更好的屏幕兼容所推出的概念

媒体查询(@ohos.mediaquery)

文档描述
媒体查询可根据不同设备类型或同设备不同状态修改应用的样式。例如根据设备和应用的不同属性信息设计不同的布局,以及屏幕发生动态改变时更新应用的页面布局

这个相对来说更为特殊,其他布局都是大写字母开始的,这个是由@开始。
根据文档描述,依然主要用于屏幕比例发生改变时。

轮播(Swiper)

等同于Viewpager。

结语

虽然华为有八大布局,但是可以分为
(线性布局、层叠布局、相对布局)等类Android布局;
弹性布局为线性布局加强版;
(列表(List)、网格(Grid))等列表布局;
轮播(Swiper)类Viewpager布局;

(栅格布局(GridRow、GridCol)、媒体查询(@ohos.mediaquery))等跨设备兼容布局

android常用的布局基本都是存在的,我能想到的是缺少了瀑布流,也许因为用的少官方不直接提供了吧,也许划分在了其他的描述里,后面再关注。

下篇文章开始依次了解每个布局的具体用法。

03-26 13:15