【鸿蒙OS】【ArkUI】鸿蒙OS UI布局适配终极攻略

鸿蒙OS UI布局适配终极攻略像素适配大法，此方法也适合Android

ArkUI为开发者提供4种像素单位，框架采用vp为基准数据单位。
vp相当于Android里的dp
fp相当于Android里的sp
官方是如何定义的呢,如下图
在这里插入图片描述

今天我来教大家如何用PX做到ArkUI的终级适配，可以适配所有机型

每台设备的屏幕都有宽高，比如720*1080 就是说这台手机宽有720px，高有1080个px
鸿蒙OS获取宽高的API为

import { display } from '@kit.ArkUI'export class DisPlayInfo {private screenWidth = 0;private screenHeight = 0;constructor() {let screenWidth = display.getDefaultDisplaySync().width;let screenHeight = display.getDefaultDisplaySync().height;}
}

而我们在写界面时，UI会给我们切一份以宽xxx 高xxx 为基准提供一套设计图给到我们，假设高为：1334 ，宽为：750

import { display } from '@kit.ArkUI'export class DisPlayInfo {private screenWidth = 0;private screenHeight = 0;private static readonly STANDARD_WIDTH = 750;private static readonly STANDARD_HEIGHT = 1334;constructor() {let screenWidth = display.getDefaultDisplaySync().width;let screenHeight = display.getDefaultDisplaySync().height;}
}

这个时候我们就可以得到一个比例，UI设计标准和屏幕的一个宽高比

let widthRadio = screenWidth /STANDARD_WIDTH 
let heightRadio = screenHeight /STANDARD_HEIGHT

这时，假设有一个Btn UI设计图上的宽为220，高为64，我们就可以计算出这个btn在屏幕上的实际px

let realWidth = widthRadio *btnWidth
let realHeight = heightRadio *btnHeight

得到了实际宽高，我直接填到布局里就OK,完整代码如下，

import { display } from '@kit.ArkUI'export class DisPlayInfo {private screenWidth = 0;private screenHeight = 0;private static readonly STANDARD_WIDTH = 750;private static readonly STANDARD_HEIGHT = 1334;constructor() {let screenWidth = display.getDefaultDisplaySync().width;let screenHeight = display.getDefaultDisplaySync().height;this.screenWidth = Math.min(screenWidth, screenHeight);this.screenHeight = Math.max(screenWidth, screenHeight);console.info("screenWidth " + screenWidth + " screenHeight " + this.screenHeight)}public getWidth(width: number): PX {let realWidth: number = Math.floor(width * this.screenWidth / DisPlayInfo.STANDARD_WIDTH)return `${realWidth}px`}public getHeight(height: number): PX {return `${Math.floor((this.screenHeight / DisPlayInfo.STANDARD_HEIGHT) * height)}px`}
}

实战

displayInfo = new DisPlayInfo()build() {Row() {RelativeContainer() {Image($r('app.media.xxx')).width(this.displayInfo.getWidth(628)).height(this.displayInfo.getWidth(480)).alignRules({top: { anchor: "__container__", align: VerticalAlign.Top },left: { anchor: "__container__", align: HorizontalAlign.Start },right: { anchor: "__container__", align: HorizontalAlign.End },bottom: { anchor: "__container__", align: VerticalAlign.Bottom }}).id("bg_interior_img")// 标题Text($r('app.string.xxx')).fontSize(this.displayInfo.getWidth(34)).fontColor($r('app.color.xxx')).margin({ top: this.displayInfo.getWidth(48) }).textAlign(TextAlign.Center).alignRules({top: { anchor: "bg_interior_img", align: VerticalAlign.Top },left: { anchor: "bg_interior_img", align: HorizontalAlign.Start },right: { anchor: "bg_interior_img", align: HorizontalAlign.End },}).id("title_text")// 取消Text($r('app.string.xxx')).width(this.displayInfo.getWidth(216)).height(this.displayInfo.getWidth(64)).margin({ left: this.displayInfo.getWidth(86), bottom: this.displayInfo.getWidth(55) }).textAlign(TextAlign.Center).backgroundImage(this.subBtnBackgroundImg).backgroundImageSize({ width: '100%', height: '100%' }).fontSize(this.displayInfo.getWidth(30)).fontColor($r('app.color.xxx')).alignRules({left: { anchor: "bg_interior_img", align: HorizontalAlign.Start },bottom: { anchor: "bg_interior_img", align: VerticalAlign.Bottom },}).onClick(() => {}).id("btn_reject")// 确定Text($r('app.string.xxx')).width(this.displayInfo.getWidth(216)).height(this.displayInfo.getWidth(64)).margin({ right: this.displayInfo.getWidth(86), bottom: this.displayInfo.getWidth(55) }).textAlign(TextAlign.Center).backgroundImage(this.mainBtnBackgroundImg).backgroundImageSize({ width: '100%', height: '100%' }).fontSize(this.displayInfo.getWidth(30)).fontColor($r('app.xxx')).alignRules({right: { anchor: "bg_interior_img", align: HorizontalAlign.End },bottom: { anchor: "bg_interior_img", align: VerticalAlign.Bottom },}).onClick(() => {})// 内容Text($r('app.string.xxx')).fontSize(this.displayInfo.getWidth(22)).fontColor($r('app.color.xxx')).margin({ left: this.displayInfo.getWidth(86), right: this.displayInfo.getWidth(86) }).textAlign(TextAlign.Start).alignRules({top: { anchor: "title_text", align: VerticalAlign.Bottom },left: { anchor: "title_text", align: HorizontalAlign.Start },right: { anchor: "title_text", align: HorizontalAlign.End },bottom: { anchor: "btn_reject", align: VerticalAlign.Top },})}}}