동기
네이버 부스트캠프 마지막 프로젝트 진행 중, BottomNavigation 의 Ripple 이펙트를 없애는 게 좋을 것 같아 이를 제거해달라고 동료분께 부탁드렸습니다. Clickable { } 이라고 생각을 해서 부탁드렸던 건데, 해당 Composable 을 보니 Clickable 속성이 아닌 다른 방식으로 터치를 받았습니다.
포스트 제목이 Clickable 이 외의 Ripple Effect 없애기 인 이유는, Clickable { } 일 때의 Ripple Effect 를 없애는 것에 대해서는 일전에 작성한 포스트가 있기 때문입니다.
[Jetpack Compose] Clickable Ripple Effect 없애기
Android, iOS 등 모바일에서는 버튼이 눌렸다는 사실을 유저에게 알리기위해 Ripple Effect 가 존재합니다. 보통은 호숫가에 던져진 돌에 의해 파동이 일어나듯, 터치한 부분을 중심으로 원이 커져가는
blothhundr.tistory.com
어떻게 해결하였는가?
사실 너무 간단한데, CompositionLocalProvider 를 이용했습니다. CompositionLocal 의 작동 방식에 대해서는 다음 포스트에 자세히 작성해두었습니다. 참고하시면 좋겠습니다.
[Jetpack Compose] CompositionLocal 은 어떻게 동작하는가?
동기 Jetpack Compose 를 꽤 오랜 시간 사용해 왔지만, 여전히 모르는 부분이 많습니다. 그중 가장 가려웠던 부분은 CompositionLocal 인데, 언제 어떻게 사용해야 하는지에 대해서는 알고 있으나, 어떠한
blothhundr.tistory.com
해결 방법은 다음과 같습니다. CompositionLocalProvider 가 선언하는 람다 내에 영향을 주는 Composable 이므로, 해당 람다 내에 Ripple Effect 를 적용하지 않고자 하는 Composable 을 작성해주면 됩니다. 해당 경우엔 Ripple 에 관해 제거해주면 되므로, 수많은 ProvidableCompositionLocal<T> 중 Ripple 관련된 것을 찾아 적용해주면 그만입니다.
CompositionLocalProvider(LocalRippleTheme.provides(object : RippleTheme {
@Composable
override fun defaultColor() = Color.Unspecified
@Composable
override fun rippleAlpha() = RippleAlpha(0f, 0f, 0f, 0f)
})) {
...
}
CompositionLocalProvider 는 어지간한 상황에 대해 대부분 대응이 되어 있으므로('이게 있나?' 싶으면 대부분 있습니다), 생성자를 열고 Local + 해결하고자 하는 키워드 를 입력하고 자동 완성을 작동시키면 아마 금방 해결하실 수 있을 겁니다.
적용 전, 후
참 공교롭게도, 바로 전 날에 CompositionLocal 에 대해 학습하고 포스팅했는데 관련된 문제가 등장해, 금방 해결할 수 있었습니다.
'Android > Tech' 카테고리의 다른 글
Ktor 적용기 (feat.Ktor Generics Response Handler) (4) | 2023.11.25 |
---|---|
Third-Party-Library 없이 비디오 컷 편집 기능 구현하기 (2) | 2023.11.20 |
[Jetpack Compose] CompositionLocal 은 어떻게 동작하는가? (0) | 2023.11.15 |
Glide 와 Coil 은 각각 어떻게 이미지를 불러오는가? (2) | 2023.11.11 |
VersionCatalog 적용기 (5) | 2023.11.09 |