[Android] vivo官网APP全机型UI适配方案

vivo 互联网客户端团队- Xu Jie

案例1：某个视频APP页面，未做pad上的适配，打开之后的效果如下，两边大量留白，是不可操作的区域。

案例2：某新闻资讯类APP，在pad上的适配效果如下，可见的范围内，信息流展示内容较少，图片有拉伸、模糊的问题。

• 直板屏：强制固定竖屏；
  
• 折叠屏：外屏固定竖屏、内屏(大屏)支持横竖屏切换；
  
• PAD端：支持横竖屏切换；
  

• 方式1）
  

通过在AndroidManifest.xml中设置：android:screenOrientation属性
a) android:screenOrientation="portrait"强制竖屏；
b) android:screenOrientation="landscape"强制横屏；
c) android:screenOrientation="unspecified"默认值，可以横竖屏切换；

在代码中设置：activity.setRequestedOrientation(****);
a) setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); 设置竖屏；
b)setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE); 设置横屏；
c)setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED); 可以横竖屏切换；

//pad支持横竖屏
def processManifestTask = project.tasks.getByName("processDefaultNewSignPadReleaseManifest");
if (processManifestTask != null) {
  processManifestTask.doLast { pmt ->
    def manifestPath = pmt.getMultiApkManifestOutputDirectory().get().toString() + "/AndroidManifest.xml"
    if (new File(manifestPath).exists()) {
      String manifest = file(manifestPath).getText()
      manifest = manifest.replaceAll("android:screenOrientation="portrait"", "android:screenOrientation="unspecified"");
      file(manifestPath).write(manifest)
      println(" =============================================================== manifestPath: " + manifestPath)
    }
  }
}

• 直板手机：通过分辨率来区分
  
• 折叠屏：通过机型和内外屏状态来区分
  
• Pad：通过机型和当前屏幕的横、竖状态来区分
  

不同设备的区分方式。

/**
 * @function 判断当前手机的屏幕是处于哪个屏幕类型：目前三个屏幕范围：分别为 <= 528dp、528 ~ 696dp、> 696dp,对应的分别是正常直板手机、折叠屏手机内屏和Pad竖屏、和Pad横屏
 */
public class ScreenTypeUtil {
 
  public static final int NORMAL_SCREEN_MAX_WIDTH_RESOLUTION = 1584; // 正常直板手机：屏幕最大宽度分辨率；Pad的分辨率（1600*2560）， 1584 = 528 * 3， 528dp是UI在精选页标注的直板手机范围
  public static final int MIDDLE_SCREEN_MAX_WIDTH_RESOLUTION = 2088; // 折叠屏手机：屏幕最大宽度分辨率（1916*1964， 旋转：1808*2072），2088 = 696 * 3， 2088dp是UI在精选页标注的折叠屏展开范围
  public static final int LARGE_SCREEN_MAX_WIDTH_RESOLUTION = 2560; // 大屏幕设备：屏幕宽度暂定为 Pad的高度
 
  public static final int NORMAL_SCREEN = 0; // 正常直版手机屏幕
  public static final int MIDDLE_SCREEN = 1; // 折叠屏手机内屏展开、Pad竖屏
  public static final int LARGE_SCREEN = 2;  // Pad横屏
 
  public static int getScreenType() {
    Configuration configuration = BaseApplication.getApplication().getResources().getConfiguration();
    return getScreenType(configuration);
  }
 
  // 注意这里的newConfig 在Activity、Fragment、View 中的onConfigurationChanged中获得的newConfig传入，如果获得不了该值，可以使用getScreenType（）方法
  public static int getScreenType(@NonNull Configuration newConfig) {
    // Pad 通过机型标志位及当前处于横竖屏状态 来判断当前屏幕类型
    if (SystemInfoUtils.isPadDevice()) {
      return newConfig.orientation == Configuration.ORIENTATION_LANDSCAPE ? LARGE_SCREEN : MIDDLE_SCREEN;
    }
    // Fold折叠屏 通过机型标志及内外屏状态 来判断当前屏幕类型
    if (SystemInfoUtils.isFoldableDevice()) {
      return SystemInfoUtils.isInnerScreen(newConfig) ? MIDDLE_SCREEN : NORMAL_SCREEN;
    }
    // 普通手机 通过分辨率判断
    return AppInfoUtils.getScreenWidth() <= NORMAL_SCREEN_MAX_WIDTH_RESOLUTION ? NORMAL_SCREEN : (AppInfoUtils.getScreenWidth() <= MIDDLE_SCREEN_MAX_WIDTH_RESOLUTION ? MIDDLE_SCREEN : LARGE_SCREEN);
  }
}

每个子楼层

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/root_classify_horizontal"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical">
 
  <xxx.widget.HeaderAndFooterRecyclerView
    android:id="@+id/shop_product_multi_rv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
 
</LinearLayout>

子楼层的数据源解析

//这里的normalProductMultiClassifyUiBeanList集合中存放了2个商品信息
for (ProductMultiClassifyUiBean productMultiClassifyUiBean : normalProductMultiClassifyUiBeanList) {
  productMultiClassifyUiBean.setFirstFloor(isFirstFloor);
  shopListDataWrapper.addNormalBaseUiBeans(productMultiClassifyUiBean);
}
//这里的normalProductMultiClassifyUiBeanList集合中存放了3个商品信息
for (ProductMultiClassifyUiBean productMultiClassifyUiBean : widthProductMultiClassifyUiBeanList) {
  productMultiClassifyUiBean.setFirstFloor(isFirstFloor);
  shopListDataWrapper.addWidthBaseUiBeans(productMultiClassifyUiBean);
}

屏幕类型切换-数据源切换-更新RecyclerView。

public void onConfigurationChanged(@NonNull Configuration newConfig) {
  super.onConfigurationChanged(newConfig);
  //1、 首先进行内容区域中的RecyclerViewAdapter、数据源判空
  if (mRecyclerViewAdapter == null || mPageBeanAll == null) {
    return;
  }
  //2、判断当前的屏幕类型，注意：这个地方是调用3提供的方法：ScreenTypeUtil.getScreenType(newConfig)
  // 直板手机、折叠屏外屏
  if (ScreenTypeUtil.NORMAL_SCREEN == ScreenTypeUtil.getScreenType(newConfig)) {
    mPageBeanAll.setBaseUiBeans(mPageBeanAll.getNormalBaseUiBeans());
  } else if (ScreenTypeUtil.MIDDLE_SCREEN == ScreenTypeUtil.getScreenType(newConfig)) {
    if (SystemInfoUtils.isPadDevice()) {
      // Pad的竖屏
      mPageBeanAll.setBaseUiBeans(mPageBeanAll.getNormalBaseUiBeans());
    } else {
      // 折叠屏的内屏
      mPageBeanAll.setBaseUiBeans(mPageBeanAll.getWidthBaseUiBeans());
    }
  } else {
    // Pad的横屏、大分辨率屏幕
    mPageBeanAll.setBaseUiBeans(mPageBeanAll.getWidthBaseUiBeans());
  }
  //获取当前屏幕类型的最新数据源
  mRecyclerViewAdapter.setDataSource(mPageBeanAll.getBaseUiBeans());
  //数据源驱动楼层UI改变
  mRecyclerViewAdapter.notifyDataSetChanged();
}

Answer：按照全屏模式的设计方案，折叠屏和pad也就是一种大尺寸的机器，开发人员判断机型的分辨率和尺寸，选择一种对应的布局展示就好了，只用一个应用就能搞定。

Answer：制定一套规范，大于某个尺寸时，展示其他样式，所有信息内容都按照这种规范来，不会出现设计混乱的情况。

Answer：以不变应万变，使用一套物料，适配不同的机型已经可以落地了，不用再担心在不同的机器上展示不统一的问题。

这种方案，其实会增加维护成本，后期的开发要基于多个安装包去开发，更加耗时。

比如有些APP做了分栏的适配，但是没有做全屏的适配，效果就比较差，这里可能也是考虑到了投入产出比。

各种适配指导文档，还是比较偏向于官方，对于开发人员来说，还是无法提前识别问题，遇到问题还是要实际去解决，https://developer.huawei.com/consumer/cn/doc/90101