【HarmonyOS 5】鴻蒙應用px，vp，fp概念詳解

##鴻蒙開發(fā)能力 ##HarmonyOS SDK應用服務##鴻蒙金融類應用 （金融理財#

一、前言

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

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

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

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

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

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

但是原理卻不是很清楚。

今天就給大家詳細來分析一下其中的緣由。

1. vp

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

因為vp在多種設備上不會變形，有一致的視覺體量。當前鴻蒙API接口數(shù)值不帶單位時，默認單位都為vp，可見這是官方推薦的數(shù)值單位。

2. fp

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

3. px

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

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

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

如何將px轉化為vp或者fp？

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

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

代碼示例，例如：

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

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

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

審核編輯 黃宇