基于 OpenHarmony PrecentPositionLayout 开发指南

1. PrecentPositionLayout 功能介绍

1.1. 组件介绍：

鸿蒙 SDK 提供了不同布局规范的组件容器，例如以单一方向排列的 DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的 PositionLayout 等。

但是 PositionLayout 中组件的位置是以绝对像素点定义的，无法实现根据屏幕的大小自适应。因此，引入一种以百分比方式定义的 PrecentPositionLayout 布局容器，通过它可以很
方便的实现屏幕自适应。

1.2. 手机模拟器上运行效果：

2. PrecentPositionLayout 使用方法

2.1. 新建工程，增加组件 Har 包依赖

在应用模块中调用 HAR，常用的添加依赖的方式包括如下两种。

方式一：依赖本地 HAR
只需要将 precentpositionlayout.har 复制到 entry\libs 目录下即可（由于 build.gradle 中已经依赖的 libs 目录下的*.har，因此不需要在做修改）。
方式二：调用 Maven 仓中的 HAR
在应用模块的 build.gradle 中的 dependencies 闭包中，添加如下代码

dependencies {
implementation 'com.huawei.har:precentpositionlayout:1.0.1'
}

2.2. 修改主页面的布局文件

修改主页面的布局文件 ability_main.xml，将跟组件容器修改为com.isoftstone.precentpositionlayout.PrecentPositionLayout，然后在增加 5 个 Text 组件，分别位于屏幕的左上，左下，右上，右下和中间的位置，长度和宽度都占屏幕的 25%。修改后代码如下：

<?xml version="1.0" encoding="utf-8"?>
<com.isoftstone.precentpositionlayout.PrecentPositionLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent">
<Text
ohos:id="$+id:text_helloworld"
ohos:height="250"
ohos:width="250"
ohos:left_margin="0"
ohos:top_margin="0"
ohos:background_element="$graphic:background_text"
ohos:text="左上 25%"
ohos:text_size="50"
/>

<Text
ohos:id="$+id:text_helloworld"
ohos:height="250"
ohos:width="250"
ohos:left_margin="750"
ohos:top_margin="0"
ohos:background_element="$graphic:background_text"
ohos:text="右上 25%"
ohos:text_size="50"
/>
<Text
ohos:id="$+id:text_helloworld"
ohos:height="250"
ohos:width="250"
ohos:left_margin="0"
ohos:top_margin="750"
ohos:background_element="$graphic:background_text"
ohos:text="左下 25%"
ohos:text_size="50"
/>
<Text
ohos:id="$+id:text_helloworld"
ohos:height="250"
ohos:width="250"
ohos:left_margin="750"
ohos:top_margin="750"
ohos:background_element="$graphic:background_text"
ohos:text="右下 25%"
ohos:text_size="50"
/>
<Text
ohos:id="$+id:text_helloworld"
ohos:height="250"
ohos:width="250"
ohos:left_margin="375"
ohos:top_margin="375"
ohos:background_element="$graphic:background_text"
ohos:text="中心 25%"
ohos:text_size="50"
/>

</com.isoftstone.precentpositionlayout.PrecentPositionLayout>

2.3. 增加 Text 组件的背景资源文件

为了方便观察，上一步我们将 Text 组件设置了一个绘制背景 graphic:background_text。这里需要在resources/base/grahic 目录下新增一个可绘制资源文件。右键点击 graphic，选择 New-File,文件名输入background_text.xml。

文件内容如下：（可复制 background_ability_main.xml 的内容，修改 color 值即可）

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<solid
ohos:color="#00FFFF"/>
</shape>

2.4. 修改 MainAbilitySlince 的 UI 加载代码

在 MainAbilitySlince 类的 onStart 函数中，增加如下代码。

public void onStart(Intent intent) {
super.onStart(intent);
// 解析 xml 获得 PrecentPositionLayout 对象
PrecentPositionLayout precentPositionLayout = (PrecentPositionLayout)
LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_ability_main,
null, false);
// 自动调整组件的百分比
precentPositionLayout.AutoSize();
// 设置到 UI
super.setUIContent(precentPositionLayout);
//super.setUIContent(ResourceTable.Layout_ability_main);
}

3. PrecentPositionLayout 开发实现

3.1. 新建一个 Module

新建一个 Module，类型选择 HarmonyOS Library，模块名为 precentpositionlayout，如图

3.2. 新建一个 PrecentPositionLayout 类

新建一个 PrecentPositionLayout 类，继承自 PositionLayout 类，并增加 AutoSize()方法.

/* 调整各组件的大小，按照百分比调整
* 将原来组件的起始位置，宽度和高度都视作相对于整个屏幕的百分比值，然后根据屏幕的分辨率
转换为实际的像素值。
* 注：考虑到使用 0-100 配置百分比的话，范围太小不够精确，因此配置范围设置为 0-1000，
* 比如当前屏幕是 1920 * 1060, 某个组件的宽度和高度配置的是 200，则表示改组件的宽和高都占整个屏幕的 20%。
* 因此，调整后改组件的实际大小为 384 * 212.
*/
public void AutoSize() {
// 获取屏幕分辨率
Optional<Display> display =
DisplayManager.getInstance().getDefaultDisplay(this.getContext());
Point pt = new Point();
display.get().getSize(pt);
// 去除上面标题栏和下面导航栏的高度
pt.modify(pt.getPointX(), pt.getPointY() - 160);
// 调增各组件的大小
int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
Component component = getComponentAt(i);
ComponentContainer.LayoutConfig config = component.getLayoutConfig();
component.setLeft(config.getMarginLeft() * pt.getPointXToInt() / 1000);
component.setTop(config.getMarginTop() * pt.getPointYToInt() / 1000);
component.setWidth(config.width * pt.getPointXToInt() / 1000);
component.setHeight(config.height * pt.getPointYToInt() / 1000);
}
}