【HarmonyOS 5】鴻蒙應(yīng)用px，vp，fp概念詳解

##鴻蒙開(kāi)發(fā)能力 ##HarmonyOS SDK應(yīng)用服務(wù)##鴻蒙金融類應(yīng)用 （金融理財(cái)#

一、前言

目前的鴻蒙開(kāi)發(fā)者，大多數(shù)是從前端或者傳統(tǒng)移動(dòng)端開(kāi)發(fā)方向，轉(zhuǎn)到鴻蒙應(yīng)用開(kāi)發(fā)方向。

前端開(kāi)發(fā)同學(xué)對(duì)于開(kāi)發(fā)范式很熟悉，但是對(duì)于工作流程和開(kāi)發(fā)方式是會(huì)有不適感，其實(shí)移動(dòng)應(yīng)用開(kāi)發(fā)與前端開(kāi)發(fā)，最大的區(qū)別就在于UI適配和性能優(yōu)化上了。

今天我們就來(lái)分析下鴻蒙中UI適配的規(guī)范與小竅門(mén)。

二、 鴻蒙中vp、px、fp 是什么？

剛接觸鴻蒙的同學(xué)，對(duì)于px像素肯定是很熟悉，但是對(duì)vp和fp都是一臉懵逼，不知道干嘛用的，可能只是被代碼規(guī)范要求或者老人技術(shù)指導(dǎo)強(qiáng)調(diào)：

“fp用于字體大小，vp用于UI數(shù)值，千萬(wàn)不要在UI里用像素px設(shè)置控件?！?/strong>

但是原理卻不是很清楚。

今天就給大家詳細(xì)來(lái)分析一下其中的緣由。

1. vp

其實(shí)vp的概念很簡(jiǎn)單，vp是屏幕密度相關(guān)像素，根據(jù)屏幕像素密度轉(zhuǎn)換為屏幕物理像素，具有一定的邏輯比例數(shù)值。

因?yàn)関p在多種設(shè)備上不會(huì)變形，有一致的視覺(jué)體量。當(dāng)前鴻蒙API接口數(shù)值不帶單位時(shí)，默認(rèn)單位都為vp，可見(jiàn)這是官方推薦的數(shù)值單位。

2. fp

而fp的概念與vp類似，在鴻蒙系統(tǒng)中也是適用屏幕密度變化，隨系統(tǒng)字體大小設(shè)置變化。是專門(mén)用于字體像素的單位。

3. px

像素px是我們移動(dòng)開(kāi)發(fā)的老熟人了。從產(chǎn)品給的原型圖，到UI設(shè)計(jì)給的效果圖設(shè)計(jì)圖，單位基本都是px，有時(shí)候我們會(huì)轉(zhuǎn)成dp進(jìn)行比例使用。而在鴻蒙開(kāi)發(fā)中，為了適配多種設(shè)備，不同的屏幕像素密度，也有類似于dp的概念，就是綜上所述的vp與fp。

因?yàn)樵邙櫭蓱?yīng)用開(kāi)發(fā)中，與安卓的現(xiàn)狀相同，需要適配多種機(jī)型，不同的折疊手機(jī)。并且鴻蒙特性之一就是自由流程多端適配。一套代碼，需要適配多種類設(shè)備顯示。所以官方不建議使用屏幕像素單位px進(jìn)行UI數(shù)值的設(shè)置。道理也很簡(jiǎn)單了，講了很多遍，因?yàn)樵O(shè)備的屏幕像素密度不同，如果使用px會(huì)導(dǎo)致界面UI布局變形。

綜上所述，在鴻蒙應(yīng)用開(kāi)發(fā)中，組件數(shù)值使用vp，字體大小使用fp。

如何將px轉(zhuǎn)化為vp或者fp？

首先為什么需要轉(zhuǎn)化呢？因?yàn)樵O(shè)計(jì)端源頭，給的是像素單位，目前的設(shè)計(jì)軟件還給不了vp和fp。所以我們只能將設(shè)計(jì)圖上的像素進(jìn)行數(shù)值轉(zhuǎn)化。官方很貼心提供了十分方便的轉(zhuǎn)化函數(shù)：px2vp px2fp

不過(guò)最新的api進(jìn)行了更新，大家需要格外注意。直接使用vp2px/px2vp/fp2px/px2fp/lpx2px/px2lpx可能存在UI上下文不明確的問(wèn)題，建議使用getUIContext()獲取UIContext實(shí)例，再使用UIContext下的px2vp，px2fp等等綁定實(shí)例的接口。

代碼示例，例如：

// 建議使用： this.getUIContext().px2vp()
.width(px2vp(200))

三、UI開(kāi)發(fā)規(guī)范的參考

1. UI設(shè)計(jì)人員根據(jù)效果圖切圖之前，開(kāi)發(fā)人員需要提前溝通好，確認(rèn)以下信息：切圖樣式，圖標(biāo)是否鏤空，圖標(biāo)是否有白邊，圖標(biāo)寬高尺寸等。
2. 設(shè)計(jì)人員切圖提供后，開(kāi)發(fā)人員需要明確切圖是否OK，進(jìn)行切圖資源的review，方式后續(xù)返工，明確符合開(kāi)發(fā)需要。
3. 控件尺寸： 開(kāi)發(fā)人員將px尺寸，使用px2vp(value : number) : number，將px單位的數(shù)值轉(zhuǎn)換為以vp為單位的數(shù)值。
4. 字體大小： 開(kāi)發(fā)人員將px尺寸，使用px2fp(value : number) : number，將px單位的數(shù)值轉(zhuǎn)換為以fp為單位的數(shù)值。
5. Color 顏色： 盡量使用既有枚舉格式：Color.Black，Color.White等。若沒(méi)有，需要UI人員提供標(biāo)注的16進(jìn)制顏色。例如：‘#FFFFFF’。
6. UI自測(cè): 應(yīng)用開(kāi)發(fā)人員自測(cè)比對(duì)與效果圖的尺寸，驗(yàn)證完成后進(jìn)行UI聯(lián)調(diào)。
7. UI聯(lián)調(diào)： 開(kāi)發(fā)人員將APP UI提測(cè)。設(shè)計(jì)通過(guò)流水線，獲取功能界面截圖，將截圖發(fā)給UI，UI聯(lián)調(diào)比對(duì)效果是否有問(wèn)題。靜態(tài)圖通過(guò)聯(lián)調(diào)后，UI會(huì)看動(dòng)態(tài)多設(shè)備交互效果，驗(yàn)證是否有問(wèn)題。

審核編輯 黃宇