标签归档：VIVO适配

VIVO高长宽比设备应用适配指导意见

发表于由

一、 适配背景

目前vivo有意向采用1080×2400/1080×2460/1080×2520等更高长宽比分辨率，经测试发现有些游戏和应用存在异常边、花边、裁切、黑边过大等情况，为避免以上情况，需要对这些游戏和应用进行相应适配调整。建议游戏或应用适配时考虑更大屏幕比例的情况，提高不同屏幕比例的兼容性；同时建议不要固定屏幕比例来判断适配，这样会导致游戏或应用只能兼容固定屏幕比例。

二、调整意见

1、游戏logo或背景出现异常边

描述：logo或背景两侧，出现黑边、蓝边、白边等异常边。

原因：logo或背景宽高比例过小。

措施：建议采用第一条。

（1）提供宽高比例更大的logo或背景；

（2）优先匹配屏幕高度，宽度可稍微裁切(不影响用户体验)；

（3）比例相差不大的情况下，可适度拉伸(不影响用户体验)。

2、游戏出现异常边

描述：游戏两侧出现黑边、蓝边、白边等异常边。

原因：游戏固定了宽高或屏幕比例。

措施：请参见第6条获取屏幕宽高，确保背景和游戏能充分铺满屏幕。

游戏各种按钮、状态栏等需要根据屏幕宽高，调整对屏幕相对位置，确保显示完整、布局美观。

3、游戏两边出现花边

描述：游戏两侧出现杂色边，后面内容覆盖了之前内容。

原因：游戏固定了宽高或屏幕比例，后续某帧超过该比例，造成花边。

措施：请参见第6条获取屏幕宽高，确保背景和游戏能充分铺满屏幕。

游戏各种按钮、状态栏等需要根据屏幕宽高，调整对屏幕相对位置，确保显示完整、布局美观。 

4、视频两边出现裁切

描述：播放视频时，视频宽度上发生裁切，造成显示内容变少。

原因：视频优先匹配高度，造成宽度上内容裁切。

措施：请参见第6条获取屏幕宽高，将优先适配高度，改为优先适配宽度，保证视频内容的完整性，并合理安排其他布局。

5、应用底部黑边过大

描述：应用底部黑边过大，底部文字、对话框等位置偏上，造成显示不美观。

原因：屏幕比例变大时，底部黑边相应变大，但是底部文字、对话框等未按屏幕高度动态调整，而是固定了与视频的相对位置。

措施：请参见第6条获取屏幕宽高，然后根据屏幕高度，向下动态调整文字或对话框的相对位置，使显示更美观。

6、获取屏幕宽高方法

（1）获取屏幕物理宽高

建议游戏或满屏应用使用，获取屏幕真实物理宽高。

    WindowManager manager = this.getWindowManager();
    Point outSize = new Point();

Display display = manager.getDefaultDisplay();
    display.getRealSize(outSize);
    int width = outSize.x; //屏幕物理宽度
    int height = outSize.y; //屏幕物理高度

（2）获取应用宽高

建议非满屏应用使用，在某些情况下，应用宽高和屏幕物理宽高有差异。

如在有导航栏、刘海、非透明状态栏等情况下，可以使用以下方法获取实际应用宽高。

WindowManager manager = this.getWindowManager();

DisplayMetrics outMetrics = new DisplayMetrics();

Display display = manager.getDefaultDisplay();

display.getMetrics(outMetrics);

int width = outMetrics.widthPixels; //应用宽度

int height = outMetrics.heightPixels; //应用高度

三、模拟验证

使用分辨率为1080的屏幕，比例任意的手机：

1、进入开发者选项，打开USB调试；

2、电脑进入cmd命令行，输入”adb devices”，确保能连上手机；

3、Cmd命令行输入：”adb shell wm size 1080×2400/1080×2460/1080×2520”

模拟分辨率为1080×2400/1080×2460/1080×2520的情况；

4、测试应用或游戏，是否出现黑边、花边、裁切等情况；

5、测试完毕，cmd命令行输入：”adb shell wm size reset”，恢复屏幕分辨率。

vivo小窗适配指南

发表于由

1、小窗功能介绍

vivo全局小窗在安卓原生的多窗口功能基础上，进行了一系列的优化和创新。以小窗的形式展现应用，并支持不同窗口形式（小窗、分屏、全屏）之间快速切换。
小窗入口包括但不限于：近期任务卡片“小窗”选项，应用内滑、悬浮通知下拉等。用户可以通过 设置-快捷与辅助-多任务 路径进入多窗口功能设置页，了解相关功能介绍。
（注：不同机型、不同版本表现可能有所差异）。

2、小窗应用适配关键点

应用适配全局小窗时，因一些容易被忽略的适配点，导致应用进入小窗模式后出现兼容性问题。为此，我们整理了全局小窗应用适配的五大关键点，帮助开发者快速适配。

2.1 声明支持多窗口模式
应用适配全局小窗需要先声明支持安卓原生多窗口，和多窗口适配策略相同，都需在 [activity] 或 [application] 节点中添加 android:resizeableActivity 属性。

参考代码：

<application
    android:name=".MyActivity"
    android:resizeableActivity="true" />

安卓官方多窗口适配参考链接：https://developer.android.com/guide/topics/ui/multi-window.html

2.2 正确处理Configuration变化
在应用横竖屏旋转和窗口大小变化时，如需自行处理多窗口配置，请设置android:configChanges属性，之后Activity和 Fragment将收到 onConfigurationChanged()方法回调，而不是先销毁再重建。
在管理视图更新、重新加载资源等工作时，注意不要沿用之前的Config信息，而需重新获取最新的资源信息。参考代码：

<activity
  android:name=".MyActivity"
  android:configChanges="screenSize | smallestScreenSize 
		| screenLayout | orientation" />

2.3 正确启动Activity的task
应用需给Activity设置独立的android:taskAffinity属性，以防因继承rootActivity的多窗口属性导致无法启动到小窗模式。
因为task中的Activity会继承rootActivity的多窗口属性。如果启动该task的rootActivity是unresizable的，则即使要启动的Activity是resizable的也无法启动到小窗模式。
参考代码：

<activity
  android:name=".MyActivity"
  android:taskAffinity="com.test.example" />

2.4 正确使用Context
应用在适配小窗模式时，应使用Activity的Context加载合适的资源和计算相对位置。
在应用进程中，存在Application和Activity两类Context，其中Application Context对应的是屏幕资源信息，而Activity Context对应的是窗口的资源信息。
如果应用在小窗模式下使用的是 Application Context处理UI 相关的操作，会导致加载的资源因无法感知到小窗而显示异常。
Activity如何获取特定窗口类型下的窗口尺寸，参考代码：
java：

int screenWidthDp = getResources().getConfiguration().screenWidthDp;
int screenHeightDp = getResources().getConfiguration().screenHeightDp;

kotlin：

val screenWidthDp: Int = resources.configuration.screenWidthDp
val screenHeightDp: Int = resources.configuration.screenHeightDp

2.5 正确处理小窗下的沉浸式
小窗模式下，应用顶部有个功能bar，应用在沉浸式适配时需为此功能bar预留一定空间。因此应用在布局时，需要监听安卓原生的WindowInsetsListener接口回调，针对captionBarInsets变化来处理view高度，注意不要使用固定高度！！！

参考代码：
java：

getWindow().getDecorView().setOnApplyWindowInsetsListener((v, insets) -> {
    //应用在回调中计算view高度
    return insets;
});

kotlin：

window.decorView.setOnApplyWindowInsetsListener { v: View?, insets: WindowInsets ->
    //应用在回调中计算view高度
    insets
}

2.6 其他界面布局建议
•　布局参数尽量使用相对的布局参数，不要使用固定尺寸
•　避免根据屏幕大小，输入法高度等计算view的布局参数，如设置popwindow、dialog等子窗口的位置时，避免使用整个屏幕的相对位置
•　避免对DecorView，content等根布局进行定制，比如设置DecorView的背景、在DecorView添加子布局等
•　注意生命周期处理，如小窗模式下出现页面点击、拖动无响应问题，可能跟布局或生命周期有关
•　避免根据物理屏幕方向设置当前功能或布局

vivo折叠屏适配指南1

发表于由

一、概述

1.1 折叠屏简介

折叠屏手机作为一种具有特殊形态的设备，具备折叠使用的外屏（副屏），和展开使用的内屏（主屏），通常展开使用的内屏尺寸相对较大。

本文主要提供针对折叠屏大屏的适配建议，帮助设计师及开发者能够更简单、快速地将应用适配至折叠屏设备，以确保用户在不同设备中保持应用的一致体验所带来的愉悦感。

1.2 折叠屏形态

    1. 折叠态（副屏）：外屏尺寸接近普通直屏手机，其设计规范可与直屏手机基本保持一致。

    2. 展开态（主屏）：内屏较外屏有更大的屏幕宽度，需充分利用大屏优势，在信息呈现和交互方式上利用合适的布局方式对应用进行优化调整。

    3. 悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。可悬停角度：5°-160°

1.3 折叠屏特性

1.3.1 大屏内容呈现

折叠屏手机的展开态具有以下三个优势：

    1. 展示更多内容：提升信息呈现丰富度与交互效率。

    2. 提升沉浸感：在游戏、电影、视频通话、图片浏览等应用和场景下减少干扰，提升专注度。

    3. 多窗口、多任务：通过展示更多窗口和内容，实现多任务的并行，以丰富体验场景。

1.3.2 主副屏的体验连续

体验连续是指：从一种窗口大小转换为另一种窗口大小时带来无缝的用户体验。无论用户当前置身于什么体验，都应继续进行而不中断，防止用户感知无法接续。

通常情况下，从折叠态切换至展开态时，应用默认在主屏显示运行，并维持在副屏时的应用与任务状态。

同时，用户可在 “设置-显示与亮度-合上屏幕后熄屏” 中选择在展开态切换至折叠态后，是否自动熄屏：

    1. 开启的情况下，折叠设备后，副屏自动熄屏。

    2. 关闭的情况下，折叠设备后，副屏不熄屏并维持在主屏时的应用与任务状态。

二、基础适配原则

2.1 概述

为了避免应用在普通直屏手机移植到折叠屏手机时，缺少针对大屏的优化，导致布局混乱、信息呈现不完整等问题，大幅降低用户体验，建议基于以下三个核心指导建议优化设计：

    1. 适合展开态的界面元素：为了发挥折叠屏展开态的大屏优势，在设计时需要基于屏幕特性和业务场景，优化界面布局结构，以提高用户的交互效率与愉悦感。原则上，更大的屏幕应当呈现更多的内容；在页面适配上，应当优先保证所有界面元素显示为适宜的大小，不应将界面单纯的整体放大，导致单屏信息呈现的减少，影响界面的使用效率。

    2. 灵活的响应式布局：通过响应式布局建构页面，能够在可用空间发生变化时及时、灵活地进行调整优化。本文提供了多种布局建议，可根据业务场景和具体需求，使用其中一种或多种布局进行最优组合。关于布局的具体介绍，请参考界面布局（2.6）。

    3. 高效利用多窗口交互：通过在更大的屏幕上同时展示多个窗口，用户可以高效、直观地处理多个任务，提升使用体验的价值。建议应用为用户在折叠屏展开态中提供更加丰富高效的使用方式，让用户体验得到不同维度的增值。

具体来说，基础适配原则从“信息呈现”与“交互方式”两个维度提供指导建议。

2.2 信息呈现

界面中的信息呈现包括图片、视频、卡片、按钮、字体、控件等通用基础体验元素的展示。

屏幕展开前后，通用基础体验元素需保持一致。如：元素不发生变形、裁剪、信息显示不全或者模糊等情况，避免信息呈现的不一致。

2.3 基础元素适配

需将所有界面元素显示为适宜的大小。不应过大或过小，影响显示效率。

不应从折叠态到展开态直接等比放大文字图标、图片视频等要素，图片与文章的比例与在直屏手机的界面设计出入过大，导致用户在大屏界面中与在直屏手机中的感知不符合预期。

2.4 弹出框适配

建议应用在展开态下的弹出框尺寸与折叠态下弹出框尺寸保持一致，如因特殊需求，需要进行放大，则不应超过原尺寸的1.3倍。

2.5 交互方式

2.5.1 合适的交互区

在展开态时，由于用户双手握持设备的情况较为常见，手指会难以顺利在屏幕所有区域进行交互。为了确保户的交互体验的高效与愉悦，在设计展开态布局时，应考虑到以下三个交互区域：

        ① 用户易于触达的区域。操作频率最高的控件元素建议放在此区域。

        ② 用户可以触达的区域。但有时候可能会造成一定不便，有一定操作频率的控件元素建议放在此区域。

        ③ 用户较难触达的区域。除特殊情况，不建议将需要交互的控件元素放在此区域。

2.3.2 折叠屏手机形态

折叠屏手机形态分为折叠态、展开态与悬停态：

    1. 折叠态：折叠屏手机折叠后的形态，折叠后屏幕尺寸变小。

    2. 展开态：折叠屏手机展开后的形态，展开后屏幕尺寸变大。

    3. 悬停态：折叠屏设备处于完全展开和折叠的中间状态，可平稳放置。可悬停角度为：5°-160°

在悬停状态下，建议“上半屏显示内容，下半屏展示操作”。

例如在视频播放的悬停态中，上半屏为播放页，下半屏为操作区，更方便地进行拖动播放进度、暂停、调节亮度音量等操作。

2.6 界面布局

由于折叠屏在展开态下，屏幕尺寸和比例与直屏手机差异较大，需根据不同需求调整合适的布局，确保用户在不同形态上保持一致的体验。

界面布局主要分为“相对拉伸”、“相对缩放”、“挪移”、“延伸”、“分栏布局”5个类别。

相对拉伸

布局中元素的高度为固定值，元素的宽度对比参照物确定，元素的显示宽度或者元素之间的间距随着屏幕变大而相对变大。

相对拉伸适用于文字内容、输入框、搜索框等。需要注意的是，随着拉伸而改变比例的图片是一种延展，不应因拉伸而变形。

相对缩放

布局中元素的大小比例保持固定，通过对比参照物确定尺寸，显示宽度随着屏幕变大而放大。

相对缩放适用于全屏状态下有固定比例的元素，如图片、视频等。页面中的图片比例不建议放太大，应保持合适的比例。

挪移

当屏幕宽度发生变化时，部分模块的布局可以挪动位置，例如将原先的上下布局切换成左右布局，用以提供屏幕的利用率。

挪移适用于信息层级相对较少的页面，例如歌单详情页等。

延伸

布局中元素横向布局，元素间的距离固定，可显示元素的数量随着显示宽度的改变而变化。

延伸布局适用于资讯TAB、内容推荐卡片、可视化数据等。

瀑布为延伸的拓展用法，将原来单列纵向布局，切分为两列或多列的纵向布局，在⼤屏上呈现更多内容。

分栏布局

具有 “父子和父父关系层级”的列表应用，可以左侧展示一级页面右侧展示其优先级高的子页面。

分栏布局适用于 IM、笔记、信息、邮件等列表类应用。

2.7 多窗口交互

多窗口类别优势适用场景
悬浮小窗通过减少跳转，更快处理临时任务，且广泛适用于各种场景多应用多任务单应用多任务
分屏双应用/任务的并行处理，且广泛适用于各种场景多应用多任务单应用多任务
应用多窗以多实例实现应用内的双窗口单应用多任务

悬浮小窗

悬浮小窗以小窗的形式展现应用，并支持不同窗口形式（小窗、分屏、全屏）之间快速切换。

小窗入口包括但不限于：近期任务卡片“小窗”选项，应用内滑、悬浮通知下拉等。

悬浮小窗能通过减少跳转，更快处理临时任务，且广泛适用于各种场景。

悬浮小窗技术接入规范：https://dev.vivo.com.cn/documentCenter/doc/582

分屏

vivo分屏在原生分屏的基础上做了定制化处理，例如增加分屏方式（消息三指组合）、分屏小桌面列表、输入法边界定制、加密界面定制等。

分屏的优势在于多应用/任务的并行处理，且广泛适用于各种场景。

vivo分屏的手势分屏方式为：三指上滑

分屏技术接入规范：https://dev.vivo.com.cn/documentCenter/doc/573

应用多窗

应用多窗以多实例实现应用内的双窗口，根据应用自身特性进行界面组合，减少频繁切换窗口的行为，提升效率。

应用多窗的优势主要分为以下两个：

    1. 同时比较两个同类型内容的不同信息。比如两个不同的图像、文档、商品详情等。

    2. 同时显示多级页面，呈现相同信息的不同维度。通常为主次关系，比如左半屏展示列表页面，右半屏为选中项的详情页面。适用于电商购物、通讯社交、效率办公等频繁切换窗口的应用场景。

应用多窗-左静右变

应用多窗提供了“左静右变”和“左变右变”两种交互规则：

左静右变的规则为：左侧固定页面，右侧可变，进行内容切换，右侧窗口是最终窗口。

适用于效率办公和通讯社交类应用。

应用多窗-左变右变

左变右变的规则为：左侧右侧皆可变。在右侧交互后启动新窗口时，把右侧界面往左推，新的界面在右侧展示。

适用于购物场景类应用。

跨应用拖拽

跨应用拖拽可以让用户将一个应用中的图像、文档或文件拖拽到另一个应用中。

通过分屏和悬浮小窗实现在大屏的跨应用拖拽，减少用户在应用之间来回切换，更高效地进行多任务处理，提高生产力。

关于跨应用拖拽的适配：https://developer.android.com/guide/topics/ui/drag-drop

三、典型场景

3.1 影音娱乐

影音娱乐类场景以大量影音内容资源带来的沉浸式体验为主。

3.1.1 视频资源平台

首页推荐

视频列表页

3.1.2 短视频/直播互动页

3.1.3 音乐播放界面

3.1.4 视频播放界面（悬停）

3.2 资讯阅读

资讯阅读类场景以信息的聚合为主，需利用屏幕优势，确保用户对关键信息浏览、理解的完整和高效。

3.2.1 首页布局：左右图文结构

3.2.2 首页布局：上下图文结构

3.2.3 资讯详情页

3.3 生活服务

生活服务类场景广泛地包含了购物、饮食、出行、学习等用户日常生活的各个方面。

3.3.1 首页列表

3.3.2 详情页面

3.4 通讯社交

社交通讯类场景主要包括：文字交流为主的IM对话、图像视频通话、社交动态等场景。

3.4.1 文字交流为主（IM对话）

3.4.2 图像·视频通话

3.4.3 社交动态

首页结构：推荐

详情页

可根据实际情况，自由选择应用多窗的两种交互规则。请参考基础适配原则-交互方式-多窗口交互（2.7）。

3.5 效率办公

效率办公类场景以高效的体验，辅助和提升工作者的办公效率为主。

3.6 H5页面

H5页面以其便利的特性，广泛应用于小程序和网页版应用。

3.7 金融理财

用户在金融理财类场景中，需确保大屏信息呈现所带来的高效与舒适。

同时，需保障用户办理金融业务过程中的易用性。

3.7.1 首页布局

3.7.2 股票·走势详情页

3.8 游戏

根据不同的游戏类型和场景，优化大屏布局，在呈现与交互层面给用户带来愉悦的体验。

同时，考虑到用户在玩游戏时长时间握持设备，在设计展开态布局时，应根据不同的交互区做适配优化。

请参考交互方式（2.5）-合适的交互区。

四、测试应用

4.1 设备尺寸

可在 Android Studio 中基于以下设备规格信息进行测试。

屏幕类型对角线长度（英寸）比例分辨率（像素）
主屏（展开态）8.034：3.551916*2160
副屏（折叠态）6.5321：9 1080*2520