HarmonyOS UI开发 PositionLayout(位置布局) 的使用

野性酷女 2022-10-09 04:52 149阅读 0赞

### PositionLayout 是什么 ###

PositionLayout 是位置布局，在PositionLayout中，子组件通过指定准确的x/y坐标值在屏幕上显示。(0, 0)为左上角；当向下或向右移动时，坐标值变大；允许组件之间互相重叠。看到这个描述感觉实际开发中应该很少用到这个布局，本着学习的态度，简单的了解它的使用

### PositionLayout  的属性 ###

ohos:position\_x  控制x 轴方向的位置

ohos:position\_y 控制y轴方向的位置

x轴，y轴在屏幕的右上角，具体如下图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70][]

### demo 练习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">
    
        <Button
            ohos:id="$+id:button1"
            ohos:height="50vp"
            ohos:width="100vp"
            ohos:position_x="0vp"
            ohos:position_y="0vp"
            ohos:background_element="#00FFFF"
            ohos:text="Java"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button2"
            ohos:height="50vp"
            ohos:width="100vp"
            ohos:position_x="35vp"
            ohos:position_y="35vp"
            ohos:background_element="#FF0000"
            ohos:text="Java"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    
    
        <Button
            ohos:id="$+id:button3"
            ohos:height="50vp"
            ohos:width="100vp"
            ohos:position_x="75vp"
            ohos:position_y="75vp"
            ohos:background_element="#00d8a0"
            ohos:text="Java"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button5"
            ohos:height="50vp"
            ohos:width="100vp"
            ohos:position_x="125vp"
            ohos:position_y="115vp"
            ohos:background_element="#8B00FF"
            ohos:text="Java"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    
        <Button
            ohos:id="$+id:button6"
            ohos:height="50vp"
            ohos:width="300vp"
            ohos:position_x="175vp"
            ohos:position_y="175vp"
            ohos:background_element="#8B00FF"
            ohos:text="Java"
            ohos:text_alignment="center"
            ohos:text_size="20fp"/>
    
    
    
    </PositionLayout>

实现的效果图如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1][]

### 其他想法 ###

本想着到这就了解忘了，不过突然间想到了既然它是通过x，y轴来控制 控件的位置，我们可以通过它来实现一个简答的移动，就是xml 一个位置，java 代码在写一个位置

xml 代码如下

java 代码

package com.example.myapplication.slice;
    
    import com.example.myapplication.ResourceTable;
    import ohos.aafwk.ability.AbilitySlice;
    import ohos.aafwk.ability.OnClickListener;
    import ohos.aafwk.content.Intent;
    import ohos.agp.components.AttrHelper;
    import ohos.agp.components.Button;
    import ohos.agp.components.Component;
    
    public class MainAbilitySlice extends AbilitySlice {
        private Button button1;
        @Override
        public void onStart(Intent intent) {
            super.onStart(intent);
            super.setUIContent(ResourceTable.Layout_ability_main);
            button1= (Button) findComponentById(ResourceTable.Id_button1);
    
            button1.setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    button1.setPosition(vp2px(200), vp2px(0));
                }
            });
        }
    
        private int vp2px(float vp){
            return AttrHelper.vp2px(vp,this);
        }
    
    
        @Override
        public void onActive() {
            super.onActive();
        }
    
        @Override
        public void onForeground(Intent intent) {
            super.onForeground(intent);
        }
    }

xml 的位置

![20210623224757543.png][]

点击button 移动之后的位置

![20210623224825608.png][]

[官方文档参考连接][Link 1]

其他的布局

[HarmonyOS UI开发 TableLayout(表格布局) 的使用][HarmonyOS UI_ TableLayout_]

[HarmonyOS UI开发 AdaptiveBoxLayout(自适应盒子布局) 的使用][HarmonyOS UI_ AdaptiveBoxLayout_]

[HarmonyOS UI开发 StackLayout(堆栈布局) 的使用][HarmonyOS UI_ StackLayout_]

[HarmonyOS UI开发 DependentLayout(依赖布局) 的使用][HarmonyOS UI_ DependentLayout_]

[HarmonyOS UI开发 DirectionalLayout(定向布局) 的使用][HarmonyOS UI_ DirectionalLayout_]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70]: /images/20221005/e429c8c1ac384bb5a7db7282c16944fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjEwMDQy_size_16_color_FFFFFF_t_70 1]: /images/20221005/b054fc467ee64d159ddc74826bf9e842.png
[20210623224757543.png]: /images/20221005/911d11967d0b42d69b9e81602ea17445.png
[20210623224825608.png]: /images/20221005/c4d6bb25fe384d4eb58a3ce66fdbe44b.png
[Link 1]: https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-layout-positionlayout-0000001062250815
[HarmonyOS UI_ TableLayout_]: https://huxiaomu.blog.csdn.net/article/details/118198350
[HarmonyOS UI_ AdaptiveBoxLayout_]: https://huxiaomu.blog.csdn.net/article/details/118164657
[HarmonyOS UI_ StackLayout_]: https://huxiaomu.blog.csdn.net/article/details/118095017
[HarmonyOS UI_ DependentLayout_]: https://huxiaomu.blog.csdn.net/article/details/118076995
[HarmonyOS UI_ DirectionalLayout_]: https://huxiaomu.blog.csdn.net/article/details/118075010