An overview of the
The Dependent can be translated as “Dependent”. A DependentLayout represents a relative relationship, either to the parent layout or to other components. Each component can specify its position relative to other sibling elements in a DependentLayout, or relative to its parent component.
Use of DependentLayout
1. Introduction to common XML attributes
1.1 commonly used XML attribute DependentLayout
The attribute in DependentLayout is alignment, which determines the alignment of components in the layout. The values are as follows:
| The attribute name | Product description | The values |
|---|---|---|
| alignment | alignment | Left, top, right, bottom, horizontal_center, vertical, center |
1.2 include component-supported XML attributes (*)
| The attribute name | Product description | The values |
|---|---|---|
| left_of | Align the right edge with the left edge of another child component | Ids of other components |
| right_of | Align the left edge with the right edge of another child component | Ids of other components |
| start_of | Aligns the end edge with the start edge of another child component | Ids of other components |
| end_of | Aligns the start edge with the end edge of another child component | Ids of other components |
| above | Align the bottom edge with the top edge of another child component | Ids of other components |
| below | Aligns the upper edge with the lower edge of another child component | Ids of other components |
| align_baseline | Aligns the baseline of a child component with that of another child component | Ids of other components |
| align_left | Align the left edge with the left edge of another child component | Ids of other components |
| align_top | Aligns the top edge with the top edge of another child component | Ids of other components |
| align_right | Align the right edge with the right edge of another child component | Ids of other components |
| align_bottom | Align the bottom edge with the bottom edge of another child component | Ids of other components |
| align_start | Aligns the start edge with the start edge of another child component | Ids of other components |
| align_end | Aligns the end edge with the end edge of another child component | Ids of other components |
| align_parent_left | Align the left edge with the left edge of the parent component | Boolean type |
| align_parent_top | Align the top edge with the top edge of the parent component | Boolean type |
| align_parent_right | Align the right edge with the right edge of the parent component | Boolean type |
| align_parent_bottom | Align the bottom edge with the bottom edge of the parent component | Boolean type |
| align_parent_start | Aligns the start edge with the start edge of the parent component | Boolean type |
| align_parent_end | Align the end edge with the end edge of the parent component | Boolean type |
| center_in_parent | Keeps the child in the center of the parent | Boolean type |
| horizontal_center | Keep the child centered horizontally on the parent | Boolean type |
| vertical_center | Keep child components centered vertically on parent components | Boolean type |
These are the common attributes that we have to master. I’m going to focus on the algin_baseline attribute, which translates as baseline. The definition of the baseline is: there are four lines in the writing of English words. The third line from top to bottom is the baseline. The baseline alignment is primarily for the baseline alignment of English words displayed in the two controls. In the following examples, I use Chinese fonts for the demonstration, but you can try it manually in English. The expected effects are as follows:
As you can see, the last two texts are aligned based on the baseline of the first text. Implementation code:
<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent"> <Text oHOs :id="$+id:text1" oHOs :height="50vp" oHOs :width=" 100VP "oHOs: Text =" text1" oHOs :text_alignment="center" ohos:vertical_center="true" ohos:background_element="$graphic:shape_bottom_bg" ohos:text_size="40fp" /> <Text Ohos :id="$+ ID :text2" oHOs :height=" 50VP "oHOs :width=" 100VP" oHOs :text_alignment="center" oHOs :text=" text2" ohos:text_size="30fp" ohos:right_of="$id:text1" ohos:align_baseline="$id:text1" ohos:background_element="$graphic:shape_bottom_bg"/> <Text ohos:id="$+id:text3" ohos:height="50vp" ohos:width="100vp" Ohos :text_alignment=" Center "oHOs :text=" Text 3" oHOs :text_size=" 20FP" oHOs :right_of="$ID :text2" ohos:align_baseline="$id:text2" ohos:background_element="$graphic:shape_bottom_bg"/> </DependentLayout>Copy the code2. Arrangement
DependentLayout is arranged relative to the location of other sibling components or parent components.
2.1. Relative to peer components
The attributes of the corresponding component are xxX_of and algin_XXX. Here are above_of, below_of, and algin_start as examples. The effects are as follows:
<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent"> <Text ohos:id="$+id:text1" ohos:height="50vp" ohos:width="100vp" ohos:above="$id:text2" ohos:align_start="$id:text2" Ohos :bottom_margin="10vp" ohos:text=" text 1" ohos:text_alignment="center" ohos:text_size="30fp" ohos:vertical_center="true" /> <Text ohos:id="$+id:text2" ohos:height="50vp" ohos:width="100vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:center_in_parent="true" Ohos :text=" text_alignment="center" oHOs :text_size="30fp"/> < text oHOs :id="$+ ID :text3" oHOs :height=" 50VP" ohos:width="100vp" ohos:align_start="$id:text2" ohos:background_element="$graphic:shape_bottom_bg" Ohos :below="$id:text2" oHOs :text=" text3 "oHOs :text_alignment="center" oHOs :text_size="30fp" oHOs :top_margin="10vp"/> </DependentLayout>Copy the code2.2 relative to the parent component
The properties relative to the parent component are xxx_parent_XXX. Take align_parent_start, ALIGN_parent_TOP, horizontal_center, align_parent_end as examples. The results are as follows:
Code implementation:
<? The XML version = "1.0" encoding = "utf-8"? > <DependentLayout xmlns:ohos="http://schemas.huawei.com/res/ohos" ohos:height="match_parent" ohos:width="match_parent"> <Text ohos:id="$+id:text1" ohos:height="50vp" ohos:width="100vp" ohos:align_parent_start="true" Ohos :align_parent_top="true" oHOs :background_element="$graphic:shape_bottom_bg" oHOs :text=" text 1" ohos:text_alignment="center" ohos:text_size="30fp" ohos:vertical_center="true" /> <Text ohos:id="$+id:text2" ohos:height="50vp" ohos:width="100vp" ohos:background_element="$graphic:shape_bottom_bg" ohos:horizontal_center="true" Ohos :text=" text_alignment="center" oHOs :text_size="30fp"/> < text oHOs :id="$+ ID :text3" oHOs :height=" 50VP" ohos:width="100vp" ohos:align_parent_end="true" ohos:align_parent_top="true" Ohos :background_element="$graphic:shape_bottom_bg" oHOs :text=" text 3" oHOs :text_alignment="center" oHOs :text_size="30fp"/> </DependentLayout>Copy the code3. Code practice
Example: Create a DependentLayout with code and add two text and a button. Click the button and swap the location of the two text. The effect is as follows:
Code implementation:
private void testDependentLayout(){ DependentLayout dLayout = new DependentLayout(this); LayoutConfig layoutConfig = new LayoutConfig(LayoutConfig.MATCH_PARENT, LayoutConfig.MATCH_PARENT); dLayout.setLayoutConfig(layoutConfig); Text1 = new Text(getContext())); // Create two texts and add them to the DependentLayout. text1.setId(1); Text1. SetText (" text 1 "); text1.setTextSize(AttrHelper.fp2px(25,getContext())); text1.setTextColor(Color.BLUE); LayoutConfig configText1 = new LayoutConfig(LayoutConfig.MATCH_CONTENT,LayoutConfig.MATCH_CONTENT); configText1.addRule(LayoutConfig.HORIZONTAL_CENTER); text1.setLayoutConfig(configText1); dLayout.addComponent(text1); Text text2 = new Text(getContext()); text2.setId(2); Text2. SetText (" text 2 "); text2.setTextSize(AttrHelper.fp2px(25,getContext())); text2.setTextColor(Color.YELLOW); LayoutConfig configText2 = new LayoutConfig(LayoutConfig.MATCH_CONTENT,LayoutConfig.MATCH_CONTENT); configText2.addRule(LayoutConfig.BELOW,1); configText2.addRule(LayoutConfig.ALIGN_START,1); text2.setLayoutConfig(configText2); dLayout.addComponent(text2); Button button = new Button(this); Button.settext (" Click to convert position "); button.setTextSize(AttrHelper.fp2px(25,this)); button.setBackground(new ShapeElement(this,ResourceTable.Graphic_shape_bottom_bg)); LayoutConfig configText3 = new LayoutConfig(LayoutConfig.MATCH_CONTENT,LayoutConfig.MATCH_CONTENT); configText3.addRule(LayoutConfig.BELOW,2); configText3.addRule(LayoutConfig.HORIZONTAL_CENTER); button.setLayoutConfig(configText3); button.setClickedListener(view->{ LayoutConfig config1 = (LayoutConfig) text1.getLayoutConfig(); config1.addRule(LayoutConfig.BELOW,2); text1.setLayoutConfig(config1); LayoutConfig config2 = (LayoutConfig)text2.getLayoutConfig(); config2.removeRule(LayoutConfig.BELOW); config2.addRule(LayoutConfig.ALIGN_PARENT_TOP); text2.setLayoutConfig(config2); LayoutConfig config3 = (LayoutConfig)button.getLayoutConfig(); configText3.addRule(LayoutConfig.BELOW,1); button.setLayoutConfig(config3); }); dLayout.addComponent(button); setUIContent(dLayout); }Copy the codeThe code above is focused on the use of LayoutConfig, when use, be sure to import the correct LayoutConfig, such as the example above, we need to import DependentLayout. LayoutConfig, if import into other layout, For example DirectionalLayout LayoutConfig, then the compiler will fail. We use LayoutConfig to add addRule() and remove removeRule() for tasks. And we can use getLayoutConfig() to get the LayoutConfig for the current component Settings.
summary
DependentLayout > DependentLayout > DependentLayout > DependentLayout Mainly includes the introduction of alginment attribute and DependentLayout component commonly used attribute, there are three categories: XXX_OF, ALGIN_XXX, xxX_parent_XXX. I suggest you just memorize these three words and let the editor help you with the rest. DependentLayout arrangement is a DependentLayout arrangement for components of the same level and for parent components. Finally, we use the actual case to replace the position of the two text, which mainly uses the dependentLayout. Config to add and remove the rule for the component to achieve the case effect.
Thinking summary
1. What XML attributes (including inclusion components) are commonly used in DependentLayout? 2. What arrangement methods of DependentLayout are there? How to add and remove rules for components in DependentLayout?