【鸿蒙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 },
                    })
            }
        }
    }

显示效果，测试多台的机显示基本一样