vivo蓝河操作系统进阶指南-》屏幕适配

2023-11-14 10:42:54 阅读：158 来源： 互联网

标签：

蓝河操作系统支持对不同尺寸和不同形状的屏幕的适配能力。

1.等比放缩

在 manifest 文件中配置designWidth字段的设计基准宽度，蓝河应用便可以自动完成等比缩放。

// manifest.json
{
  "config": {
    "designWidth": 466
  }
}

如上示例中designWidth配置为 466px，那么所有的 px 单位使用都会按照 466px 的基准宽度换算。如下示例中显示为宽高都是屏幕宽度一半。

.box {
  width: 233px;
  height: 233px;
}

2.非等比屏幕

在非等比屏幕下，使用等比缩放或许不是开发想要的效果，这里蓝河应用提供了使用绝对宽度的方案来实现您想要的布局。

dp 单位

px 会使布局产生等比缩放效果，而 dp 为绝对的屏幕尺寸。

以宽度为示例，设备 dp 的计算方法如下：

屏幕宽度dp值 = 设备屏幕分辨率的宽度 / DPR

上述公式中 DPR 的取值可以查如下表格得到

规格	取值	说明
ldpi	0.75	低密度屏幕(~120dpi)
mdpi	1	中密度屏幕(~160dpi)(基准密度)
hdpi	1.5	高密度屏幕(~240dpi)
xhdpi	2.0	加高密度屏幕(~320dpi)
xxhdpi	3.0	超超高密度屏幕(~480dpi)
xxxhdpi	4.0	超超超高密度屏幕(~640dpi)

引入 DP 单位，开发者可以解决 非等比例的屏幕适配 ;比如:在 DPR 为 3 的小屏幕上希望内容显示较少，设置元素的宽度 dp 较小，在 DPR 为 3 的大屏幕上希望内容显示较多，设置元素的宽度 dp 较大;该单位可以像 px 单位一样，用于常⻅的 DOM 元素的宽度、高度上。如下示例

.box {
  width: 50dp;
  height: 50dp;
}

3.媒体查询

结合 dp 值，设备类型，开发者可以针对不同屏幕和设备写不同样式。如下示例：

/* 方表和手机上生效 */
@media screen and (device: watch-square) or screen and (device: phone) {
  .box {
    background-color: red;
  }
}

更多内容参考媒体查询

4.获取设备类型

在 template 或者 js 中，如果我们想差异性处理组件和逻辑，可以判断当前的设备类型。

如下示例，在布局中判断设备类型

<div>
  <header-of-square if="$device.deviceType == 'watch-square'">
  <header-of-round elif="$device.deviceType == 'watch-round'">
</div>

$device 的详细文档异步公共对象

5. 资源管理

资源是与您的应用程序捆绑和部署的文件，可在运行时访问。常⻅的资源类型包括静态数据(例如 JSON 文件)、配置文件、图标和图像(JPEG、WebP、GIF、动画 WebP/GIF、PNG、BMP 和 WBMP)。您的程序，或将运行在各种不同类型设备(屏幕分辨率也有差异);为追求最佳效果，在不同场景、设备、分辨率，您需要为之匹配不同的资源;这里提供一套匹配规则，使得您的应用，可以轻松与设备状态相匹配。在项目根目录 resources 文件夹下，您可以按需创建 json 格式的配置文件;其规则是:以 res 为前缀;用 - 作连接;根据需要添加限定词(涵盖内容及顺序为: 设备类型 > 屏幕密度);默认文件为:res- defaults.json。

├── resources
  │── res-pad.json
  │── res-watch.json
  └── res-defaults.json

5.1 resources 规则

1、res-watch-分辨率-手表形状-屏幕密度.json，短线连接的为限定词，限定词顺序为：分辨率 > 表盘形状 > 屏幕密度。

2、其中分辨率、手表形状和屏幕密度如无需要可以不用写

3、分辨率使用宽 x 高的形式，x 为英文字母 X 的小写

4、屏幕密度的枚举为：ldpi/mdpi/hdpi/xhdpi/xxhdpi/xxxhdpi 详细可见dp 单位

5、手表形状枚举值为：square 和 round

6、默认资源名为：res-defaults.json

7、资源的命中权重大小为：分辨率 (1000) > 表盘形状 (100) > 屏幕密度 (10)

为方便理解资源的生效顺序，我们可以假设下权重: 分辨率 = 1000, 表盘形状 = 100, 屏幕密度 = 10，以下权重越高则越会优先命中并生效。

// 匹配402x402，方形手表，屏幕密度120
// 权重：1110
res-watch-402x402-square-ldpi.json

// 匹配402x402，圆形手表
// 权重：1100
res-watch-402x402-round.json

// 匹配方形手表
// 权重：100
res-watch-square.json

// 匹配402x402的手表
// 权重：1000
res-watch-402x402.json

// 匹配手表密度为120dpi
// 权重：10
res-watch-ldpi.json

// 匹配手表
res-watch.json

// 匹配所有资源作为兜底
res-defaults.json

5.2 resources 配置

下面示例演示了如何配置 pad 和 watch 两种设备的资源的配置

// resources/res-pad.json
{
  "image": {
    "logo": "/common/pad/logo.png",
    "banner": "/common/pad/banner.png"
  },
  "colors": {
    "headerBackGround": "#ffffff"
  }
}

// resources/res-watch.json
{
  "image": {
    "logo": "/common/watch/logo.png",
    "banner": "/common/watch/banner.png"
  },
  "colors": {
    "headerBackGround": "#fff000"
  }
}

5.3 $res 方法

配置完 resources 后就可以使用$res 在 template 和 script 中使用了

属性	类型	参数	描述
$res	Function	path: String 资源路径	根据开发者配置的 resources 和当前系统的参数返回对应的资源

示例：

<template>
  <div style="background-color: {{ $res('colors.headerBackGround') }}">
    <image src="{{ $res('image.banner') }}"></image>
  </div>
</template>
<script>
  export default {
    onInit() {
      console.log(this.$res('image.banner'))
    }
  }
</script>

标签：
来源：

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9