鸿蒙原生应用开发-折叠屏、平板设备服务卡片适配

一、 多设备卡片适配原则

为不同尺寸的卡片提供不同的功能

在卡片开发过程中请考虑适配不同尺寸的设备,特别是在折叠屏和平板设备上,设备屏幕尺寸的变化直接影响了卡片内容的展示。请发挥想象力设计具有自适应能力的卡片,避免在卡片内容不做任何处理的情况下直接适配成较大尺寸,原则上卡片尺寸越大呈现的信息要越丰富,可交互的范围也越大。

使用百分比方式配合标注

由于设备尺寸的不确定性会导致卡片的尺寸发生变化,设计师在交付卡片布局的过程中,可以使用百分比进行标注。例如标准尺寸的卡片宽度为 150vp,按钮距离卡片边缘间距为 24vp 时,当卡片宽度扩展时仍然使用相同的间距可能效果并不美观,我们可以换算出卡片的间距在标准尺寸下占整体比例的 16%,这样当卡片尺寸扩展到 200vp 时,卡片边距也就变成了 32vp,以此类推,能够保证一定程度下的适配效果。

二、 卡片对应宫格比例对照表

服务卡片参照桌面宫格布局为基准参照物,通过换算对应宫格来实现在不同设备的桌面适配。为了减少卡片尺寸的变化规律,当手机从 4*6 布局切换至 5*6 布局时,需保证中卡片和大卡片的最大宽度不变化。在平板的桌面 2*N 和 4*N 对应的桌面宫格对应更换为 2*3 和 3*3。

三、 多端适配尺寸

服务卡片需要适配除手机以外的折叠屏及平板等设备,可以在此处下载对应 Library(见附件链接) 文件,文件内包含对应的桌面宫格和详细尺寸描述。

本文根据HarmonyOS官方文档整理

附件链接:

HarmonyOSAPP开发相关组件: 深圳市蛟龙腾飞网络科技有限公司 - Gitee.com

相关推荐
小诸葛的博客12 分钟前
华为ensp实现跨vlan通信
网络·华为·智能路由器
康康这名还挺多2 小时前
鸿蒙HarmonyOS list优化一: list 结合 lazyforeach用法
数据结构·list·harmonyos·lazyforeach
晚秋大魔王5 小时前
OpenHarmony 开源鸿蒙南向开发——linux下使用make交叉编译第三方库——nettle库
linux·开源·harmonyos
python算法(魔法师版)9 小时前
.NET 在鸿蒙系统上的适配现状
华为od·华为·华为云·.net·wpf·harmonyos
bestadc10 小时前
鸿蒙 UIAbility组件与UI的数据同步和窗口关闭
harmonyos
枫叶丹411 小时前
【HarmonyOS Next之旅】DevEco Studio使用指南(二十二)
华为·harmonyos·deveco studio·harmonyos next
ax一号街阿楠13 小时前
华为FAT AP配置 真机
网络·华为·智能路由器
吗喽对你问好13 小时前
华为5.7机考第一题充电桩问题Java代码实现
java·华为·排序
乱世刀疤15 小时前
深度 |国产操作系统“破茧而出”:鸿蒙电脑填补自主生态空白
华为·harmonyos
博睿谷IT99_20 小时前
华为HCIP-AI认证考试版本更新通知
人工智能·华为