【HarmonyOS】公司鸿蒙项目收工总结之《屏幕适配》

屏幕适配是一个复杂而重要的议题，它直接影响到用户体验和应用的一致性。在进行屏幕适配设计时，可以从以下几个方面进行深入分析：

1. 设备兼容性
   当不同类型的设备（如不同尺寸和分辨率的屏幕）使用同一款应用时，我们需要决定是为每种设备类型单独设计一套界面，还是使用一套灵活的响应式和自适应设计方案来适配所有设备类型。这种决策将直接影响到开发成本和用户体验的一致性。
2. 视觉体验
   随着手机屏幕尺寸的增大，用户期望的视觉效果也会有所不同。我们需要确定，当屏幕变大时，内容是随着屏幕大小而放大，还是保持原有尺寸，从而在更大的屏幕上展示更多的内容。这种选择将影响到应用的易读性和信息密度。此外，用户往往会根据个人偏好调整手机的字体大小。在这种情况下，我们需要考虑，当用户更改了手机上的字体大小设置时，应用程序内的文本是否也应该相应调整，以提供更好的阅读体验，还是保持不变，以确保界面设计的一致性。

一、设备兼容性

1、如何查看设备类型的展示效果？

新建工程时，可以在 Device type 中勾选当前应用支持的设备类型，这会影响后续预览器的显示。

开发工具 DevEco Studio 右侧边的 Previewer -> 右上角更多 -> Multi-profile preview 可以查看多屏效果。

• Phone: 手机（预览器包含 Foldable(large) 表示可折叠的大屏设备）
• Tablet: 平板电脑
• 2in1: 华为平板2合1
• Car: 车载设备


2、如何代码获取设备类型？

注意：以下代码只有在真机上才生效，预览器中不生效。

import { promptAction, window } from '@kit.ArkUI'
import { resourceManager } from '@kit.LocalizationKit'
 
@Entry
@Component
struct Page41 {
  build() {
    Column({ space: 5 }) {
      Button('设置当前app以横屏方式显示').onClick(() => {
        window.getLastWindow(getContext()).then((windowClass) => {
          windowClass.setPreferredOrientation(window.Orientation.PORTRAIT)
        })
      })
      Button('设置当前app以竖屏方式显示').onClick(() => {
        window.getLastWindow(getContext()).then((windowClass) => {
          windowClass.setPreferredOrientation(window.Orientation.LANDSCAPE)
        })
      })
      Button('判断APP是横屏还是竖屏').onClick(() => {
        promptAction.showToast({
          message: getContext().resourceManager.getConfigurationSync().direction ===
          resourceManager.Direction.DIRECTION_VERTICAL ?
            "竖屏" : "横屏"
        })
      })
      Button('获取当前设备类型').onClick(() => {
        promptAction.showToast({
          message: this.getDeviceTypeInfo()
        })
      })
    }
    .height('100%')
    .width('100%')
  }
 
  getDeviceTypeInfo(): string {
    let
      deviceType = getContext().resourceManager.getDeviceCapabilitySync().deviceType;
    switch (deviceType) {
      case resourceManager.DeviceType.DEVICE_TYPE_PHONE:
        return "手机";
      case resourceManager.DeviceType.DEVICE_TYPE_TABLET:
        return "平板";
      case resourceManager.DeviceType.DEVICE_TYPE_PC:
        return "电脑";
      case resourceManager.DeviceType.DEVICE_TYPE_TV:
        return "电视";
      case resourceManager.DeviceType.DEVICE_TYPE_CAR:
        return "汽车";
      case resourceManager.DeviceType.DEVICE_TYPE_WEARABLE:
        return "穿戴";
      case resourceManager.DeviceType.DEVICE_TYPE_2IN1:
        return "2IN1";
      default:
        return "未知"
    }
  }
}

3、如何适配设备类型？

3.1、响应式布局

当窗口尺寸变化较大时，仅仅依靠自适应布局可能出现图片异常放大或页面内容稀疏、留白过多等问题，此时就需要借助响应式布局能力调整页面结构。

参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

3.2、自适应布局

可通过拉伸、均分、占比、缩放、延申、隐藏、折行等方法单独或组合使用。

参考官方文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-guides...

二、视觉体验

参考官方文档【像素单位】：https://developer.huawei.com/consumer/cn/doc/harmonyos-refere...

1、何时使用fp ？

类似于Android的 sp，会随着系统字体大小设置变化。

2、何时使用 lpx？【我实际开发中基本都是用的lpx】

类似于微信小程序的 rpx，区别是小程序designWidth默认是750且不可修改，而鸿蒙的designWidth默认是720但可以修改。通常用于底部四个按钮、页面整体布局等需要等比缩放的情况。在鸿蒙应用中，可以使用 lpx 单位来进行屏幕适配。通过设置 designWidth，开发者可以使用 lpx2px 和 px2lpx 等方法来进行单位转换，从而实现屏幕适配。

3、何时使用vp ？

类似于Android的 dp，通常用于隐私协议内容、商品详情等大量文字显示的场景。

4、何时使用px ？

一般在使用 canvas 绘制时需要绝对尺寸的情况下使用。实际上，不管是 lpx 还是 vp，最终都会以各种计算方式转换为 px。

通过上述方法和技术，可以有效地解决鸿蒙应用在不同设备上的屏幕适配问题，提供一致且优秀的用户体验。希望这篇文章能够帮助开发者更好地理解和掌握鸿蒙应用的屏幕适配技巧。