Jetpack Compose에서 화면 클릭 이벤트 감지하기
Jetpack Compose에서 화면 클릭 이벤트를 감지하기 위해서는 Modifier의 확장 함수인 clickable을 사용하면 된다. 예를 들어 Box 컴포넌트 클릭 시 "조세영의 Kotlin World" Toast를 출력하기 위해서는 다음과 같이 만들 수 있다.
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
Box(
modifier = Modifier
.size(300.dp)
.background(Color.Blue)
.clickable {
Toast.makeText(baseContext, "조세영의 Kotlin World", Toast.LENGTH_SHORT).show()
}
)
}
}
}위 코드를 실행하면 다음과 같이 300dp의 크기를 가진 파란 박스가 나오고, 해당 박스를 클릭하면 클릭 이펙트와 함께 "조세영의 Kotlin World" 토스트가 보여진다.
clickable의 구성
위 함수를 실행하기 위해서는 기본적인 clickable을 사용한다. clickable은 아래와 같이 구성되어 있다.
fun Modifier.clickable(
enabled: Boolean = true,
onClickLabel: String? = null,
role: Role? = null,
onClick: () -> Unit
)위 함수는 onClick을 제외한 모든 값에 기본 값이 있어 단순히 onClick만 구현하면 방식으로 사용할 수 있다.
Box(
modifier = Modifier
.size(300.dp)
.background(Color.Blue)
.clickable {
Toast.makeText(baseContext, "조세영의 Kotlin World", Toast.LENGTH_SHORT).show()
}
)
나머지 구성요소에 대한 것도 알아보자. enabled는 클릭 이벤트를 받을지 말지를 결정하는 파라미터로 만약 false라면 onClick 이벤트가 동작하지 않는다. onClickLabel과 Role은 사실상 거의 사용되지 않으므로 기본 값으로 두는 형태로 사용하는 경우가 대다수이다.
위에서 다룬 clickable의 한계
하지만, 이 방식은 실무적으로는 유용하지 못하다. 그 이유는 바로 기본적인 Indication(클릭 효과)를 설정하지 못하기 때문이다. Compose의 clickable에서 제공하는 기본 클릭 효과는 DefaultDebugIndication라는 것으로 구현되어 있어 매우 어색한 클릭 효과를 보인다. 클릭이 마치 뚝뚝 끊기는 것처럼 보인다.
이를 해결하고 커스텀한 클릭 효과를 설정하기 위해서는 조금 더 복잡한 파라미터를 가진 clickable을 사용한다.
이에 대해서 다음 글에서 알아보도록 하자.
