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

zhongcx01

于 2024-09-30 16:27:07 发布

阅读量586

点赞数 15

文章标签： harmonyos 华为鸿蒙

本文链接：https://blog.csdn.net/zhongcongxu01/article/details/142659519

版权

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

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、响应式布局

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

参考官方文档：文档中心

3.2、自适应布局

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

参考官方文档：文档中心

二、视觉体验

参考官方文档【像素单位】：文档中心

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。