PositionLayout

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

图1 PositionLayout示意图 img

布局方式

PositionLayout以坐标的形式控制组件的显示位置，允许组件相互重叠。

  • 在layout目录下的XML文件中创建PositionLayout并添加多个组件，并通过position_x和position_y属性设置子组件的坐标。

    图2 使用PositionLayout的布局效果 img

    示例代码：

        <PositionLayout        ohos:id="$+id:position"        ohos:height="match_parent"        ohos:width="300vp"        ohos:background_element="#3387CEFA">        <Text            ohos:id="$+id:position_text_1"            ohos:height="50vp"            ohos:width="200vp"            ohos:background_element="#9987CEFA"            ohos:position_x="100"            ohos:position_y="20"            ohos:text="Title"            ohos:text_alignment="center"            ohos:text_size="20fp"/>        <Text            ohos:id="$+id:position_text_2"            ohos:height="200vp"            ohos:width="200vp"            ohos:background_element="#9987CEFA"            ohos:position_x="20"            ohos:position_y="150"            ohos:text="Content"            ohos:text_alignment="center"            ohos:text_size="20fp"/>        <Text            ohos:id="$+id:position_text_3"            ohos:height="200vp"            ohos:width="200vp"            ohos:background_element="#9987CEFA"            ohos:position_x="180"            ohos:position_y="400"            ohos:text="Content"            ohos:text_alignment="center"            ohos:text_size="20fp"/>    </PositionLayout>

    设置子组件的坐标时（position_x和position_y属性），除了上述示例中的XML方式，还可以在对应的AbilitySlice中通过setPosition(int x, int y)接口设置，Java示例代码如下：

            Text title = (Text)findComponentById(ResourceTable.Id_position_text_1);        Text content1 = (Text)findComponentById(ResourceTable.Id_position_text_2);        Text content2 = (Text)findComponentById(ResourceTable.Id_position_text_3);        title.setPosition(100, 20);        content1.setPosition(20, 150);        content2.setPosition(180, 400);

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

    图3 Right组件右侧超出部分将不显示 img

    示例代码：

        <PositionLayout        ...>        ...        <Text            ohos:id="$+id:position_text_4"            ohos:height="120vp"            ohos:width="120vp"            ohos:background_element="#9987CEFA"            ohos:position_x="430"            ohos:position_y="150"            ohos:text="Right"            ohos:text_alignment="center"            ohos:text_size="20fp"/>    </PositionLayout>

相关实例

针对PositionLayout开发，有以下示例工程可供参考：

  • PositionLayout

    本示例演示了PositionLayout的一些特性，包括子组件位置的影响和超越屏幕大小后子组件的显示规则。

results matching ""

    No results matching ""