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