HarmonyOS development: relative layout RelativeContainer

Foreword

the code case is based on api13.

The latest DevEco Studio, when creating a new project, the official has already used the RelativeContainer component as the root layout by default, thus showing the importance of the RelativeContainer component. Compared with other container components, its appearance has solved an important problem in actual development, that is element alignment in complex scenes.

The following layout between components, if there is no RelativeContainer component, how should we implement it? Obviously, many container components need to be nested or coordinate positioned before implementation. With the RelativeContainer component, we can place it according to its relative position.

Related code implementation:

RelativeContainer() {
      Text("1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)

      Text("2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

      Text("3")
        .width(100)
        .height(100)
        .id("view_3")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .alignRules({
          top: { anchor: "view_1", align: VerticalAlign.Bottom },
          left: { anchor: "view_1", align: HorizontalAlign.End },
          right: { anchor: "view_2", align: HorizontalAlign.Start }
        })

      Text("4")
        .width(100)
        .height(100)
        .id("view_4")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Blue)
        .alignRules({
          top: { anchor: "view_3", align: VerticalAlign.Bottom }
        })

      Text("5")
        .width(100)
        .height(100)
        .id("view_5")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)
        .alignRules({
          top: { anchor: "view_3", align: VerticalAlign.Bottom },
          left: { anchor: "view_2", align: HorizontalAlign.Start }
        })
    }.width(300)

skilled use of RelativeContainer components, that is, must know the relative position of the placement, that is, relative to who, how to place.

Use rules

ID declaration

the B component is on the right side of the component. How does the B component know the location of the component? In the relative layout, each component is marked by setting a unique identification id for the component. Just as in the vast sea of people, your id card is your unique identification. Setting the id is very important. Without this id, the corresponding anchor component will be missing, and the relative placement of the position cannot be realized in the relative layout.

Text("1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)

Placement

we have determined the anchor component by id, but relative to this anchor component, we need to control its corresponding position whether it is on the left, right, top or bottom.

The position of the current component is controlled by the aligrules attribute, which has attributes such as upper left and lower right, horizontal center, vertical center, etc. Each attribute corresponds to two parameters, one is anchor parameter, anchor component, and the other is align, that is, position. The code format is as follows:

 .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

anchor is set to_container_, which means that it corresponds to the relative parent component. If it is a definite ID, it is the anchor component corresponding to the ID.

The horizontal direction is HorizontalAlign.Start, HorizontalAlign.Center, and HorizontalAlign.End. The horizontal direction is HorizontalAlign.Start, horizontaltalalign. Center, and HorizontalAlign.End. The vertical direction is VerticalAlign.Top, VerticalAlign.Center, and VerticalAlign.Bottom.

Centered Case

for example, in a very simple case, if a component is displayed in the center, it is set relative to the parent container. The code is as follows:

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          top: { anchor: "__container__", align: VerticalAlign.Top },
          bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
          left: { anchor: "__container__", align: HorizontalAlign.Start },
          right: { anchor: "__container__", align: HorizontalAlign.End }
        })

    }
  }
}

the effect is shown in the following figure:

of course, in addition to the four attributes of directly upper left and lower right, we can also directly set the horizontal center and vertical center attributes, and the effect is exactly the same.

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })
    }
  }
}

Anchor Component Top

at the top of a component, we need to set the bottom attribute, that is, the bottom is on the top of the anchor component, and then combine the anchor component to set other attributes, such as the anchor component is centered, where we add the attribute middle that is horizontally centered relative to the parent container.

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })

      Text("2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          bottom: { anchor: "view_1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
  }
}

The effect is as follows. It can be seen that the component 2 has been arranged on the upper side of the component 1.

Anchor Component Lower

The bottom and top of the component are actually similar, except that the bottom attribute is replaced by the top attribute, that is, the top is below the anchor component.

@Entry
@Component
struct Index {
  build() {
    RelativeContainer() {

      Text("1")
        .width(100)
        .height(100)
        .id("view_1")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Red)
        .alignRules({
          center: { anchor: "__container__", align: VerticalAlign.Center },
          middle: { anchor: "__container__", align: HorizontalAlign.Center },
        })

      Text("2")
        .width(100)
        .height(100)
        .id("view_2")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Orange)
        .alignRules({
          bottom: { anchor: "view_1", align: VerticalAlign.Top },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })

      Text("3")
        .width(100)
        .height(100)
        .id("view_3")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Yellow)
        .alignRules({
          top: { anchor: "view_1", align: VerticalAlign.Bottom },
          middle: { anchor: "__container__", align: HorizontalAlign.Center }
        })
    }
  }
}

The effect is as follows, it can be seen that component 3 is already below component 1.

Anchor Component Left

on the left, the right attribute is used here, that is, the anchor component is on the right. The relevant code is as follows:

Text("4")
        .width(100)
        .height(100)
        .id("view_4")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Pink)
        .alignRules({
          right: { anchor: "view_1", align: HorizontalAlign.Start },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })

if we look at the effect, component 4 is to the left of anchor component 1.

Anchor Component Right

on the right, the left attribute is used here, that is, the anchor component is on the left. The relevant code is as follows:

Text("5")
        .width(100)
        .height(100)
        .id("view_5")
        .textAlign(TextAlign.Center)
        .backgroundColor(Color.Brown)
        .alignRules({
          left: { anchor: "view_1", align: HorizontalAlign.End },
          center: { anchor: "__container__", align: VerticalAlign.Center }
        })

if we look at the effect, Component 5 is to the right of anchor component 1.

Align position

the alignment position, mainly relative to the position of the anchor component, we use the official explanation diagram, as follows:

in the horizontal direction, the alignment position can be set to HorizontalAlign.Start, HorizontalAlign.Center, HorizontalAlign.End.

In the vertical direction, the alignment position can be set to VerticalAlign.Top, VerticalAlign.Center, VerticalAlign.Bottom.

Related Summary

Of course, the RelativeContainer component has other attributes, but the most important thing is the placement of the position, which is actually relative to the placement of the anchor component. Through the above cases, it is not difficult to find that the so-called upper left and lower right are right. For example, above the anchor point, I use bottom, below the anchor point, I use top, which can greatly save our development time in actual development.