Use of commonly used layout DependentLayout of HarmonyOS

1, Introduction to DependentLayout

  • DependentLayout is a common layout in Java UI system. Compared with directional layout, it has more layout methods. Each component can specify the position relative to other peer elements or the position relative to the parent component.
  • For the layout of DirectionalLayout, please refer to my blog: Use of commonly used layout DirectionalLayout of HarmonyOS.
  • The layout of DependentLayout is as follows:

2, Supported XML attributes

Attribute nameChinese descriptionValueValue descriptionUse case
alignmentAlignmentleftIndicates left alignmentYou can set value items as listed in the table, or use "|" to combine multiple items.
ohos:alignment="top|left"
ohos:alignment="left"
topIndicates top alignment
leftIndicates left alignment
bottomIndicates bottom alignment
horizontal_centerIndicates horizontal center alignment
vertical_centerIndicates vertical center alignment
centerIndicates center alignment
  • The XML attributes supported by the components contained in DependentLayout are shown in the following table:
Attribute nameChinese descriptionValueValue descriptionUse case
left_ofAlign the right edge with the left edge of another subcomponentquoteOnly the IDs of other components contained in the DependentLayout can be referencedohos:left_of="$id:component_id"
right_ofAlign the left edge with the right edge of another subcomponentohos:right_of="$id:component_id"
start_ofAlign the end edge with the start edge of another subcomponentohos:start_of="$id:component_id"
end_ofAlign the start edge with the end edge of another subcomponentohos:end_of="$id:component_id"
aboveAlign the lower edge with the upper edge of the other subcomponentohos:above="$id:component_id"
belowAlign the upper edge with the lower edge of another sub componentohos:below="$id:component_id"
align_baselineAlign the baseline of a subcomponent with the baseline of another subcomponentohos:align_baseline="$id:component_id"
align_leftAlign the left edge with the left edge of another subcomponentohos:align_left="$id:component_id"
align_topAlign the top edge with the top edge of another subcomponentohos:align_top="$id:component_id"
align_rightAlign the right edge with the right edge of another subcomponentohos:align_right="$id:component_id"
align_bottomAlign the bottom edge with the bottom edge of another sub componentohos:align_bottom="$id:component_id"
align_startAlign the start edge with the start edge of another subcomponentohos:align_start="$id:component_id"
align_endAlign the end edge with the end edge of another sub componentohos:align_end="$id:component_id"
align_parent_leftAlign the left edge with the left edge of the parent componentboolean type You can set true/false directly or reference boolean resourcesohos:align_parent_left="true"
ohos:align_parent_left="$boolean:true"
align_parent_topAlign the top edge with the top edge of the parent componentohos:align_parent_top="true"
ohos:align_parent_top="$boolean:true"
align_parent_rightAlign the right edge with the right edge of the parent componentohos:align_parent_right="true"
ohos:align_parent_right="$boolean:true"
align_parent_bottomAlign the bottom edge with the bottom edge of the parent componentohos:align_parent_bottom="true"
ohos:align_parent_bottom="$boolean:true"
align_parent_startAlign the start edge with the start edge of the parent componentohos:align_parent_start="true"
ohos:align_parent_start="$boolean:true"
align_parent_endAlign the end edge with the end edge of the parent componentohos:align_parent_end="true"
ohos:align_parent_end="$boolean:true"
center_in_parentKeep the child component at the center of the parent componentohos:center_in_parent="true"
ohos:center_in_parent="$boolean:true"
horizontal_centerKeep the child component at the center of the horizontal direction of the parent componentohos:horizontal_center="true"
ohos:horizontal_center="$boolean:true"
vertical_centerKeep the child component centered in the vertical direction of the parent componentohos:vertical_center="true"
ohos:vertical_center="$boolean:true"

3, Arrangement mode

  • DependentLayout is arranged relative to the position of other peer components or parent components.
① Relative to peer components
  • end_of
    • As shown in the figure below:

    • Example code:
	<?xml version="1.0" encoding="utf-8"?>
	<DependentLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_content"
	    ohos:height="match_content"
	    ohos:background_element="$graphic:color_light_gray_element">
	    <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="$graphic:color_cyan_element"/>
	    <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="$graphic:color_cyan_element"
	        ohos:end_of="$id:text1"/>
	</DependentLayout>
    • color_light_gray_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#EDEDED"/>
	</shape>
    • color_cyan_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>
  • below
    • As shown in the figure below:

    • Example code:
	<?xml version="1.0" encoding="utf-8"?>
	<DependentLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_content"
	    ohos:height="match_content"
	    ohos:background_element="$graphic:color_light_gray_element">
	    <Text
	        ohos:id="$+id:text1"
	        ohos:width="match_content"
	        ohos:height="match_content"
	        ohos:left_margin="15vp"
	        ohos:top_margin="15vp"
	        ohos:right_margin="40vp"
	        ohos:text="text1"
	        ohos:text_size="20fp"
	        ohos:background_element="$graphic:color_cyan_element"/>
	    <Text
	        ohos:id="$+id:text2"
	        ohos:width="match_content"
	        ohos:height="match_content"
	        ohos:left_margin="15vp"
	        ohos:top_margin="15vp"
	        ohos:right_margin="40vp"
	        ohos:bottom_margin="15vp"
	        ohos:text="below text1"
	        ohos:text_size="20fp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:below="$id:text1"/>
	</DependentLayout>
    • color_light_gray_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#EDEDED"/>
	</shape>
    • color_cyan_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>
  • Other above and start_of,left_of,right_of and other parameters can realize similar layout respectively.
② Relative to parent component
  • The above position layout can be combined to form a layout in the upper left corner, lower left corner, upper right corner and lower right corner, as follows:

  • Example code:
	<?xml version="1.0" encoding="utf-8"?>
	<DependentLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="300vp"
	    ohos:height="100vp"
	    ohos:background_element="$graphic:color_background_gray_element">
	    <Text
	        ohos:id="$+id:text6"
	        ohos:width="match_content"
	        ohos:height="match_content"
	        ohos:text="align_parent_right"
	        ohos:text_size="12fp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:align_parent_right="true"
	        ohos:center_in_parent="true"/>
	    <Text
	        ohos:id="$+id:text7"
	        ohos:width="match_content"
	        ohos:height="match_content"
	        ohos:text="align_parent_bottom"
	        ohos:text_size="12fp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:align_parent_bottom="true"
	        ohos:center_in_parent="true"/>
	    <Text
	        ohos:id="$+id:text8"
	        ohos:width="match_content"
	        ohos:height="match_content"
	        ohos:text="center_in_parent"
	        ohos:text_size="12fp"
	        ohos:background_element="$graphic:color_cyan_element"
	        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="12fp"
	        ohos:background_element="$graphic:color_cyan_element"
	        ohos:align_parent_left="true"
	        ohos:align_parent_top="true"/>
	</DependentLayout>
  • color_background_gray_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#ffbbbbbb"/>
	</shape>
  • color_cyan_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#00FFFD"/>
	</shape>

4, Scenario example

  • Using DependentLayout, you can easily realize rich layout, as shown in the following figure:

  • Source code example:
	<?xml version="1.0" encoding="utf-8"?>
	<DependentLayout
	    xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:width="match_parent"
	    ohos:height="match_content"
	    ohos:background_element="$graphic:color_background_gray_element">
	    <Text
	        ohos:id="$+id:text1"
	        ohos:width="match_parent"
	        ohos:height="match_content"
	        ohos:text_size="25fp"
	        ohos:top_margin="15vp"
	        ohos:left_margin="15vp"
	        ohos:right_margin="15vp"
	        ohos:background_element="$graphic:color_gray_element"
	        ohos:text="Title"
	        ohos:text_weight="1000"
	        ohos:text_alignment="horizontal_center"
	    />
	    <Text
	        ohos:id="$+id:text2"
	        ohos:width="match_content"
	        ohos:height="120vp"
	        ohos:text_size="10fp"
	        ohos:background_element="$graphic:color_gray_element"
	        ohos:text="Catalog"
	        ohos:top_margin="15vp"
	        ohos:left_margin="15vp"
	        ohos:right_margin="15vp"
	        ohos:bottom_margin="15vp"
	        ohos:align_parent_left="true"
	        ohos:text_alignment="center"
	        ohos:multiple_lines="true"
	        ohos:below="$id:text1"
	        ohos:text_font="serif"/>
	    <Text
	        ohos:id="$+id:text3"
	        ohos:width="match_parent"
	        ohos:height="120vp"
	        ohos:text_size="25fp"
	        ohos:background_element="$graphic:color_gray_element"
	        ohos:text="Content"
	        ohos:top_margin="15vp"
	        ohos:right_margin="15vp"
	        ohos:bottom_margin="15vp"
	        ohos:text_alignment="center"
	        ohos:below="$id:text1"
	        ohos:end_of="$id:text2"
	        ohos:text_font="serif"/>
	    <Button
	        ohos:id="$+id:button1"
	        ohos:width="70vp"
	        ohos:height="match_content"
	        ohos:text_size="15fp"
	        ohos:background_element="$graphic:color_gray_element"
	        ohos:text="Previous"
	        ohos:right_margin="15vp"
	        ohos:bottom_margin="15vp"
	        ohos:below="$id:text3"
	        ohos:left_of="$id:button2"
	        ohos:italic="false"
	        ohos:text_weight="5"
	        ohos:text_font="serif"/>
	    <Button
	        ohos:id="$+id:button2"
	        ohos:width="70vp"
	        ohos:height="match_content"
	        ohos:text_size="15fp"
	        ohos:background_element="$graphic:color_gray_element"
	        ohos:text="Next"
	        ohos:right_margin="15vp"
	        ohos:bottom_margin="15vp"
	        ohos:align_parent_end="true"
	        ohos:below="$id:text3"
	        ohos:italic="false"
	        ohos:text_weight="5"
	        ohos:text_font="serif"/>
	</DependentLayout>
  • color_background_gray_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#ffbbbbbb"/>
	</shape>
  • color_gray_element.xml:
	<?xml version="1.0" encoding="utf-8"?>
	<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
	    ohos:shape="rectangle">
	    <solid
	        ohos:color="#878787"/>
	</shape>

Keywords: harmonyos

Added by ahinkley on Mon, 24 Jan 2022 06:31:15 +0200