Android clickable

오늘은 Jetpack Compose에서 UI에 인터랙션을 부여할 때 자주 사용되는 도구, Modifier.clickable에 대해 알아보겠습니다.

clickable

clickable은 Jetpack Compose에서 UI 요소를 클릭할 수 있도록 만들어주는 Modifier이다.

Modifier.clickable {
    // 클릭되었을 때 실행할 코드
}

이렇게 Modifier에 clickable을 붙이면, 해당 요소는 터치 이벤트를 받을 수 있는 상태가 되며, 사용자가 해당 요소를 누르면 onClick 람다가 호출된다.

기본 동작과 특징

• Ripple 효과 제공
  머터리얼 디자인의 터치 피드백인 Ripple 효과가 기본으로 적용된다.
• 접근성 자동 지원
  클릭 가능한 요소로 인식되기 때문에, 스크린 리더 등 접근성 기능과 자연스럽게 통합된다.
• 활성화 여부 제어 가능
  enabled = false로 비활성화하면 클릭이 되지 않고, 시각적 피드백도 사라진다.

Ripple 효과

Ripple은 사용자가 터치한 위치에서 퍼져 나가는 애니메이션 효과이다. 머터리얼 디자인에서 기본적으로 사용하는 피드백 방식으로, 사용자가 "내가 눌렀다"는 것을 직관적으로 인지할 수 있게 해준다.

Modifier.clickable(
    indication = rememberRipple(), // 기본 ripple
    onClick = { /* ... */ }
)

OnClick

clickable의 가장 핵심 기능은 바로 onClick이다.

Modifier.clickable {
    Log.d("Click", "클릭됨")
}

사용자가 UI 요소를 클릭했을 때 호출되는 람다 함수이다.

이 안에 네비게이션, 상태 변경, Toast 출력 등 원하는 동작을 자유롭게 넣을 수 있다.

combinedClickable

clickable이 단순 클릭만 처리하는 반면, combinedClickable은 롱클릭이나 더블클릭 등 복합적인 제스처를 처리할 수 있게 해준다.

Modifier.combinedClickable(
    onClick = { Log.d("Click", "일반 클릭") },
    onLongClick = { Log.d("Click", "롱 클릭") },
    onDoubleClick = { Log.d("Click", "더블 클릭") } // 선택사항
)

특징

• 하나의 Modifier로 여러 제스처를 처리할 수 있다
• 사용자 인터랙션이 많은 UI에 적합하다