DEV Community

kouwei qing
kouwei qing

Posted on

Animated GIF Looping, Tab Switch Monitoring, Rich Text Scroll, Tab Default Centering, A Tag Calling Dialer

#harmonyosnext

[Daily HarmonyOS Next Knowledge] Animated GIF Looping, Tab Switch Monitoring, Rich Text Scroll, Tab Default Centering, A Tag Calling Dialer

1. Image loads a network animated GIF that stops playing after one loop. How to set loop play?

Currently, ArkUI does not support setting the loop count for GIF images. You can use the third-party library ohos-gif-drawable to set the loop count. Update the loop count in the callback method getLoopFinish() after one play ends, and set the play rate setSpeedFactor() to 0 to stop playing when the specified count is reached.

Reference Document: https://gitee.com/openharmony-sig/ohos_gif-drawable

ohos-gif-drawable is drawn based on Canvas, with main capabilities including:

  • Support for playing GIF images.
  • Support for controlling GIF play/pause.
  • Support for resetting GIF play animation.
  • Support for adjusting GIF play rate.
  • Support for listening to callbacks after all GIF frames are displayed.
  • Support for setting display size.
  • Support for 7 different display types.
  • Support for setting the display area background color.

2. How to monitor when a TabContent page is switched to in HarmonyOS?

When switching TabContent pages, how to monitor that the current page is active? Does switching trigger the lifecycle methods of the page in TabContent?

Use the onTabBarClick event.

Reference Document: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5

Tab switching should trigger the component-level lifecycle aboutToAppear of the child component.

3. Can HarmonyOS RichText slide left and up?

Use the Web component for display.

Reference Link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5

// xxx.ets
import { webview } from '@kit.ArkWeb';
import { BusinessError } from '@kit.BasicServicesKit';

@Entry
@Component
struct WebComponent {
  controller: webview.WebviewController = new webview.WebviewController();

  build() {
    Column() {
      Button('loadData')
        .onClick(() => {
          try {
            this.controller.loadData(
              "<html><body> <p style=\"font-size: 100; color: #999999;\">我是一个richtext</p></body></html>",
              "text/html",
              "UTF-8", " ", " " // If there are special characters like #, the last two parameters should be changed to a space
            );
            this.controller.setScrollable(false); // Set whether to enable scrolling
          } catch (error) {
            console.error(`ErrorCode: ${(error as BusinessError).code},  Message: ${(error as BusinessError).message}`);
          }
        })
      Web({ src: '', controller: this.controller })
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

4. How to implement horizontal tab quick scrolling in HarmonyOS, with tabs automatically centered and selected after stopping?

In the List component, use the .scrollSnapAlign(ScrollSnapAlign.CENTER) property of the onScrollIndex method to achieve centering. To position the tab to the middle of the visible area after scrolling stops, use the onScrollStop event to listen for the stop and adjust the position. To keep it centered in the visible area, directly position it to the middle.

Reference Link: https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-list-V5#ZH-CN_TOPIC_0000001930756925__onscrollindex

5. Using the <a> element in an H5 page to invoke the system dialer does not work in HarmonyOS Next.

Possible reasons include:

  • Page loading issues: If the system.onmessage function in the H5 page has complex logic and relies on external JS library references, incomplete page loading may prevent the system dialer from being called. In this case, trigger the system dialer in the onpagefinish event handler.
  • System permission issues: Ensure the device has enabled the system dialer and the app has the corresponding permissions. Check the app permission configuration in device settings.
  • Network issues: Ensure the device is connected to a network with normal connectivity.
  • Page loading order issues: If the page has resources to load (e.g., images, scripts), the system dialer may not be called until these resources finish loading. Place the system dialer code after resource loading is complete.
  • Page lifecycle issues:
    • Ensure page lifecycle events (e.g., onload, onready) are handled correctly to trigger the system dialer after page loading.
    • Check the page loading order to execute the system dialer code after resources are loaded.
    • Set page lifecycle events to trigger the system dialer using onload or onready after page loading.
    • Verify system permissions in device settings to ensure the app can call the system dialer.
    • Ensure the device is connected to a network with normal connectivity.

Top comments (0)