Hello everyone, I am your friend Peng Ge, today talk about the relative layout of Hongmeng, standard Android which is unique.
The previous original article read the linear layout of hongmeng development layout, is the most used layout, in general, the layout can be achieved.
However, if the location of multiple components in a layout is too messy and there are more ways to arrange them, the layout is more practical than the layout.
DependentLayout is another common layout in Java UI system developed by Hongmeng. With more layouts than DirectionalLayout, each component can specify its position relative to other sibling elements, or relative to its parent component.
Summary: One component is positioned relative to another.
It’s easier to visualize the old rules:
Look at the effect of five components on a screen above. Relative layout is one setting position relative to another.
Supported XML attributes
DependentLayout’s own XML attribute
(See the API for more details.)
The attribute name
Product description
The values that
alignment
alignment
Represents left aligned.
Represents top alignment.
Indicates right alignment.
Represents bottom alignment.
Indicates horizontally centered alignment.
Indicates vertical center alignment.
Indicates center alignment.
The XML attributes supported by a DependentLayout component are listed in the following table:
(See the API for more details.)
The attribute name
Product description
Use case
left_of
Align the right edge with the left edge of another child component
ohos:left_of=”$id:component_id”
right_of
Align the left edge with the right edge of another child component
ohos:right_of=”$id:component_id”
start_of
Aligns the end edge with the start edge of another child component
ohos:start_of=”$id:component_id”
end_of
Aligns the start edge with the end edge of another child component
ohos:end_of=”$id:component_id”
above
Align the bottom edge with the top edge of another child component
ohos:above=”$id:component_id”
below
Aligns the upper edge with the lower edge of another child component
ohos:below=”$id:component_id”
align_baseline
Aligns the baseline of a child component with that of another child component
ohos:align_baseline=”$id:component_id”
align_left
Align the left edge with the left edge of another child component
ohos:align_left=”$id:component_id”
align_top
Aligns the top edge with the top edge of another child component
ohos:align_top=”$id:component_id”
align_right
Align the right edge with the right edge of another child component
ohos:align_right=”$id:component_id”
align_bottom
Align the bottom edge with the bottom edge of another child component
ohos:align_bottom=”$id:component_id”
align_start
Aligns the start edge with the start edge of another child component
ohos:align_start=”$id:component_id”
align_end
Aligns the end edge with the end edge of another child component
ohos:align_end=”$id:component_id”
align_parent_left
Align the left edge with the left edge of the parent component
ohos:align_parent_left=”true”
ohos:align_parent_left=”$boolean:true”
align_parent_top
Align the top edge with the top edge of the parent component
ohos:align_parent_top=”true”
ohos:align_parent_top=”$boolean:true”
align_parent_right
Align the right edge with the right edge of the parent component
ohos:align_parent_right=”true”
ohos:align_parent_right=”$boolean:true”
align_parent_bottom
Align the bottom edge with the bottom edge of the parent component
ohos:align_parent_bottom=”true”
ohos:align_parent_bottom=”$boolean:true”
align_parent_start
Aligns the start edge with the start edge of the parent component
ohos:align_parent_start=”true”
ohos:align_parent_start=”$boolean:true”
align_parent_end
Align the end edge with the end edge of the parent component
ohos:align_parent_end=”true”
ohos:align_parent_end=”$boolean:true”
center_in_parent
Keeps the child in the center of the parent
ohos:center_in_parent=”true”
ohos:center_in_parent=”$boolean:true”
horizontal_center
Keep the child centered horizontally on the parent
ohos:horizontal_center=”true”
ohos:horizontal_center=”$boolean:true”
vertical_center
Keep child components centered vertically on parent components
ohos:vertical_center=”true”
ohos:vertical_center=”$boolean:true”
arrangement
DependentLayout is arranged in two ways: 1) relative to other sibling components and 2) relative to the location of other parent components.
Relative to sibling components
1. Align to the right relative to the level
<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:alignment="center" ohos:background_element="#000000"> <Text ohos:id="$+id:text1" ohos:width="match_content" ohos:height="match_content" ohos:left_margin="15vp" ohos:top_margin="15vp" ohos:bottom_margin="15vp" ohos:text="text1" ohos:text_size="20fp" ohos:background_element="#ffffff"/> <Text ohos:id="$+id:text2" ohos:width="match_content" ohos:height="match_content" ohos:left_margin="15vp" ohos:top_margin="15vp" ohos:right_margin="15vp" ohos:bottom_margin="15vp" ohos:text="end_of text1" ohos:text_size="20fp" ohos:background_element="#ffffff" Ohos :end_of="$id:text1" /> </DependentLayout>Copy the codeEffect:
2. Align the bottom relative to the level
<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:alignment="center" ohos:background_element="#000000"> <Text ohos:id="$+id:text1" ohos:width="match_content" ohos:height="match_content" ohos:left_margin="15vp" ohos:top_margin="15vp" ohos:bottom_margin="15vp" ohos:text="text1" ohos:text_size="20fp" ohos:background_element="#ffffff"/> <Text ohos:id="$+id:text2" ohos:width="match_content" ohos:height="match_content" ohos:left_margin="15vp" ohos:top_margin="15vp" ohos:right_margin="15vp" ohos:bottom_margin="15vp" ohos:text="end_of text1" ohos:text_size="20fp" ohos:background_element="#ffffff" < > </DependentLayout> < $id: below="$id:text1" /> </DependentLayout>Copy the codeEffect:
Same rule, everything else
(Above, start_of, left_of, right_of)
Set different relative positions respectively.
Relative to the parent component
The above positions can be combined to form a layout at the top left corner, bottom left corner, top right corner, and bottom right corner.
<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:width="match_parent" ohos:height="match_parent" ohos:alignment="center" ohos:background_element="#000000"> <Text ohos:id="$+id:text6" ohos:width="match_content" ohos:height="match_content" ohos:text="align_parent_right" ohos:text_size="15fp" ohos:background_element="#ffffff" Ohos :align_parent_right="true" oHOs :center_in_parent="true" oHOs :center_in_parent="true" Ohos :width="match_content" ohos:height="match_content" ohos:text="align_parent_bottom" ohos:text_size="15fp" ohos:background_element="#ffffff" ohos:align_parent_bottom="true" Ohos :center_in_parent="true" /> <Text ohos:id="$+id:text9" ohos:width="match_content" ohos:height="match_content" ohos:text="align_parent_left_top" ohos:text_size="15fp" Ohos :background_element="# FFFFFF "oHOs :align_parent_left="true" // Align_parent_top ="true" // Align_parent_top ="true" </ > </DependentLayout>Copy the codeEffect:
Relative layout in fact, the use of habit is the best way to achieve the interface, I suggest you learn more about the layout of the development.
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.