​

Hello everyone, I am your friend Peng Ge. Today, Peng Ge starts to study Hong Meng. I will write some articles to share with you.

The previous original article interpreted the TableLayout developed by hongmeng. The TableLayout is very simple, just a table of the same size and style.

Today we’ll look at location layouts (coordinate layouts), which are easier to use but have fewer scenarios.

The 6 layout has been basically completed, you need to learn the previous several layouts as soon as possible, layout understanding, the interface effect is very simple.

Brief introduction:

In PositionLayout, the child components are displayed on the screen by specifying the exact X/Y coordinates. (0, 0) is the upper left corner; When moving down or to the right, the coordinate value becomes larger; Allow components to overlap with each other. PositionLayout controls the display position of components in the form of coordinates, allowing components to overlap.

I’ll give you a sketch of what it looks like.

​

Code analysis:

<? The 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:id="$+id:position_text_1" ohos:height="100vp" ohos:width="250vp" ohos:background_element="#000000" ohos:position_x="120" ohos:position_y="40" ohos:text="Title" ohos:text_color="#ffffff"  ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:id="$+id:position_text_2" ohos:height="200vp" ohos:width="300vp" ohos:background_element="#0000CC" ohos:position_x="50" ohos:position_y="220" ohos:text="Content" ohos:text_color="#ffffff" ohos:text_alignment="center" ohos:text_size="20fp"/> <Text ohos:id="$+id:position_text_3" ohos:height="300vp" ohos:width="250vp" ohos:background_element="#FF0000" ohos:position_x="280" ohos:position_y="600" ohos:text="Content" ohos:text_color="#ffffff" ohos:text_alignment="center" ohos:text_size="20fp"/> </PositionLayout>Copy the code

Code parsing:

Coordinate layout consists mainly of two properties, x and y coordinates, which are used to set the location of components. ohos:position_x=”120″

ohos:position_y=”40″

One more word:

PositionLayout is the position part. The view is displayed on the screen with an exact X/Y position. (0, 0) is the upper left corner, and the position value increases as you move down or right.

Allows views to overlap with each other, and PositionLayout is generally not recommended because it makes interface code too rigid for device adaptation.

This kind of position layout is rarely used, the interface effect is simple to achieve, but relatively fixed, in order to achieve suitable for all devices or relative layout and linear layout.

Finally, summarize the attributes.

Supported properties

The attribute name

Product description

Use case

position_x

X position

ohos:position_x=”120″

position_x

Y position

ohos:position_y=”40″

Pay attention to the public number [programmer chat programming], background reply [Hongmeng], you can obtain thousands of hongmeng open source components ~

Original is not easy, useful attention. I’ll give you a triple if I help you. Thanks for your support.

Feel good friends, remember to help me like and attention yo, pen xin pen xin ~**

Author: code worker

Have a question please leave a message or private message, you can search wechat: programmer chat programming, pay attention to the public number to get more free learning materials.