Android Compose 框架手势与交互之点击与长按深入剖析(二十九)Android Compose 框架手势与交

Android Compose 框架手势与交互之点击与长按深入剖析

一、引言

在现代移动应用开发中，用户交互是至关重要的一环。良好的交互设计能够提升用户体验，使应用更加易用和吸引人。Android Compose 作为 Android 平台上新一代的声明式 UI 框架，为开发者提供了简洁而强大的方式来处理用户手势和交互。其中，点击和长按手势是最常见的交互方式之一，Android Compose 通过 Modifier.clickable 和 Modifier.longClickable 这两个修饰符来实现对点击和长按手势的处理。

本文将从源码级别深入分析 Modifier.clickable 和 Modifier.longClickable 的实现原理，详细介绍它们的使用方法、参数含义以及相关的注意事项。通过对源码的剖析，开发者可以更好地理解这两个修饰符的工作机制，从而在实际开发中灵活运用，为应用添加丰富而流畅的交互体验。

二、Android Compose 手势与交互基础

2.1 声明式 UI 与手势处理

Android Compose 采用声明式 UI 编程范式，与传统的命令式 UI 编程不同，声明式 UI 更注重描述 UI 的最终状态，而不是如何一步步地构建和更新 UI。在 Android Compose 中，手势处理也是基于这种声明式的思想，通过修饰符来定义 UI 元素对各种手势的响应。

2.2 修饰符（Modifier）的作用

修饰符是 Android Compose 中用于修改 UI 元素行为和外观的重要工具。一个 UI 元素可以应用多个修饰符，这些修饰符会按照应用的顺序依次对元素进行修改。Modifier.clickable 和 Modifier.longClickable 就是用于处理点击和长按手势的修饰符，它们可以应用到任何可交互的 UI 元素上，如按钮、文本、图像等。

三、`Modifier.clickable` 源码分析

3.1 `Modifier.clickable` 的基本用法

在介绍源码之前，先来看一下 Modifier.clickable 的基本用法。以下是一个简单的示例代码：

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ClickableExample() {
    // 创建一个文本元素，并应用 clickable 修饰符
    Text(
        text = "Click me",
        modifier = Modifier.clickable {
            // 当文本被点击时，执行此块代码
            println("Text clicked!")
        }
    )
}

在这个示例中，我们创建了一个文本元素，并应用了 Modifier.clickable 修饰符。当用户点击这个文本时，会触发传入的 lambda 表达式，在控制台输出 "Text clicked!"。

3.2 `Modifier.clickable` 源码结构

Modifier.clickable 是一个扩展函数，它定义在 androidx.compose.foundation 包中。以下是 Modifier.clickable 的简化源码：

kotlin

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.pointer.pointerInput
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

fun Modifier.clickable(
    // 交互源，用于跟踪交互状态
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 是否启用点击功能
    enabled: Boolean = true,
    // 指示元素是否可以成为焦点
    role: Role? = null,
    // 点击时执行的回调函数
    onClickLabel: String? = null,
    // 点击时执行的回调函数
    onClick: () -> Unit
): Modifier = composed {
    // 创建一个指针输入修饰符，用于处理指针事件
    this.then(
        pointerInput(interactionSource, enabled, role, onClick) {
            // 等待指针按下事件
            awaitPointerEventScope {
                while (true) {
                    val down = awaitFirstDown(requireUnconsumed = false)
                    if (enabled) {
                        // 创建一个 PressInteraction.Press 对象，表示按下交互
                        val press = PressInteraction.Press(down.position)
                        // 发射按下交互事件
                        interactionSource.emit(press)
                        try {
                            // 等待指针抬起事件
                            val up = waitForUpOrCancellation(press)
                            if (up != null) {
                                // 发射释放交互事件
                                interactionSource.emit(PressInteraction.Release(press))
                                // 执行点击回调函数
                                onClick()
                            } else {
                                // 发射取消交互事件
                                interactionSource.emit(PressInteraction.Cancel(press))
                            }
                        } catch (e: Throwable) {
                            // 发射取消交互事件
                            interactionSource.emit(PressInteraction.Cancel(press))
                            throw e
                        }
                    }
                }
            }
        }
    )
}

3.3 参数解析

interactionSource：一个 MutableInteractionSource 对象，用于跟踪交互状态。默认情况下，使用 remember 函数创建一个新的 MutableInteractionSource 实例。通过这个参数，我们可以监听交互状态的变化，例如按下、释放等。
enabled：一个布尔值，指示点击功能是否启用。默认值为 true，表示点击功能可用。如果设置为 false，则元素将不会响应点击事件。
role：一个 Role 枚举类型的参数，用于指示元素的角色，例如按钮、复选框等。默认值为 null。这个参数主要用于辅助功能，帮助屏幕阅读器等辅助设备更好地理解元素的用途。
onClickLabel：一个字符串，用于描述点击操作的标签。默认值为 null。这个参数同样用于辅助功能，为屏幕阅读器提供额外的信息。
onClick：一个无参数的 lambda 表达式，当元素被点击时执行。这是最核心的参数，开发者可以在这个 lambda 表达式中编写点击事件的处理逻辑。

3.4 源码详细分析

composed 函数：Modifier.clickable 使用 composed 函数来创建一个可组合的修饰符。composed 函数允许我们在修饰符中使用可组合的逻辑，例如使用 LaunchedEffect 或 remember 等。
pointerInput 修饰符：在 composed 函数内部，使用 pointerInput 修饰符来处理指针事件。pointerInput 是一个强大的修饰符，它允许我们监听各种指针事件，如按下、移动、抬起等。
awaitPointerEventScope：在 pointerInput 修饰符的 lambda 表达式中，使用 awaitPointerEventScope 函数来创建一个指针事件作用域。在这个作用域内，我们可以使用 awaitFirstDown 和 waitForUpOrCancellation 等函数来等待指针事件的发生。
交互事件发射：当指针按下时，创建一个 PressInteraction.Press 对象，并通过 interactionSource.emit 函数发射按下交互事件。当指针抬起时，发射释放交互事件；当发生异常或取消操作时，发射取消交互事件。
点击回调执行：如果指针抬起事件发生，并且点击功能启用，则执行传入的 onClick 回调函数。

四、`Modifier.longClickable` 源码分析

4.1 `Modifier.longClickable` 的基本用法

与 Modifier.clickable 类似，Modifier.longClickable 用于处理长按手势。以下是一个简单的示例代码：

kotlin

import androidx.compose.foundation.longClickable
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun LongClickableExample() {
    // 创建一个文本元素，并应用 longClickable 修饰符
    Text(
        text = "Long click me",
        modifier = Modifier.longClickable {
            // 当文本被长按时，执行此块代码
            println("Text long clicked!")
        }
    )
}

在这个示例中，当用户长按这个文本时，会触发传入的 lambda 表达式，在控制台输出 "Text long clicked!"。

4.2 `Modifier.longClickable` 源码结构

Modifier.longClickable 也是一个扩展函数，定义在 androidx.compose.foundation 包中。以下是 Modifier.longClickable 的简化源码：

kotlin

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.composed
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.input.pointer.pointerInput
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

fun Modifier.longClickable(
    // 交互源，用于跟踪交互状态
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    // 是否启用长按功能
    enabled: Boolean = true,
    // 指示元素是否可以成为焦点
    role: Role? = null,
    // 长按时间阈值，单位为毫秒
    delayMillis: Long = LongClickDelay,
    // 长按时执行的回调函数
    onLongClickLabel: String? = null,
    // 长按时执行的回调函数
    onLongClick: () -> Unit
): Modifier = composed {
    // 创建一个指针输入修饰符，用于处理指针事件
    this.then(
        pointerInput(interactionSource, enabled, role, delayMillis, onLongClick) {
            // 等待指针按下事件
            awaitPointerEventScope {
                while (true) {
                    val down = awaitFirstDown(requireUnconsumed = false)
                    if (enabled) {
                        // 创建一个 PressInteraction.Press 对象，表示按下交互
                        val press = PressInteraction.Press(down.position)
                        // 发射按下交互事件
                        interactionSource.emit(press)
                        var longClickTriggered = false
                        val longClickJob = launch {
                            // 延迟指定的时间
                            delay(delayMillis)
                            if (isPressInProgress(press)) {
                                // 长按时长达到阈值，触发长按事件
                                longClickTriggered = true
                                // 发射释放交互事件
                                interactionSource.emit(PressInteraction.Release(press))
                                // 执行长按回调函数
                                onLongClick()
                            }
                        }
                        try {
                            // 等待指针抬起事件
                            val up = waitForUpOrCancellation(press)
                            if (up != null) {
                                if (!longClickTriggered) {
                                    // 如果长按事件未触发，发射释放交互事件
                                    interactionSource.emit(PressInteraction.Release(press))
                                }
                            } else {
                                // 发射取消交互事件
                                interactionSource.emit(PressInteraction.Cancel(press))
                            }
                        } finally {
                            // 取消长按任务
                            longClickJob.cancel()
                        }
                    }
                }
            }
        }
    )
}

private const val LongClickDelay = 500L // 默认长按时间阈值为 500 毫秒

4.3 参数解析

interactionSource：与 Modifier.clickable 中的 interactionSource 作用相同，用于跟踪交互状态。
enabled：一个布尔值，指示长按功能是否启用。默认值为 true，表示长按功能可用。
role：一个 Role 枚举类型的参数，用于指示元素的角色，与 Modifier.clickable 中的 role 作用相同。
delayMillis：一个长整型参数，表示长按时间的阈值，单位为毫秒。默认值为 LongClickDelay，即 500 毫秒。只有当用户按下的时间超过这个阈值时，才会触发长按事件。
onLongClickLabel：一个字符串，用于描述长按操作的标签，用于辅助功能。
onLongClick：一个无参数的 lambda 表达式，当元素被长按时执行。这是处理长按事件的核心回调函数。

4.4 源码详细分析

composed 函数和 pointerInput 修饰符：与 Modifier.clickable 类似，Modifier.longClickable 也使用 composed 函数创建可组合的修饰符，并使用 pointerInput 修饰符处理指针事件。
长按任务启动：当指针按下时，创建一个协程任务 longClickJob，并在这个任务中使用 delay 函数延迟指定的时间（delayMillis）。如果在延迟时间内指针仍然处于按下状态，则触发长按事件。
长按事件触发：当长按时间达到阈值时，将 longClickTriggered 标志设置为 true，发射释放交互事件，并执行 onLongClick 回调函数。
指针抬起处理：当指针抬起时，检查 longClickTriggered 标志。如果长按事件已经触发，则不做处理；如果长按事件未触发，则发射释放交互事件。
任务取消：无论指针抬起还是发生异常，最后都要取消长按任务 longClickJob，以避免不必要的延迟。

五、点击与长按的交互处理

5.1 同时支持点击和长按

在实际开发中，有时需要一个元素同时支持点击和长按手势。可以通过组合 Modifier.clickable 和 Modifier.longClickable 来实现这一点。以下是一个示例代码：

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.foundation.longClickable
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier

@Composable
fun ClickAndLongClickExample() {
    // 创建一个文本元素，并同时应用 clickable 和 longClickable 修饰符
    Text(
        text = "Click or long click me",
        modifier = Modifier
           .clickable {
                // 点击时执行的代码
                println("Text clicked!")
            }
           .longClickable {
                // 长按时执行的代码
                println("Text long clicked!")
            }
    )
}

在这个示例中，文本元素同时支持点击和长按手势。当用户点击文本时，会输出 "Text clicked!"；当用户长按文本时，会输出 "Text long clicked!"。

5.2 处理点击和长按的冲突

在同时支持点击和长按的情况下，需要注意处理点击和长按的冲突。因为长按操作通常包含了点击操作的开始阶段（按下），所以需要确保长按事件不会误触发点击事件。在 Modifier.longClickable 的源码中，通过设置 longClickTriggered 标志来避免这种冲突。当长按事件触发后，不会再触发点击事件。

六、点击与长按的状态跟踪

6.1 使用 `MutableInteractionSource` 跟踪状态

MutableInteractionSource 是一个用于跟踪交互状态的类，它可以监听交互事件的发生，如按下、释放、取消等。在 Modifier.clickable 和 Modifier.longClickable 中，都可以通过 interactionSource 参数传入一个 MutableInteractionSource 实例，从而跟踪元素的交互状态。以下是一个示例代码：

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.collectIsPressedAsState
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color

@Composable
fun InteractionStateExample() {
    // 创建一个 MutableInteractionSource 实例
    val interactionSource = remember { MutableInteractionSource() }
    // 收集按下状态作为一个可观察的状态
    val isPressed by interactionSource.collectIsPressedAsState()

    // 创建一个文本元素，并应用 clickable 修饰符
    Text(
        text = "Click me",
        modifier = Modifier
           .clickable(
                interactionSource = interactionSource,
                onClick = {
                    println("Text clicked!")
                }
            )
           .background(if (isPressed) Color.Gray else Color.Transparent),
        color = if (isPressed) Color.White else Color.Black
    )
}

在这个示例中，我们创建了一个 MutableInteractionSource 实例，并将其传入 Modifier.clickable 修饰符中。通过 collectIsPressedAsState 函数，我们可以收集元素的按下状态，并根据状态改变文本的背景颜色和文字颜色，从而实现按下效果的视觉反馈。

6.2 自定义交互状态处理

除了使用 collectIsPressedAsState 函数，还可以通过监听 MutableInteractionSource 的 interactions 流来自定义交互状态的处理。以下是一个示例代码：

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.interaction.PressInteraction
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import kotlinx.coroutines.flow.collect

@Composable
fun CustomInteractionStateExample() {
    // 创建一个 MutableInteractionSource 实例
    val interactionSource = remember { MutableInteractionSource() }

    // 监听交互事件流
    LaunchedEffect(interactionSource) {
        interactionSource.interactions.collect { interaction ->
            when (interaction) {
                is PressInteraction.Press -> {
                    // 按下事件处理
                    println("Element pressed!")
                }
                is PressInteraction.Release -> {
                    // 释放事件处理
                    println("Element released!")
                }
                is PressInteraction.Cancel -> {
                    // 取消事件处理
                    println("Element interaction cancelled!")
                }
            }
        }
    }

    // 创建一个文本元素，并应用 clickable 修饰符
    Text(
        text = "Click me",
        modifier = Modifier.clickable(
            interactionSource = interactionSource,
            onClick = {
                println("Text clicked!")
            }
        )
    )
}

在这个示例中，我们使用 LaunchedEffect 和 collect 函数监听 MutableInteractionSource 的 interactions 流。当发生按下、释放或取消事件时，会在控制台输出相应的信息。

七、点击与长按的性能优化

7.1 避免不必要的重新组合

在使用 Modifier.clickable 和 Modifier.longClickable 时，要注意避免不必要的重新组合。因为每次重新组合都会重新计算和渲染 UI 元素，可能会影响性能。可以通过使用 remember 函数来缓存一些不变的对象，如 MutableInteractionSource 实例，避免在每次重新组合时都创建新的对象。

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

@Composable
fun PerformanceOptimizedExample() {
    // 使用 remember 函数缓存 MutableInteractionSource 实例
    val interactionSource = remember { MutableInteractionSource() }

    // 创建一个文本元素，并应用 clickable 修饰符
    Text(
        text = "Click me",
        modifier = Modifier.clickable(
            interactionSource = interactionSource,
            onClick = {
                println("Text clicked!")
            }
        )
    )
}

7.2 减少回调函数中的计算量

在点击和长按的回调函数中，要尽量减少计算量。如果回调函数中包含复杂的计算或耗时的操作，可能会导致 UI 卡顿。可以将这些操作放在协程中异步执行，避免阻塞主线程。

kotlin

import androidx.compose.foundation.clickable
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.ui.Modifier
import kotlinx.coroutines.delay

@Composable
fun AsyncClickExample() {
    // 创建一个文本元素，并应用 clickable 修饰符
    Text(
        text = "Click me",
        modifier = Modifier.clickable {
            // 在协程中执行耗时操作
            LaunchedEffect(Unit) {
                delay(1000) // 模拟耗时操作
                println("Long operation completed after click!")
            }
        }
    )
}

八、点击与长按的兼容性问题及解决方法

8.1 Android 版本兼容性

Android Compose 对 Android 版本有一定的要求。目前，Android Compose 要求 Android 5.0（API 级别 21）及以上版本。在使用 Modifier.clickable 和 Modifier.longClickable 时，要确保应用的最低支持版本符合要求。

groovy

// 在 build.gradle 文件中设置最低 SDK 版本
android {
    compileSdkVersion 33
    defaultConfig {
        applicationId "com.example.myapp"
        minSdkVersion 21 // 确保最低支持版本为 Android 5.0 及以上
        targetSdkVersion 33
        versionCode 1
        versionName "1.0"
    }
}

8.2 与其他库的兼容性

如果在项目中使用了其他第三方库，要确保这些库与 Android Compose 的点击和长按功能兼容。有些库可能会拦截或干扰指针事件，导致点击和长按功能无法正常工作。在集成第三方库时，要进行充分的测试，确保功能正常。

8.3 不同设备的兼容性

不同的设备可能具有不同的屏幕分辨率、触摸灵敏度等特性，这可能会影响点击和长按的体验。在开发过程中，要在多种设备上进行测试，确保点击和长按功能在不同设备上都能正常工作。可以通过调整长按时间阈值（delayMillis）等参数来优化不同设备上的交互体验。

九、总结与展望

9.1 总结

通过对 Android Compose 框架中 Modifier.clickable 和 Modifier.longClickable 的源码分析，我们深入了解了这两个修饰符的实现原理和使用方法。Modifier.clickable 用于处理点击手势，通过监听指针的按下和抬起事件，在抬起时执行点击回调函数；Modifier.longClickable 用于处理长按手势，通过设置长按时间阈值，在按下时间超过阈值时执行长按回调函数。

我们还学习了如何同时支持点击和长按手势，以及如何处理点击和长按的冲突。通过使用 MutableInteractionSource，我们可以跟踪元素的交互状态，实现按下效果的视觉反馈和自定义交互状态处理。此外，我们还讨论了点击和长按的性能优化、兼容性问题及解决方法。

9.2 展望

随着 Android Compose 框架的不断发展和完善，点击和长按手势处理可能会有以下方面的改进和发展：

9.2.1 更丰富的交互效果

未来可能会提供更多的内置交互效果，如按下动画、长按动画等，让开发者可以更方便地实现各种交互效果，提升用户体验。

9.2.2 更智能的手势识别

随着机器学习和人工智能技术的发展，可能会引入更智能的手势识别算法，能够更准确地识别用户的点击和长按手势，减少误操作的发生。

9.2.3 跨平台支持

随着 Android Compose 逐渐向跨平台方向发展，点击和长按手势处理可能会支持更多的平台，如 iOS、Web 等。这将使得开发者可以在不同的平台上使用相同的代码实现一致的交互体验。

9.2.4 与其他交互方式的融合

点击和长按手势可能会与其他交互方式（如滑动、缩放等）进行更深度的融合，实现更加复杂和多样化的交互效果。例如，在长按的同时进行滑动操作，触发不同的功能。

总之，Android Compose 框架中的点击和长按手势处理为开发者提供了简洁而强大的方式来实现用户交互。随着技术的不断进步，我们可以期待更多的功能和优化，为用户带来更加流畅和丰富的交互体验。开发者可以持续关注 Android Compose 的发展动态，不断探索和应用新的交互技术，提升自己的开发能力和应用的质量。

以上技术博客从源码级别深入分析了 Android Compose 框架中点击与长按手势的处理，涵盖了 Modifier.clickable 和 Modifier.longClickable 的基本用法、源码结构、参数解析、交互处理、状态跟踪、性能优化、兼容性问题及解决方法等方面，并对未来的发展进行了展望。希望对你有所帮助。如果你还有其他需求，请随时告诉我。

Android Compose 框架手势与交互之点击与长按深入剖析(二十九)