Gesture Handling: Tap and Long Press in ArkUI

Read the original article：Gesture Handling: Tap and Long Press in ArkUI

Context

In ArkUI, handling user input gestures like Tap and Long Press is essential for building interactive applications. Developers need a clear and efficient way to detect and respond to these gestures without conflict or delay. This document explores how to implement Tap and Long Press interactions using ArkUI's gesture system.

Description

ArkUI in HarmonyOS provides built-in support for handling touch gestures. Two basic gesture types are TapGesture and LongPressGesture.

TapGesture detects quick touches like single, double, or triple taps. It is often used for actions such as button presses or item selection.

LongPressGesture detects when the user touches and holds a component. This is useful for showing context menus or triggering additional options.

These gestures are commonly used to manage user interaction in ArkUI applications.

Approach

TapGesture:

TapGesture is an essential tool in building interactive user interfaces. It enables developers to respond to simple touch inputs with minimal configuration. Whether you're building buttons, lists, or custom components, TapGesture helps you capture user interaction smoothly and effectively.

In this example, the TapGesture is used to detect a double-tap gesture on the Text component that displays "Double Click".

@State value: string = '';
Column() {
  Text('Double Click')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#8f648d')
    .gesture(
      TapGesture({ count: 2 })
        .onAction((event: GestureEvent) => {
          if (event) {
            this.value = JSON.stringify(event.fingerList[0])
          }
        })
    )
  Text(this.value)
    .fontColor('#8f648d')
    .margin(5)
}

• TapGesture({ count: 2 }): Listens for a double-tap.
• .onAction(...): Defines what to do when the gesture is recognized.
• event.fingerList[0]: Captures information about the finger that triggered the gesture such as its position on the screen.
• this.value = JSON.stringify(...): Stores the finger data as a JSON string to be displayed below the "Double Click" text.

We can triple-click just by replacing the count number with 3.

Column() {
  Text('Triple Click')
    .fontSize(20)
    .fontWeight(FontWeight.Bold)
    .fontColor('#788a5a')
    .gesture(
      TapGesture({ count: 3 })
        .onAction((event: GestureEvent) => {
          if (event) {
            this.value = JSON.stringify(event.fingerList[0])
          }
        })
    )
  Text(this.value)
    .fontColor('#788a5a')
    .margin(5)
}

LongPressGesture:

LongPressGesture is a gesture type in HarmonyOS that detects when a user presses and holds on a UI component for a certain amount of time. Unlike a simple tap, this gesture requires the user's finger to remain in contact with the screen for a longer duration before it is triggered. It's commonly used to reveal additional options, show context menus, or initiate special actions that shouldn't be triggered by accidental taps. Developers can customize the behavior by setting properties like the minimum press duration or the number of fingers required.

This UI layout displays how long a user presses and holds on a Text element. It uses a LongPressGesture with repetition to count the seconds the user keeps their finger on the screen, and resets the count when the finger is lifted.

Column() {
  Text('How many seconds do you press and hold?')
    .fontSize(20)
    .fontColor('#578ab3')
    .fontWeight(FontWeight.Bold)
  Text(this.count.toString() + ' seconds')
    .fontSize(20)
    .fontColor('#578ab3')
    .gesture(
      LongPressGesture({ repeat: true })
        .onAction((event: GestureEvent) => {
          if (event && event.repeat) {
            this.count++
          }
        })
        .onActionEnd((event: GestureEvent) => {
          this.count = 0
        })
    )
}

• LongPressGesture({ repeat: true }): Enables repeated gesture events while the finger is held down.
• .onAction(): Triggered repeatedly while holding.
• If event.repeat is true, it increases this.count by 1 every time it's fired (likely every second or tick).
• .onActionEnd(): Triggered when the user lifts their finger.
• Resets this.count back to 0.

This component shows how many seconds the user is pressing and holding on the second Text. While the finger stays down:

• The number keeps increasing.
• Once released, the counter reset

It’s a useful pattern for teaching gesture durations, implementing long-press interactions, or creating timers based on touch duration.

Key Takeaways

• Touch gestures are essential for building responsive and user-friendly mobile applications. This article explained how TapGesture and LongPressGesture can be used in HarmonyOS to detect simple tap actions and longer press-and-hold interactions. These gestures are useful for implementing buttons, context menus, and other interactive components that contribute to a more intuitive user experience.
• By using ArkTS for gesture handling, developers gain precise control over touch input and can design applications that react naturally to user behavior. With a clear understanding of how to use TapGesture and LongPressGesture, you can now start applying them in your HarmonyOS projects to enhance interactivity and usability.

Written by Aycanur Ucar