Tab Alignment, Relative Layout, Full-Screen Custom Popups, Animation Collections, Returning to Home Screen

[Daily HarmonyOS Next Knowledge] Tab Alignment, Relative Layout, Full-Screen Custom Popups, Animation Collections, Returning to Home Screen

1. Can HarmonyOS Tabs Support Left-Aligned TabBar?

The current solution is to implement a custom tabbar. Example demo:

@Entry
@Component
struct TabsExample {
  @State tabArray: Array<number> = [0, 1, 2]
  @State focusIndex: number = 0
  @State pre: number = 0
  @State index: number = 0
  private controller: TabsController = new TabsController()
  @State test: boolean = false

  // Individual tab
  @Builder
  Tab(tabName: string, tabItem: number, tabIndex: number) {
    Row({ space: 20 }) {
      Text(tabName).fontSize(18)
        .fontColor(tabItem === this.focusIndex ? Color.Red : Color.Black)
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minWidth: 35 })
    .width(80)
    .height(60)
    .borderRadius({ topLeft: 10, topRight: 10 })
    .onClick(() => {
      this.controller.changeIndex(tabIndex)
      this.focusIndex = tabIndex
    })
  }

  build() {
    Column() {
      Column() {
        // Tab bar
        Row({ space: 7 }) {
          Scroll() {
            Row() {
              ForEach(this.tabArray, (item: number, index: number) => {
                this.Tab("Tab " + item, item, index)
              })
            }
            .justifyContent(FlexAlign.Start)
          }
          .align(Alignment.Start)
          .scrollable(ScrollDirection.Horizontal)
          .scrollBar(BarState.Off)
          .width('90%')
        }
        .alignItems(VerticalAlign.Bottom)
        .width('100%')
      }
      .alignItems(HorizontalAlign.Start)
      .width('100%')

      // Tabs content
      Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
        ForEach(this.tabArray, (item: number, index: number) => {
          TabContent() {
            Text('This is content for Tab ' + item)
              .height(300)
              .width('100%')
              .fontSize(30)
          }
          .backgroundColor(Color.Pink)
        })
      }
      .width('100%')
      .barHeight(0)
      .animationDuration(100)
      .onChange((index: number) => {
        console.log('Tab changed')
        this.focusIndex = index
      })
    }
    .height('100%')
  }
}

2. Why Is the bias Property of alignRules Invalid in HarmonyOS RelativeContainer?

Reference demo:

@Entry
@Component
struct Index {
  build() {
    Row() {
      RelativeContainer() {
        Row().width(100).height(100)
          .backgroundColor("#FF3333")
          .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 },
            bias: { vertical: 0.3 }
          })
          .id("row1")
      }
      .width(300).height(300)
      .margin({ left: 50 })
      .border({ width: 2, color: "#6699FF" })
    }
    .height('100%')
  }
}

3. Can't Custom Dialogs in HarmonyOS Be Full-Screen?

Reference demo:

@CustomDialog
export struct MyDialog1 {
  controller1: CustomDialogController
  title: string = ''

  build() {
    Row() {
      Column({ space: 10 }) {
        Text(this.title).fontSize(25)
          .fontColor(Color.Blue)
        Flex({ justifyContent: FlexAlign.SpaceAround }) {
          Button('Cancel')
            .onClick(() => {
              this.controller1.close()
            })
            .backgroundColor(0xffffff)
            .fontColor(Color.Black)
          Button('Confirm')
            .onClick(() => {
              this.controller1.close()
            })
            .backgroundColor(0xffffff)
            .fontColor(Color.Black)
        }
        .width('100%')
      }
      .width('100%')
      .backgroundColor(Color.Gray).height('100%')
    }
  }
}

// Main page
@Entry
@Component
struct Index {
  @State dialogData: string = ''
  @State colorTest: Color = Color.Blue
  dialogController1: CustomDialogController = new CustomDialogController({
    builder: MyDialog1({
      title: 'Popup 1',
    }),
    // Whether to customize the popup container style
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top
  })

  confirm(data: string) {
    this.dialogData = data
    console.info('ssss') // Get input from popup
  }

  build() {
    Row() {
      Column({ space: 10 }) {
        Text('This is a popup test')
          .fontSize(25).margin(20).fontColor(0x3399FF)
        Button('Click to open popup')
          .onClick(() => {
            this.dialogController1.open()
          })
      }.width('100%')
    }.height('100%').backgroundColor(Color.White)
  }
}

4. How to Implement Animation Collections in HarmonyOS?

After Component A scales and rotates for 1 second, it scales and rotates again. After another 4 seconds, it repeats the scaling and rotation, and after another 1 second, it scales and rotates again. These four actions form a collection that repeats indefinitely. How can this be achieved?

You can use keyframe animations with keyframeAnimateTo. Reference demo:

import { UIContext } from '@ohos.ArkUI.UIContext';

@Entry
@Component
struct Index {
  @State myScale: number = 1.0;
  uiContext: UIContext | undefined = undefined;

  aboutToAppear() {
    this.uiContext = this.getUIContext?.();
  }

  build() {
    Column() {
      Circle()
        .width(100)
        .height(100)
        .fill("#46B1E3")
        .margin(100)
        .scale({ x: this.myScale, y: this.myScale }) // Set x/y scaling
        .onClick(() => {
          if (!this.uiContext) {
            console.info("No uiContext, keyframe animation failed");
            return;
          }
          this.myScale = 1;

          // Set the keyframe animation to play 3 times
          this.uiContext.keyframeAnimateTo({ iterations: 3 }, [
            {
              // First keyframe: 800ms scaling from 1 to 1.5
              duration: 800,
              event: () => {
                this.myScale = 1.5;
              }
            },
            {
              // Second keyframe: 500ms scaling from 1.5 to 1
              duration: 500,
              event: () => {
                this.myScale = 1;
              }
            }
          ]);
        })
    }.width('100%').margin({ top: 5 })
  }
}

5. Inquire About HarmonyOS API for Returning to Home Screen

Some app features need to guide users back to the home screen to add service cards. Is there an API to trigger returning to the home screen?

The window has a minimize method. This interface notifies the AMS to send the window to the background, achieving the effect of sending the app to the background.
Reference link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-window-V5#minimize11

minimize(callback: AsyncCallback<void>): void

This interface implements different functions depending on the calling object:

• When called on the main window, it minimizes the app, which can be restored from the Dock.
• When called on a child window, it hides the window, which cannot be restored from the Dock but can be restored using showWindow(). Calling this interface on a floating window will result in error code 1300002.