[Android] Compose Click event 추가하기

Composed에서 Click Event 추가하기!

최근 조금 바빠져서 만지지 못했던 스캔 메모에 전체 선택 후 삭제 기능을 추가했다.

그 과정에서 롱클릭을 구현해야 했어서 간단하게 기록해 보려고 한다.

 

기존 뷰 방식에서는 클릭 이벤트를 컨트롤하는 다양한 방식들이 존재했다.

 

1. xml에서 데이터 바인딩을 이용한 onClick 구현

android:onClick="@{() -> viewModel.onClick.invoke()}"

해당 코드처럼 xml에서 데이터 바인딩을 이용해서 직접 xml에 구현할 수 있다.

 

2. setOnClickListener 추가

binding.buttonBack.setOnClickListener { requireActivity().finish() }

가장 간단하고 기본적인 방식으로 뷰바인딩이나 findViewById를 통해서 클릭 이벤트를 넣고 싶은 뷰에 접근해서 setOnClickListener를 달아 주고 원하는 동작을 콜백으로 넣어주는 방식이다.

 

3. onTouch 활용

CustomView를 만들거나 뷰그룹에 onTouch를 상속받아서 터치 이벤트를 구현하는 방식이다.

OnClick도 결국 OnTouch를 감지해서 구현된 방식이라서 OnTouch를 구현하거나 setOnTouchListener를 구현하는 방식으로도 클릭 이벤트를 구현할 수 있다.

이 방식은 드래그, 터치 등 조금 더 디테일한 컨트롤을 할 수 있다.

 

여기까지 간단하게 뷰에서 클릭을 받는 법이고, 컴포즈는 이를 어떻게 구현해야 할까?

 

Button이나 CheckBox처럼 원래 터치를 하는 용도인 컴포져블들은 아주 간단하게 구현이 가능하다.

 

Button(
    onClick = {
        if (isGranted) {
            moveToNext()
            return@Button
        }
        if (shouldShowRationale) {
            Intent(Settings.ACTION_APPLICATION_DETAILS_SETTINGS).apply {
                data = Uri.parse("package:" + context.packageName)
                context.startActivity(this)
            }
            return@Button
        }
        launchPermissionRequest()
    }
) {
    Text("권한 허가")
}

이처럼 컴포져블에 onClick이 있고 여기에 람다로 전달해 주면 끝이기 때문이다.

 

그러면 버튼에만 클릭을 달수 있는 건가?

아니다.

 

Row, Column 등 레이아웃이나 다른 컴포져블에도 클릭이벤트를 적용할 수 있다.

 

modifier = Modifier
    .height(40.dp)
    .width(40.dp)
    .clickable {
        onClick()
    }

Modifier에 있는 clickable을 이용하면 쉽게 구현이 가능하다.

스테이트 호이스팅을 이용해서 위에서 상태를 관리한다면 더욱 유지보수가 편하고 구현도 간단한 코드가 될 것이다.

 

그리고 내가 이번에 찾은 것은 LongClick 이벤트를 처리해야 하는 것이었는데

 

이 부분은 clickable로 처리가 되지 않았다.

그래서 안으로 들어가 보니 역시나 다 준비되어 있었다

 

fun Modifier.combinedClickable(
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    onLongClickLabel: String? = null,
    onLongClick: (() -> Unit)? = null,
    onDoubleClick: (() -> Unit)? = null,
    onClick: () -> Unit
)

바로 combinedClickable을 사용하면 onLongClick, onDoubleClick까지 구현이 가능하게 우리 구글 성님들께서 만들어 놓으셨다.

combinedClickable(
    onClick = onClickItem,
    onLongClick = onLongClick
)

이렇게 바로 람다로 구현해 주면 롱클릭마저도 간단하게 구현이 가능했다.

 

위 이미지처럼 앱바 변경과 선택된 아이템의 수, 그리고 레이아웃을 클릭했을 때, 체크박스를 클릭했을 때 등 처리할 부분이 많아서 statHolder로 관리를 해야 해서 조금 고민을 해야 했지만 재미있는 경험이었다.

물론 이제 리팩토링을.....

 

컴포즈 만세이~~~