Compose | Jetpack Compose 다중 클릭 이벤트 처리

이번 글에서는 Compose에서 다중 클릭 이벤트를 처리하는 방법에 대해 소개하겠습니다.

interface MultipleEventsCutterManager {
    fun processEvent(event: () -> Unit)
}

@OptIn(FlowPreview::class)
@Composable
fun <T>multipleEventsCutter(
    content: @Composable (MultipleEventsCutterManager) -> T
) : T {
    val debounceState = remember {
        MutableSharedFlow<() -> Unit>(
            replay = 0,
            extraBufferCapacity = 1,
            onBufferOverflow = BufferOverflow.DROP_OLDEST
        )
    }

    val result = content(
        object : MultipleEventsCutterManager {
            override fun processEvent(event: () -> Unit) {
                debounceState.tryEmit(event)
            }
        }
    )

    LaunchedEffect(true) {
        debounceState
            .debounce(300L)
            .collect { onClick ->
                onClick.invoke()
            }
    }

    return result
}

fun Modifier.clickableSingle(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onClick: () -> Unit
) = composed(
    inspectorInfo = debugInspectorInfo {
        name = "clickable"
        properties["enabled"] = enabled
        properties["onClickLabel"] = onClickLabel
        properties["role"] = role
        properties["onClick"] = onClick
    }
) {
    multipleEventsCutter { manager ->
        Modifier.clickable(
            enabled = enabled,
            onClickLabel = onClickLabel,
            onClick = { manager.processEvent { onClick() } },
            role = role,
            indication = LocalIndication.current,
            interactionSource = remember { MutableInteractionSource() }
        )
    }
}

코드 설명: 코드의 주요 구성 요소는 다음과 같습니다.

1. MultipleEventsCutterManager 인터페이스: 이 인터페이스는 processEvent 함수 하나를 정의하며, 클릭 또는 이벤트 처리를 위한 함수를 받아서 관리합니다.
2. multipleEventsCutter Composable 함수: 이 함수는 Composable 뷰를 생성하는데 사용됩니다. Composable은 Android의 UI 구성 요소를 표현하고 관리하는 데 사용되며, multipleEventsCutter 함수는 이벤트 디바운싱을 처리하기 위한 핵심 부분입니다. 이 함수는 클릭 가능한(Modifier.clickable) 뷰를 생성하고, 클릭 이벤트를 관리하는 데 사용됩니다.
3. Modifier.clickableSingle 함수: 이 함수는 클릭 가능한 Modifier를 생성하는데 사용됩니다. 이 함수는 Composable 함수 내에서 multipleEventsCutter 함수를 호출하여 클릭 이벤트를 디바운싱하고 처리합니다.

동작 원리:

1. multipleEventsCutter 함수는 클릭 가능한 뷰를 생성하고, 클릭 이벤트를 MultipleEventsCutterManager를 통해 관리합니다. 클릭 이벤트가 발생하면 debounceState에 해당 이벤트를 추가하고, 300ms의 디바운스 시간을 설정합니다.
2. Modifier.clickableSingle 함수를 사용하여 클릭 가능한 Modifier를 생성하면, 내부에서 multipleEventsCutter 함수를 호출하고 클릭 이벤트를 이 함수를 통해 처리합니다.
3. 클릭 이벤트가 발생할 때마다, debounceState에서 해당 이벤트를 수신하고 300ms 디바운스 이후에 처리됩니다. 이렇게 함으로써 여러 번의 클릭 이벤트가 한 번의 클릭으로 간주되고 중복 처리되지 않도록 보장됩니다.

Modifier.clickableSingle {
    // 클릭 이벤트가 여기에 처리됩니다.
    // 여러번의 클릭 이벤트가 한 번의 클릭으로 처리됩니다.
}