关于harmonyos:26HarmonyOS鸿蒙开发定位布局PositionLayout

作者：韩茹
公司：程序咖（北京）科技有限公司
鸿蒙巴士专栏作家

在PositionLayout中，子组件通过指定精确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右挪动时，坐标值变大；容许组件之间相互重叠。

一、反对的XML属性

PositionLayout的共有XML属性继承自：Component

属性名称	中文形容	取值	取值阐明	应用案例
id	控件identity，用以辨认不同控件对象，每个控件惟一	integer类型	仅可用于配置控件的id。	ohos:id="$+id:component_id"
theme	款式	援用	仅可援用pattern资源。	ohos:theme="$pattern:button_pattern"
width	宽度，必填项	float类型，match_parent，match_content		ohos:width="20" ohos:width="10vp" ohos:width="$float:size_value"
height	高度，必填项	float类型，match_parent，match_content		ohos:height="20" ohos:height="20vp" ohos:height="$float:size_value"
min_width	最小宽度	float类型		ohos:min_width="20" ohos:min_width="20vp" ohos:min_width="$float:size_value"
min_height	最小高度	float类型		ohos:min_height="20" ohos:min_height="20vp" ohos:min_height="$float:size_value"
alpha	透明度	float类型	取值范畴在0~1。	ohos:alpha="0.86" ohos:alpha="$float:value"
enabled	是否启用	boolean类型		ohos:enabled="true" ohos:enabled="$boolean:true"
visibility	可见性	visible，invisible，hide		ohos:visibility="visible"
padding	内间距	float类型
margin	外边距	float类型

二、布局形式

PositionLayout以坐标的模式管制组件的显示地位，容许组件互相重叠。

示例代码：

<?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="#3387CEFA"    >    <Text        ohos:height="50vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:layout_alignment="horizontal_center"        ohos:text="Title"        ohos:text_size="20fp"        ohos:text_alignment="center"        ohos:position_x="80vp"        ohos:position_y="20vp"        />    <Text        ohos:height="200vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:position_x="20vp"        ohos:position_y="100vp"        ohos:text="Content"        ohos:text_alignment="center"        ohos:text_size="20fp"/>    <Text        ohos:height="200vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:position_x="150vp"        ohos:position_y="250vp"        ohos:text="Content"        ohos:text_alignment="center"        ohos:text_size="20fp"/></PositionLayout>

成果：

https://img.chengxuka.comsrc=...

对于超过布局自身大小的组件，超出局部将不显示。

<?xml version="1.0" encoding="utf-8"?><PositionLayout    ...    >    ...    <Text        ohos:height="200vp"        ohos:width="200vp"        ohos:background_element="#9987CEFA"        ohos:position_x="250vp"        ohos:position_y="150vp"        ohos:text="Right"        ohos:text_alignment="center"        ohos:text_size="20fp"/></PositionLayout>

效果图：

设置子组件的坐标时（position_x和position_y属性），除了上述示例中的XML形式，还能够在对应的AbilitySlice中通过setPosition(int x, int y)接口设置。

从新创立一个布局文件：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，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)));    }}

而后启动模拟器运行：