An overview of the

Directional. As the name implies, a DirectionalLayout layout is used to arrange groups of components horizontally or vertically. In this article, we will learn about XML attributes commonly used for DirectionalLayout, and XML attributes commonly used for child components. Then we learn how to run DirectionalLayout to arrange, align, and set weights for child components, and finally we use code to create DirectionalLayout and add child controls to it. Ok, let’s start with the content of XML attributes.

The use of DirectionalLayout

1. Introduction to common XML attributes

1.1. DirectionalLayout Common XML attributes

The attribute name describe The values
alignment alignment Start indicates alignment by the start end, and end indicates alignment by the end end.
orientation Direction of arrangement of sub-layouts Horizontal indicates a horizontal layout, and vertical indicates a vertical layout.
total_weight Sum of weights of all subviews A float type that can set floating-point values directly or reference float floating-point resources.

Here, you need to pay attention to the value of alignment. I only listed start and end here. The other values are taken at face value. Alignment values are subject to a series of combination can also use “|”, for example ohos: alignment = “top | left” said upper left alignment. If we do not set the orientation property for DirectionalLayout, the default alignment is vertical for the vertical layout.

1.2. Include XML attributes that the component can support

The attribute name describe The values
layout_alignment alignment Left, top, etc., can use “|” for a number of combinations.
weight The proportion of A float type that can set floating-point values directly or reference float floating-point resources.

2. Use orientation to achieve horizontal and vertical alignment

Orientation orientation can be divided into horizontal or vertical direction. Use orientation to set how components are arranged within the layout, with the default being vertical.

2.1. Vertical arrangement

Example: Arrange three Text controls vertically.

The code implementation is as follows:

<? The 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:orientation="vertical"> <Text ohos:width="match_content" ohos:height="match_content" Ohos :text=" text 1" ohos:text_size="40fp"/> < text ohos:width="match_content" ohos:height="match_content" Ohos :text_size="40fp"/> < text ohos:width="match_content" Ohos :text=" text-2 "ohos:text_size="40fp"/> </DirectionalLayout>Copy the code

2.2. Horizontal arrangement

Example: Arrange three Text controls horizontally.

The code implementation is as follows:

<? The 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:orientation="horizontal"> <Text ohos:height="match_content" ohos:width="match_content" Ohos :text_size="25fp"/> < text ohos:height="match_content" ohos:width="match_content" Ohos :start_margin="10vp" ohos:text=" text-2 "ohos:text_size="25fp"/> < text ohos:height="match_content" Ohos :text=" text 3" ohos:text_size="25fp"/> </DirectionalLayout>Copy the code

Note (*) : DirectionalLayout does not wrap automatically. Its children are arranged in the specified direction. If the size of the layout exceeds the size of the layout itself, the portion of the layout that exceeds the size will not be displayed.

3. Alignment

DirectionalLayout components use layout_alignment to control their alignment in the layout. If the alignment is in the same direction as the alignment, the alignment does not take effect. If the alignment is in the horizontal direction, the left and right alignment does not take effect.

Example: Left, horizontally centered, and right aligned in a vertically aligned layout.

The code implementation is as follows:

<? The 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:orientation="vertical"> <Text ohos:width="match_content" ohos:height="match_content" Ohos :layout_alignment="start" oHOs :text=" text 1" oHOs :text_size=" 40FP "/> < text oHOs :width="match_content" Ohos :height="match_content" oHOs :layout_alignment="horizontal_center" oHOs :text=" text 2" oHOs :text_size=" 40FP "/> < text Ohos :width="match_content" oHOs :height="match_content" OHOs :layout_alignment="end" OHOs :text=" text 3" ohos:text_size="40fp"/> </DirectionalLayout>Copy the code

4. Weight introduction

A weight, as its name suggests, is a proportional allocation of the size of a component to its parent. For example, in horizontal layout, the calculation formula is:

  • Parent layout allocatable width = parent layout width – sum of all child component widths;
  • Component width = component weight/ sum of all component weights * parent layout allocated width;

In practice, it is recommended to use width=0 to allocate the width of the parent layout proportionally. The effect of 1:1:1 is as follows:

The implementation code is as follows:

<? The 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:orientation="horizontal"> <Text ohos:height="match_content" ohos:width="0vp" Ohos :background_element="$graphic:shape_bottom_bg" oHOs :text=" text 1" oHOs :text_alignment="center" oHOs :text_size="25fp" ohos:weight="1"/> <Text ohos:height="match_content" ohos:width="0vp" ohos:background_element="$graphic:shape_bottom_bg" Ohos :start_margin="5vp" oHOs :text=" text 2" oHOs :text_alignment="center" oHOs :text_size="25fp" oHOs :weight="1" /> < text ohos:height="match_content" ohos:width="0vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:start_margin="5vp" Ohos :text=" text_alignment="center" oHOs :text_size="25fp" oHOs :weight="1"/> </DirectionalLayout>Copy the code

5. Add DirectionalLayout using code

Example: Using code to arrange three Text controls horizontally, the effect is as follows:Code implementation:

DirectionalLayout dLayout = new DirectionalLayout(getContext()); dLayout.setOrientation(DirectionalLayout.HORIZONTAL); // Set horizontal layout for (int I =0; i<3; i++){ Text text = new Text(getContext()); Text. SetText (" text "+(I +1)); text.setTextSize(AttrHelper.fp2px(25,getContext())); dLayout.addComponent(text); } setUIContent(dLayout);Copy the code

6, summary

Earlier, we learned about the common XML attributes for DirectionalLayout layouts, such as the alignment, orientation, and weight_total attributes. The alignment attribute affects the alignment of components in a layout. The orientation attribute determines the alignment of components in a layout, including vertical and horizontal alignment. The default is vertical alignment. Common XML attributes that DirectionalLayout layouts contain for components are layout_alginment and weight. The layout_alginment attribute determines how components are aligned in the layout, and the weight attribute represents the weight used to scale how much a component occupies a parent component. Finally, you learned how to use code to create a DirectionalLayout layout and add child controls to it.

Tips:

When using DirectionalLayout layouts, we need to take note of the following:

  • DirectionalLayout does not wrap. Its children are arranged in the specified direction. If the size of the layout exceeds the size of the layout itself, the portion of the layout that exceeds the size will not be displayed.
  • DirectionalLayout components use layout_alignment to control their alignment in the layout. If the alignment is in the same direction as the alignment, the alignment does not take effect. If the alignment is in the horizontal direction, the left and right alignment does not take effect.
  • In practice, it is recommended to use width=0 to scale the width of the parent layout.

Thinking summary

  • DirectionalLayout what are the common XML attributes and the common XML attributes that contain components?
  • DirectionalLayout has several permutations, which are respectively, how to implement?
  • How is alignment implemented in a Direct Layout layout? What are the alignment methods?
  • DirectionalLayout weight meaning, how to achieve?
  • How do I create a DirectionalLayout in code and add child controls to it?
  • What do we need to be aware of while using DirectionalLayout?