OPPO主题组件开发 - 组件内容自适应

OPPO桌面有 3*5、3*6、4*5、4*6、5*5、5*6 等布局,随着布局不同,组件大小也会发生改变;不同型号手机分辨率不同,组件大小也不一致。这就要求组件内容做到自适应。

说明

OPPO主题组件自适应有两种表现方式,如下图所示。可以很明显的看到,第一种是根据宽高等比例缩放内容,第二种是固定内容在中间。

1. 组件内容根据宽高等比例缩放

我们的设计宽高以450为基准,计算实际宽高和设计宽高的比率,然后在代码实现上用 元素设计位置(x,y) x 比率 + 设计宽高 x 比率,就可以实现内容根据宽高等比例缩放;此外还可以配合使用 实际宽高 x 百分比 的方式。示例如下:

xml 复制代码
<Var name="design_w" expression="450" />
<!-- 默认间距要求48 -->
<Var name="margin" expression="48" />
<Var name="ratio_x" expression="#view_width/#design_w" />
<Var name="ratio_y" expression="#view_height/#design_w" />
<!-- 组件实际宽高默认内置 #view_width、#view_height -->
<Group w="200*#ratio_x" h="#view_height">
	<Group w="52*#ratio_x" h="#view_height/2">
		<Text y="60*#ratio_y" w="#view_width-200*#ratio_x-#margin" text="测试" />
	</Group>
</Group>

2. 固定内容在中间

已知设计稿的尺寸是450,判断实际尺寸 #view_width 大于 450+75 的时候就内容居中。
+75 是 oppo圆角;一定要大于 +75的原因是自己做的背景避免被系统裁剪,那么我们实际制作的时候就可以使用整体宽度缩减一点、高度缩减一点的写法,即 #view_width-(450 +75) > 0 使用,示例如下:

xml 复制代码
<Var name="oppo_bg_x" expression="ifelse(gt(#view_width-525,0),1,0)" type="number" persist="true" />
<Var name="mjui_xfx" expression="ifelse(gt(#view_width-525,0),int(#view_width-525),0)" type="string" persist="true" />
<Var name="mjui_xfy" expression="ifelse(gt(#view_height-525,0),int(#view_height-525),0)" type="string" persist="true" />

<Var name="w" expression="#view_width+int(@mjui_xfx)" type="number" />
<Var name="h" expression="#view_height+int(@mjui_xfy)" type="number" />

<Var name="wx" expression="#w/450" type="number" />
<Var name="hy" expression="#h/450" type="number" />
<Image name="system" src="bg.png" isBackground="true" />

<Group x="abs(int(#mjui_xfx)/2)" y="abs(int(#mjui_xfy)/2)">
	<Image src="a.png" x="#wx*37" y="#hy*84" w="min(#wx*100,100)" h="min(#wx*100,100)" align="left" alignV="center" />
</Group>
相关推荐
晓华-warm11 天前
Warm-Flow发布1.7.4, 设计器和流程图优化
java·中间件·流程图·组件·flowable·工作流·activities
程序员小张丶24 天前
基于ArkUI-X框架的HarmonyOS 5.0主题应用开发
华为·主题·arkui-x·harmonyos5.0
程序员小张丶24 天前
基于React Native开发HarmonyOS 5.0主题应用技术方案
javascript·react native·react.js·主题·harmonyos5.0
狼性书生1 个月前
uniapp实现的简约美观的星级评分组件
前端·uni-app·vue·组件
胡斌附体1 个月前
vue组件和插件的区别
vue.js·组件·插件·vue.component·vue.use
LearnerPing1 个月前
Vue3+Ts笔记:基于element-UI 实现下拉框滚动翻页查询通用组件
vue·ts·组件
问道飞鱼3 个月前
【Vue3知识】组件间通信的方式
开发语言·javascript·ecmascript·组件·通信
暮雨哀尘3 个月前
微信小程序开发:微信小程序组件应用研究
算法·微信·微信小程序·小程序·notepad++·微信公众平台·组件
清@尘3 个月前
ripro 主题激活 问题写入授权Token失败,可能无文件写入权限
主题·wordpress
予安灵3 个月前
Vue.js 组件开发全解析:从基础概念到实战应用
javascript·vue.js·flutter·前端框架·vue·组件