关于harmonyos:21HarmonyOS鸿蒙开发单位vpfppx

作者：韩茹

公司：程序咖（北京）科技有限公司

鸿蒙巴士专栏作家

当年的Android中，有的sp、dp。还有dpi等概念。

• dpi，dots per inch，代表屏幕像素密度。
• dp，device independent pixels（设施独立像素，等同于dip），不依赖于像素
• sp，scale-independent pixels（缩放独立像素，等同于sip），和dp相似，容许由用户自定义文字尺寸大小（如小、失常、大、超大等）

所以在Android应用程序的mipmap或drawable目录下，依据dpi的不同分为ldpi、mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi等。

HarmonyOS在借鉴Android教训的同时，也提出了翻新。

对于很大一部分程序员用户来说，会比拟纠结这些问题：图片的大小尺寸定义为多大尺寸比拟正当？应该放在什么规范的dpi中能力失去更好的适配成果？在HarmonyOS中，程序员可不必将工夫和精力过多破费在此。在搁置图片的media目录下也没有依照dpi来进行辨别。

为了解决因为屏幕规格不同而引起的页面适配问题，HarmonyOS 提供了针对不同屏幕尺寸进行界面自适应适配的7种原子布局能力，使设计师能够应用原子布局能力来定义元素在不同尺寸的界面上的自适应规定。详见官网文档：https://developer.harmonyos.c…

HarmonyOS 从新定义了界面换算单位，应用虚构像素作为一台设施针对利用而言所具备的虚构尺寸，是定义利用内参数尺寸的度量单位。虚构像素也是一种可灵便应用和缩放的单位，它与屏幕像素的关系是 1vp 约等于 160dpi 屏幕密度设施上的 1px。在不同密度的设施之间，HarmonyOS 会针对性的转换设施间对应的理论像素值。

一、px

px：像素的单位，1px代表手机屏幕上的一个像素点。比方常见的手机分辨率有320×480,480×800，1080×1920等，这些数值的单位都是px；因为px在不同手机上的大小不同，差异较大，适配性太差，不倡议应用。

因为手机分辨率不同，利用中用到的图片某个固定尺寸大小的图片，或某个固定字号的文本就会因手机分辨力不同而呈现失真或变形的状况，为了更好的适配不同的手机，故而就有了不依赖与像素的单位sp与dp。

二、vp

vp：虚构像素(virtual pixel)是一台设施针对利用而言所具备的虚构尺寸（区别于屏幕硬件自身的像素单位）。它提供了一种灵便的形式来适应不同屏幕密度的显示成果。

应用虚构像素vp，使元素在不同密度的设施上具备统一的视觉体量。

三、fp

fp，font-size pixels，字体像素单位，其大小标准默认状况下与vp雷同，但如果开发者在设置中批改了字体显示大小，就会在vp的根底上乘以scale系数。即默认状况下 1 fp = 1vp，如果设置了字体显示大小，则会依据理论状况主动设置 1fp = 1vp * scale。

四、AttrHelper工具类

为了不便开发者对尺寸长度的治理，官网提供了AttrHelper工具类，可实现fp、vp、px之间的互相转换，几乎不要太不便。以下是局部办法：

另外，除fp、vp、px的互相转换API以外，该工具类还提供了对于density、字体名称与其值等的转换方法，十分十分的贴心。详见官网文档：https://developer.harmonyos.c…

在HarmonyOS中，咱们想布局一个页面，能够应用xml文件，也能够通过代码的模式。这里咱们应用之前讲PositionLayout布局的一个例子。

从新创立一个布局文件：position_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<PositionLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:background_element="#99FDF5E6"
    >

    <Text
        ohos:id="$+id:text1"
        ohos:height="50vp"
        ohos:width="200vp"
        ohos:background_element="#99FFE4B5"
        ohos:layout_alignment="horizontal_center"
        ohos:text="Title"
        ohos:text_size="20fp"
        ohos:text_alignment="center"
        />
    <Text
        ohos:id="$+id:text2"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#99FFE4B5"
        ohos:text="Content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
    <Text

        ohos:id="$+id:text3"
        ohos:height="200vp"
        ohos:width="200vp"
        ohos:background_element="#99FFE4B5"
        ohos:text="Content"
        ohos:text_alignment="center"
        ohos:text_size="20fp"/>
</PositionLayout>

而后关上slice下的MainAbilitySlice文件，首先批改一下要加载的布局文件：

super.setUIContent(ResourceTable.Layout_position_layout);

而后获取Text组件，并设置positon，其实就是通过id获取Text组件，想要设置X轴和Y轴的偏移量，调用setPosition()办法，来进行设置即可。

public void setPosition(int coordX, int coordY)；

//Sets the position of the upper-left corner of a component, relative to the parent layout.

然而该办法的参数为int类型，单位为px。如果想应用vp或者fp等单位。须要借助于一个类AttrHelper。

其实在代码中，很多办法的参数设置都是以px为单位。

Java示例代码如下：

package com.example.positionlayout.slice;

import com.example.positionlayout.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.AttrHelper;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_position_layout);

        //获取Text组件
        Text title = (Text)findComponentById(ResourceTable.Id_text1);
        Text content1 = (Text)findComponentById(ResourceTable.Id_text2);
        Text content2 = (Text)findComponentById(ResourceTable.Id_text3);
//        ohos:position_x="200"
//        ohos:position_y="60"
        //这里的参数200，60，单位都是像素px。
        title.setPosition(200, 60);
        /*
        因为在xml布局文件中，咱们应用的是vp，不是px，然而setPosition()办法的单位是px，所以这里咱们转换一下。须要应用AttrHelper类。

        ohos.agp.components.AttrHelper类：
        提供了vp，fp到px的转换
        vp2px(float value, float density)-->static int基于屏幕密度将虚构像素（vp）转换为像素值。
         */
        //AttrHelper.vp2px(20, AttrHelper.getDensity(this));//将20vp转为px

//        ohos:position_x="20vp"
//        ohos:position_y="100vp"
        content1.
          (AttrHelper.vp2px(20, AttrHelper.getDensity(this)), AttrHelper.vp2px(100, AttrHelper.getDensity(this)));
//        ohos:position_x="150vp"
//        ohos:position_y="250vp"
        content2.setPosition(AttrHelper.vp2px(150, AttrHelper.getDensity(this)), AttrHelper.vp2px(250, AttrHelper.getDensity(this)));
    }

}

而后启动模拟器运行：

<img src=”https://img.chengxuka.com/WX20210607-113258@2x.png/mark” alt=”WX20210607-113258@2x” style=”zoom:50%;” />

这里须要分外强调一下，在设置控件的宽度和高度上，咱们习惯了在xml布局中应用vp而不应用px(像素)。在设置字体大小的时候，咱们应用fp也不应用px。

特地鸣谢：

https://www.harmonybus.net/ar…

更多内容：

1、社区：鸿蒙巴士https://www.harmonybus.net/

2、公众号：HarmonyBus

3、技术交换QQ群：714518656

4、视频课：https://www.chengxuka.com