DirectionalLayout
DirectionalLayout is an important component layout in Java UI, which is used to arrange a group of components (Component) in a horizontal or vertical direction, and can easily align the components in the layout. The combination of this layout and other layouts can realize richer layout methods.
Diagram of DirectionalLayout
Supported XML attributes
The common XML attributes of DirectionalLayout are inherited from: Component
DirectionalLayout's own XML attributes are shown in the following table:
attribute name |
Chinese description |
value |
Value description |
Use Cases |
---|---|---|---|---|
alignment | alignment | left | Indicates left alignment. | You can set the value items as listed in the table, You can also use "|" for multiple combinations. ohos:alignment ="top|left" ohos:alignment ="left" |
top | Indicates top alignment. | |||
right | Indicates right alignment | |||
bottom | Indicates bottom alignment. | |||
horizontal_center | Indicates horizontal center alignment. | |||
vertical_center | Indicates vertical center alignment. | |||
center | Indicates center alignment. | |||
start | Indicates alignment by the start. | |||
end | Indicates alignment by the end. | |||
orientation | Arrangement direction of child layout | horizontal |
Indicates a horizontal layout. |
ohos:orientation ="horizontal" |
vertical |
Indicates a vertical layout. |
ohos:orientation ="vertical" |
||
total_weight |
The sum of the weights of all subviews |
float type |
You can directly set the floating-point value, or you can refer to the float floating-point resource. |
ohos:total_weight ="2.5" ohos:total_weigh t="$float:total_weight" |
The XML attributes supported by the components contained in DirectionalLayout are shown in the following table:
attribute name |
Chinese description |
value |
Value description |
Use Cases |
---|---|---|---|---|
layout_alignment | alignment | left | Indicates left alignment. | You can set the value items as listed in the table, or use "|" to make multiple combinations. ohos:layout_alignment ="top" ohos:layout_alignmen t="top|left" |
top | Indicates top alignment. | |||
right | Indicates right alignment | |||
bottom | Indicates bottom alignment. | |||
horizontal_center | Indicates horizontal center alignment. | |||
vertical_center | Indicates vertical center alignment. | |||
center | Indicates center alignment. | |||
weight |
proportion |
float type |
You can directly set the floating-point value, or you can refer to the float floating-point resource. |
ohos:weight ="1" ohos:weight ="$float:weight" |
Arrangement
The orientation of DirectionalLayout is divided into horizontal or vertical. Use orientation to set the arrangement of components in the layout, and the default is vertical arrangement.
vertical arrangement
Arrange three buttons vertically, the effect is as follows:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="vertical">
<Button
ohos:width="33vp"
ohos:height="20vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="33vp"
ohos:height="20vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="33vp"
ohos:height="20vp"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
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>
horizontal arrangement
The child component does not exceed the size of the layout itself
Arrange three buttons horizontally, the effect is as follows:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal">
<Button
ohos:width="33vp"
ohos:height="20vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="33vp"
ohos:height="20vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="33vp"
ohos:height="20vp"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
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>
- Child component exceeds the size of the layout itself
DirectionalLayout will not wrap automatically, and its sub-components will be arranged in sequence according to the set direction. If it exceeds the size of the layout itself, the part exceeding the size of the layout will not be displayed.
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="20vp"
ohos:orientation="horizontal">
<Button
ohos:width="166vp"
ohos:height="match_content"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="166vp"
ohos:height="match_content"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 2"/>
<Button
ohos:width="166vp"
ohos:height="match_content"
ohos:left_margin="13vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
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>
This layout contains three buttons, but since the DirectionalLayout does not automatically wrap, the part of the component that exceeds the size of the layout cannot be displayed. The interface is displayed as follows:
alignment
Components in DirectionalLayout use layout_alignment to control their own alignment in the layout. The alignment method is closely related to the arrangement method. When the arrangement method is horizontal, the optional alignment method only works in the vertical direction (top, bottom, vertical_center, center). Other alignment methods will not take effect. When the arrangement is vertical, the optional alignment only applies to the horizontal type (left, right, start, end, horizontal_center, center). Other alignments will not take effect.
Sample code for three alignments:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="60vp">
<Button
ohos:width="50vp"
ohos:height="20vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:layout_alignment="left"
ohos:text="Button 1"/>
<Button
ohos:width="50vp"
ohos:height="20vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:layout_alignment="horizontal_center"
ohos:text="Button 2"/>
<Button
ohos:width="50vp"
ohos:height="20vp"
ohos:background_element="$graphic:color_cyan_element"
ohos:layout_alignment="right"
ohos:text="Button 3"/>
</DirectionalLayout>
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>
Example of three alignment effects
Weights
Weight (weight) is to allocate the size of the parent component proportionally to the component. The calculation formula in the horizontal layout is:
Assignable width of parent layout = width of parent layout - sum of width of all child components;
Component width = component weight / sum of all component weights * parent layout can assign width;
In actual use, it is recommended to use width=0 to proportionally distribute the width of the parent layout. The effect of 1:1:1 is as follows:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_content"
ohos:orientation="horizontal">
<Button
ohos:width="0vp"
ohos:height="20vp"
ohos:weight="1"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 1"/>
<Button
ohos:width="0vp"
ohos:height="20vp"
ohos:weight="1"
ohos:background_element="$graphic:color_gray_element"
ohos:text="Button 2"/>
<Button
ohos:width="0vp"
ohos:height="20vp"
ohos:weight="1"
ohos:background_element="$graphic:color_cyan_element"
ohos:text="Button 3"/>
</DirectionalLayout>
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>
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>
Scenario example
Source code example:
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:background_element="#FFFFFFFF">
<DirectionalLayout
ohos:height="70vp"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:background_element="#FF9F9F9F"
ohos:top_margin="10vp">
<Button
ohos:height="20vp"
ohos:width="33vp"
ohos:background_element="#FF00FFFD"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:text="Button 1"/>
<Button
ohos:height="20vp"
ohos:width="33vp"
ohos:background_element="#FF00FFFD"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:text="Button 2"/>
<Button
ohos:height="20vp"
ohos:width="33vp"
ohos:background_element="#FF00FFFD"
ohos:bottom_margin="3vp"
ohos:left_margin="13vp"
ohos:text="Button 3"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="70vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:background_element="#FF9F9F9F"
ohos:top_margin="10vp"
>
<Button
ohos:height="20vp"
ohos:width="33vp"
ohos:background_element="#FF00FFFD"
ohos:left_margin="13vp"
ohos:text="Button 1"/>
<Button
ohos:height="20vp"
ohos:width="33vp"
ohos:background_element="#FF00FFFD"
ohos:left_margin="13vp"
ohos:text="Button 2"/>
<Button
ohos:height="20vp"
ohos:width="33vp"
ohos:background_element="#FF00FFFD"
ohos:left_margin="13vp"
ohos:text="Button 3"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="70vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:background_element="#FF9F9F9F"
ohos:top_margin="10vp"
>
<Button
ohos:height="match_content"
ohos:width="166vp"
ohos:background_element="#FF00FFFD"
ohos:left_margin="13vp"
ohos:text="Button 1"/>
<Button
ohos:height="match_content"
ohos:width="166vp"
ohos:background_element="#FF00FFFD"
ohos:left_margin="13vp"
ohos:text="Button 2"/>
<Button
ohos:height="match_content"
ohos:width="166vp"
ohos:background_element="#FF00FFFD"
ohos:left_margin="13vp"
ohos:text="Button 3"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="70vp"
ohos:width="match_parent"
ohos:background_element="#FF9F9F9F"
ohos:top_margin="10vp"
>
<Button
ohos:height="20vp"
ohos:width="50vp"
ohos:background_element="#FF00FFFD"
ohos:layout_alignment="left"
ohos:text="Button 1"/>
<Button
ohos:height="20vp"
ohos:width="50vp"
ohos:background_element="#FF00FFFD"
ohos:layout_alignment="horizontal_center"
ohos:text="Button 2"/>
<Button
ohos:height="20vp"
ohos:width="50vp"
ohos:background_element="#FF00FFFD"
ohos:layout_alignment="right"
ohos:text="Button 3"/>
</DirectionalLayout>
<DirectionalLayout
ohos:height="70vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:background_element="#FF9F9F9F"
ohos:top_margin="10vp"
>
<Button
ohos:height="20vp"
ohos:width="0vp"
ohos:background_element="#FF00FFFD"
ohos:text="Button 1"
ohos:weight="1"/>
<Button
ohos:height="20vp"
ohos:width="0vp"
ohos:background_element="#FFFF8A8A"
ohos:text="Button 2"
ohos:weight="1"/>
<Button
ohos:height="20vp"
ohos:width="0vp"
ohos:background_element="#FF00FFFD"
ohos:text="Button 3"
ohos:weight="1"/>
</DirectionalLayout>
</DirectionalLayout>