• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Relative Layout
2
3
4## Overview
5
6The relative layout, implemented using the [\<RelativeContainer>](../reference/arkui-ts/ts-container-relativecontainer.md) container component, is used to lay out child elements in relative positions. A child element can set the container or another child element as the anchor, based on which its relative position is determined. Below shows a relative layout. The dotted lines in the figure indicate the position dependency.
7
8
9  **Figure 1** Relative layout
10
11![relative-layout](figures/relative-layout.png)
12
13
14A child element does not necessarily adopt the dependency shown above to determine its relative position. For example, Item4 may use Item2 or the **\<RelativeContainer>** parent container as a dependency anchor.
15
16
17## Basic Concepts
18
19- Anchor: element relative to which an element's position is specified.
20
21- Alignment mode: how the current element is aligned with the anchor, which can be top-, center-, or bottom-aligned in the vertical direction or left-, center-, and right-aligned in the horizontal direction.
22
23
24## Setting the Dependency
25
26
27### Setting the Anchor
28
29By setting the anchor, you set a position dependency relationship between a child element and its parent element or sibling elements. In the horizontal direction, you can set the left, middle, and right anchors. In the vertical direction, you can set the top, center, and bottom anchors. To specify anchors, you must set IDs for the **\<RelativeContainer>** component and its child elements. The default ID is **container**. The ID is set through the **id** attribute. Child elements whose IDs are not set are not displayed in the **\<RelativeContainer>** component.
30
31>**NOTE**
32>
33>When using anchors, pay attention to the relative positions of child elements to avoid misplacement or blocking.
34
35- The ID of the **\<RelativeContainer>** parent component is **container**.
36
37  ```ts
38  RelativeContainer() {
39    Row()
40      // Add other attributes.
41      .alignRules({
42        top: { anchor: '__container__', align: VerticalAlign.Top },
43        left: { anchor: '__container__', align: HorizontalAlign.Start }
44      })
45      .id("row1")
46
47    Row()
48      ...
49      .alignRules({
50        top: { anchor: '__container__', align: VerticalAlign.Top },
51        right: { anchor: '__container__', align: HorizontalAlign.End }
52      })
53      .id("row2")
54  }
55  ...
56  ```
57
58  ![en-us_image_0000001562820901](figures/en-us_image_0000001562820901.png)
59
60- A child element is used as the anchor.
61
62  ```ts
63  RelativeContainer() {
64    ...
65    top: { anchor: 'row1', align: VerticalAlign.Bottom },
66    ...
67  }
68  .width(300).height(300)
69  .margin({ left: 20 })
70  .border({ width: 2, color: '#6699FF' })
71  ```
72
73  ![en-us_image_0000001562940613](figures/en-us_image_0000001562940613.png)
74
75
76### Setting Alignment Relative to the Anchor
77
78After an anchor is set, you can use **align** to set the alignment mode relative to the anchor.
79
80Alignment modes in the horizontal direction can be left, center, or right, achieved by the **HorizontalAlign.Start**, **HorizontalAlign.Center**, and **HorizontalAlign.End** attributes, respectively.
81
82![alignment-relative-anchor-horizontal](figures/alignment-relative-anchor-horizontal.png)
83
84Alignment modes in the vertical direction can be top, center, or bottom, achieved by the **HorizontalAlign.Top**, **HorizontalAlign.Center**, and **HorizontalAlign.Bottom** attributes, respectively.
85
86![alignment-relative-anchor-vertical](figures/alignment-relative-anchor-vertical.png)
87
88
89## Example
90
91Child elements in the relative layout are flexible. You can use **alignRules** to move child elements in the **\<RelativeContainer>** container.
92
93
94```ts
95@Entry
96@Component
97struct Index {
98  build() {
99    Row() {
100      RelativeContainer() {
101        Row()
102          .width(100)
103          .height(100)
104          .backgroundColor('#FF3333')
105          .alignRules({
106            top: { anchor: '__container__', align: VerticalAlign.Top },  // Use the parent container as the anchor and align with its top vertically.
107            middle: { anchor: '__container__', align: HorizontalAlign.Center }  // Use the parent container as the anchor and align with its center horizontally.
108          })
109          .id('row1') // Set the anchor to row1.
110
111        Row() {
112          Image($r('app.media.icon'))
113        }
114        .height(100).width(100)
115        .alignRules({
116          top: { anchor: 'row1', align: VerticalAlign.Bottom },  // Use row1 as the anchor and align with its bottom vertically.
117          left: { anchor: 'row1', align: HorizontalAlign.Start }  // Use row1 as the anchor and align with its left horizontally.
118        })
119        .id('row2') // Set the anchor to row2.
120
121        Row()
122          .width(100)
123          .height(100)
124          .backgroundColor('#FFCC00')
125          .alignRules({
126            top: { anchor: 'row2', align: VerticalAlign.Top }
127          })
128          .id('row3') // Set the anchor to row3.
129
130        Row()
131          .width(100)
132          .height(100)
133          .backgroundColor('#FF9966')
134          .alignRules({
135            top: { anchor: 'row2', align: VerticalAlign.Top },
136            left: { anchor: 'row2', align: HorizontalAlign.End },
137          })
138          .id('row4') // Set the anchor to row4.
139
140        Row()
141          .width(100)
142          .height(100)
143          .backgroundColor('#FF66FF')
144          .alignRules({
145            top: { anchor: 'row2', align: VerticalAlign.Bottom },
146            middle: { anchor: 'row2', align: HorizontalAlign.Center }
147          })
148          .id('row5') // Set the anchor to row5.
149      }
150      .width(300).height(300)
151      .border({ width: 2, color: '#6699FF' })
152    }
153    .height('100%').margin({ left: 30 })
154  }
155}
156```
157
158![en-us_image_0000001562700529](figures/en-us_image_0000001562700529.png)
159