[Android Compose] Custom Ripple 생성하여 확장 함수로 사용

- Ripple은 Android 5.0 (21) 머터리얼 디자인에 소개되었으며, 버튼을 클릭하였을 때, 물결이 퍼지듯이 효과가 나오는 기능이다.

- Compose에서도 지원하고 있다. Modifier를 기반으로 적용 가능하다.

@Composable
public fun rememberRipple(
    bounded: Boolean = true,
    radius: Dp = Dp.Unspecified,
    color: Color = Color.Unspecified
): Indication {
    val colorState = rememberUpdatedState(color)
    return remember(bounded, radius) {
        PlatformRipple(bounded, radius, colorState)
    }
}

 

- Platform Ripple은 bounded (모양), radius, colorState를 전달받아 Pressed 상태에 따라 Ripple 효과를 표현한다.

 

- 매번 Modifier에 아래와 같이 선언해 줄 필요가 있다.

clickable(
    interactionSource = remember { MutableInteractionSource() },
    indication = rememberRipple(
        color = Color.Black.copy(alpha = 0.2f),
        bounded = true
    ),

 

- 하지만 Modifier 확장함수 형태로 구성하여 일관된 Ripple을 간단하게 적용 가능하다.

fun Modifier.customRipple(
    onClick: () -> Unit
): Modifier = composed {
    this.then(
        Modifier.clickable(
            interactionSource = remember { MutableInteractionSource() },
            indication = rememberRipple(
                color = Color.Black.copy(alpha = 0.2f),
                bounded = true
            ),
            onClick = onClick
        )
    )
}

 

- 아래처럼 간단하게 사용할 수 있다.

Surface(
    modifier = Modifier
        .size(52.dp)
        .clip(CircleShape)
        .customRipple {
            onClick.invoke()
        },