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

小半 • 2024年2月4日下午4:55 • 前端开发 • 阅读 433

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

说明

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

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

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

<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 使用，示例如下：

<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>