【软通动力】HarmonyOS三方件开发指南(1)PrecentPositionLayout

目录：

1.      PrecentPositionLayout功能介绍

2.      PrecentPositionLayout使用方法

3.      PrecentPositionLayout开发实现

1.      PrecentPositionLayout功能介绍
1.1.     组件介绍：
        SDK提供了不同布局规范的组件容器，例如以单一方向排列的DirectionalLayout、以相对位置排列的DependentLayout、以确切位置排列的PositionLayout等。

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

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

2.      PrecentPositionLayout使用方法
2.1.     新建工程，增加组件Har包依赖
在应用模块中调用HAR，只需要将precentpositionlayout.har复制到entry\libs目录下即可（由于build.gradle中已经依赖libs目录下的*.har，因此不需要再做修改）。

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);

}

查看更多章节>>>

作者：软通动力乾

想了解更多内容，请访问： 51CTO和华为官方战略合作共建的鸿蒙技术社区https://harmonyos.51cto.com/