반응형
clickable에서 클릭 효과 제거가 필요한 이유
clickable에서 다양한 클릭 효과를 만드는 것 또한 중요하지만, 클릭 효과를 제거하는 것도 종종 필요하다. 예를 들어 뒤로 가기 버튼을 눌렀을 때 클릭 효과가 없이 뒤로 가기가 되었으면 한다던가, 필터 버튼을 눌렀을 때 뒤에 클릭 효과가 생기지 않고 필터 버튼의 색상만 변해야 한다던가 하는 요구사항이 있을 수 있다.
Compose의 clickable은 기본적으로 클릭 효과를 가지고 있기 때문에, 이러한 요구사항을 맞추기 위해서는 click 효과를 제거하는 것이 필요하다.
clickable에서 클릭 효과 제거하기
clickable에서 클릭 효과를 제거하기 위해서는 파라미터가 6개인 clickable 함수를 사용해야 한다.
fun Modifier.clickable(
interactionSource: MutableInteractionSource,
indication: Indication?,
enabled: Boolean = true,
onClickLabel: String? = null,
role: Role? = null,
onClick: () -> Unit
)
여기서 interactionSource에 remember{ MutableInteractionSource() }을 넣고 indication을 null로 만들면 된다.
Box(
modifier = Modifier
.size(300.dp)
.background(Color.Blue)
.clickable(
interactionSource = remember{ MutableInteractionSource() },
indication = null
) {
Toast.makeText(baseContext, "조세영의 Kotlin World", Toast.LENGTH_SHORT).show()
}
)
그러면 아래와 같이 클릭 효과가 없는 clickable을 만들 수 있다.
clickable에서 클릭 효과를 제거하는 다른 방법
clickable에서 클릭 효과를 제거하기 위해 Indication을 구현해 만들 수도 있다. 아래와 같이 NoRippleIndication object를 만들면 해당 Indication은 drawContent()만 수행하기 때문에 클릭 효과가 없다.
object NoRippleIndication : Indication {
@Composable
override fun rememberUpdatedInstance(interactionSource: InteractionSource): IndicationInstance {
return object: IndicationInstance {
override fun ContentDrawScope.drawIndication() {
drawContent()
}
}
}
}
이를 다음과 같이 사용하면 clickable에서 클릭 효과가 제거된다.
Box(
modifier = Modifier
.size(300.dp)
.background(Color.Blue)
.clickable(
interactionSource = remember{ MutableInteractionSource() },
indication = NoRippleIndication
) {
Toast.makeText(baseContext, "조세영의 Kotlin World", Toast.LENGTH_SHORT).show()
}
)
반응형
