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

目录:

1.      PrecentPositionLayout功能介绍

2.      PrecentPositionLayout使用方法

3.      PrecentPositionLayout开发实现

 

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

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

1.2.     手机模拟器上运行效果:
  【软通动力】HarmonyOS三方件开发指南(1)-PrecentPositionLayout

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。

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

文件内容如下:(可复制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/

posted @ 2021-01-07 10:50  HarmonyOS技术社区  阅读(180)  评论(0编辑  收藏  举报