[Compose] 사용자 터치

panax·2024년 1월 14일
0

Compose

목록 보기
2/4
post-thumbnail

🍩터치

컴포즈에서 클릭, 드래그 같은 사용자 터치 동작을 처리하는 방법에 대한 소개
공식 문서를 기준으로 작성됨

🍩개념 정의

Pointer

  • 사용자가 앱과 상호작용할 때 사용하는 물리적인 대상
  • 손가락, 터치 펜, 마우스 등
  • 상호작용하고 있는 Pointer의 타입은 PointerType value class에서 확인할 수 있음
  • 화면 좌표를 지정할 수 있어야해서 키보드는 Pointer가 아님

Pointer event

  • Low-level 단계에서 터치를 처리할 때 사용하는 개념
  • PointerEvent 데이터 클래스에서 확인할 수 있음

Gesture

  • Pointer event가 모여서 만들어진 동작
  • 탭, 드래그, 스와이프 등

🍩처리 단계

컴포즈에서는 3가지 레벨로 터치를 처리할 수 있음
높은 레벨이 개발자에서 편한 방법

Top-level

  • Button 같은 컴포넌트가 제공하는 리스너

High-level

  • Modifier가 제공하는 clickable, draggable 등

Low-level

  • Modifier가 제공하는 pointerInput

🍩Top-level

컴포넌트가 제공하는 API
개발자가 따로 처리하지 않아도 동작에 대한 피드백을 받을 수 있음

@Composable
fun Button(
    onClick: () -> Unit,
    ...
)

단점

  • 세세한 동작을 처리하기 어려움
  • 컴포넌트가 제공하지 않으면 사용 불가

🍩High-level

컴포넌트의 Modifier를 사용한 터치 동작 추가 방법
Modifier가 제공하는 clickable, scrollable, draggable 등이 있음

다음 확장 함수를 제공하는데 내용이 길어 자세한 내용은 다른 글에서 정리할 예정

누르기

  • clickable, combinedClickable
  • selectable
  • toggable, triStateToggleable

스크롤

  • horizontalScroll, verticalScroll, scrollable

드래그

  • draggable
  • swipeable

다중 터치

  • transformable

🍩Low-level

터치를 세밀하게 처리해야 하거나 원하는 동작을 만들어야 할 때 사용
Modifier의 pointerInput 안에서 awaitPointerEventScope를 사용

이 부분도 내용이 길어져 다른 글에서 자세히 다룰 예정

Modifier
.pointerInput(Unit) {
	awaitPointerEventScope {
		val touchDown = awaitPointerEvent()
    
    	do {
    		val touchMove = awaitointerEvent()
    	} while (touchMove.changes.any { it.pressed })
    
    	val touchUp = awaitPointerEvent()
	}
}

단점

  • 사용자의 모든 동작을 처리할 수 있지만 그만큼 코드와 로직이 복잡해짐
  • 동작을 직접 구현해야 하기 때문에 난이도가 높은 편

그래서 컴포즈는 여러 동작을 몇 가지 메소드를 제공하고 있음

누르기

  • detectTapGestures

드래그

  • detectHorizontalDragGestures, dectVerticalDragGestures
  • detectDragGestures, detectDragGesturesAfterLongPress

다중 터치

  • detectTransformGestures
profile
안드로이드 개발자

0개의 댓글