2.6【HarmonyOS鸿蒙开发】定位布局PositionLayout

41 篇文章 0 订阅

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

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

0000000000011111111.20210602180820.03962076559871902027960948698529

一、支持的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_contentohos:width=“20"
ohos:width=“10vp"
ohos:width=”$float:size_value”
height高度,必填项float类型,match_parent,match_contentohos: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,hideohos: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.com src=“https://img.chengxuka.com/WX20210607-111047@2x.png” alt=“WX20210607-111047@2x” style=“zoom:50%;” />

对于超过布局本身大小的组件,超出部分将不显示。

<?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>

效果图:

WX20210607-135528@2x

设置子组件的坐标时(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)));
    }

}

然后启动模拟器运行:

WX20210607-113258@2x

更多内容:

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

2、公众号:HarmonyBus

3、技术交流QQ群:714518656

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

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值