[Android] Pointer input - Drag

#1 개요

#1-1 공식 문서

드래그, 스와이프, 플링  |  Jetpack Compose  |  Android Developers

위 공식 문서를 나의 언어로 정리했다.

 

#1-2 AnchoredDraggable

Swipeable에서 AnchoredDraggable로 이전  |  Jetpack Compose  |  Android Developers

Swipeable이 AnchoredDraggable로 업그레이드되었다고 한다. 위 링크는 해당 업데이트를 전하는 페이지다.

 

#1-3 유튜브 영상

AnchoredDraggable에 대한 개론을 담은 공식 영상이다. 왜인지는 모르겠지만, 영상 썸네일에 안드로이드 캐릭터가 해적이 쓸 법한 안대를 쓰고 있다.

 

#2 드래그 (drag)

#2-1 개요

Modifier.draggable()은 컴포넌트에 드래그를 '가능하게' 한다. Modifier.draggable() 만으로 드래그가 '되는' 것은 아니다. Modifier.scrollable()과 같은 맥락이다. Modifier.scrollable()에 대해 다룬 아래 링크의 게시글을 읽으면 이해가 쉬울 것이다.

 

[Android] Pointer input - Scroll

위 게시글에서, 스크롤을 '가능하게' 하는 것은 Modifier.scrollable()이었다. 그리고 스크롤이 '되게' 하는 것은 Modifier.verticalScroll() 또는 Modifier.horizontalScroll()이었다. 이와 비슷하게 드래그를 '가능하게' 하는 것은 Modifier.draggable()이다. 그리고 드래그가 '되게' 하는 것은 detectDragGestures()다.

 

#2-2 Modifier.draggable()가 사용된 코드 예시

@Composable
private fun DraggableText() {
    var offsetX by remember { mutableStateOf(0f) }
    Text(
        modifier = Modifier
            .offset { IntOffset(offsetX.roundToInt(), 0) }
            .draggable(
                orientation = Orientation.Horizontal,
                state = rememberDraggableState { delta ->
                    offsetX += delta
                }
            ),
        text = "Drag me!"
    )
}

 

#2-3 detectDragGestures()가 사용된 코드 예시

@Composable
private fun DraggableTextLowLevel() {
    Box(modifier = Modifier.fillMaxSize()) {
        var offsetX by remember { mutableStateOf(0f) }
        var offsetY by remember { mutableStateOf(0f) }

        Box(
            Modifier
                .offset { IntOffset(offsetX.roundToInt(), offsetY.roundToInt()) }
                .background(Color.Blue)
                .size(50.dp)
                .pointerInput(Unit) {
                    detectDragGestures { change, dragAmount ->
                        change.consume()
                        offsetX += dragAmount.x
                        offsetY += dragAmount.y
                    }
                }
        )
    }
}

 

#3 플링 (fling)

플링(fling)이란, 드래그 도중 손을 떼는 것을 의미한다. 스마트폰에서 웹 페이지를 스크롤할 때를 떠올려 보라. 손가락으로 화면을 드래그하다가 손을 갑자기 휙 떼면, 마치 스크롤에 관성이 있는 것처럼 여전히 스크롤되지 않는가? 그걸을 플링이라고 한다. 역방향으로 생각해보면, 플링은 반드시 드래그가 선행되어야 발생하는 이벤트라는 것도 알 수 있다.

 

#4 스와이프 (swipe)

https://developer.android.com/static/develop/ui/compose/images/gestures-swipe.gif

스와이프(swipe)란, 드래그나 플링 종료 시 컴포넌트가 (프로그래머에 의해 정해진) '앵커 포인트'로 이동하는 이벤트다. 역방향으로 생각해보면, 스와이프는 반드시 드래그 또는 플링이 선행되어야 발생하는 이벤트라는 것도 알 수 있다. 스와이프 동작을 위해선 Modifier.swipeable()이 필요하다. 그러나 #1-2에서 말했듯, Swipeable는 deprecated될 예정이다. 따라서 본 게시글에선 Modifier.swipeable() 대신 Modifier.anchoredDraggable()을 사용한다.

 

#5 AnchoredDraggable

#5-1 개요 

공식 문서에 있는 내용을 잘 읽고 소화하려했다. 하지만 늬앙스만 이해되었고 내부 기제를 정확히 이해할 순 없었다. 이런 겉핥기식 이해로는, 실제 구현을 할 수 없다. 따라서 미니 프로젝트를 통해 공식 문서의 코드를 따라해보겠다. 우선 AnchoredDraggableExample이라는 이름의 Jetpack Compose 프로젝트를 만들었다.

 

#5-2 기본 구조

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AnchoredDraggableBox() {
    val state = remember {
        AnchoredDraggableState(
            // TODO
        )
    }

    Box(
        modifier = Modifier
            .offset { /* TODO */ }
            .width(200.dp)
            .height(200.dp)
            .background(Color.LightGray)
            .anchoredDraggable(
                state = state,
                orientation = /* TODO */
            )
    ) {
        Text("Swipe me")
    }
}

AnchoredDrag를 적용할 컴포넌트에 Modifier.anchoredDraggable() 및 Modifier.offset()을 붙인다. 그리고 AnchoredDrag의 핵심인 AnchoredDraggableState를 선언하여 anchoredDraggable() 및 offset() 속에 넣어주는 것으로 AnchoredDrag가 동작하게 된다.

 

#5-3 AnchoredDraggableState

@ExperimentalFoundationApi public constructor AnchoredDraggableState<T>(
    initialValue: T,
    anchors: DraggableAnchors<T>,
    positionalThreshold: (totalDistance: Float) -> Float,
    velocityThreshold: () -> Float,
    animationSpec: AnimationSpec<Float>,
    confirmValueChange: (newValue: T) -> Boolean = { true }
)

AnchoredDraggableState는 AnchoredDrag를 위한 모든 정보가 들어있다. 각 인수에 대한 설명은 아래와 같다.

 

initialValue: T

예를 들어, #5-2 코드 속 Box()의 초기 위치를 의미한다.

 

anchors: DraggableAnchors<T>

여러 '앵커 포인트'의 목록이다.

 

positionalThreshold: (totalDistance: Float) -> Float

다른 '앵커 포인트'로 이동되기 위한 최소 거리. 즉 이 값이 작다면 살짝만 스와이프해도 다른 앵커 포인트로 날아가버릴 것이다.

 

velocityThreshold: () -> Float

positionalThreshold의 값을 넘지 않았어도, 드래그 동작의 속도(velocity)가 높다면 다른 '앵커 포인트'로 이동하는게 자연스럽다. 이 인수는 그 속도 값을 정의한다.

 

animationSpec: AnimationSpec<Float>

어떻게(how) 다른 앵커 포인트로 이동하는 지 정의한다. 애니메이션 동작을 정의한다는 말이다.

 

confirmValueChange: (newValue: T) -> Boolean

confirmValueChange를 단순 해석하면 '앵커 포인트'로 이동함을 허용한다는 말이다. 기본값은 true로 되어있기에 특정 앵커 포인트로 이동하는 게 막힐 일이 없지만, 프로그래머가 confirmValueChange를 통해서 매우 세세한 통제를 가할 수도 있다. 가령 어떤 변수가 어떤 값인 경우에만 이동을 허용하는 식이다.

 

#5-4 예시 코드

enum class DragValue { Start, Center, End }

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AnchoredDraggableBox() {
    val density = LocalDensity.current

    val anchors = with(density) {
        DraggableAnchors {
            DragValue.Start at -250.dp.toPx()
            DragValue.Center at 0f
            DragValue.End at 250.dp.toPx()
        }
    }

    val state = remember {
        AnchoredDraggableState(
            initialValue = DragValue.Center,
            anchors = anchors,
            positionalThreshold = { distance -> distance * 0.5f }, // (1)
            velocityThreshold = { with(density) { 125.dp.toPx() } }, // (2)
            animationSpec = spring(), // (3)
        )
    }

    Box(
        Modifier
            .offset { IntOffset(x = 0, y = state.requireOffset().roundToInt()) } // (4)
            .width(200.dp)
            .height(200.dp)
            .background(Color.LightGray)
            .anchoredDraggable(
                state = state,
                orientation = Orientation.Vertical
            )
    ) {
        Text("Swipe me")
    }
}

(1) positionalThreshold = { distance -> distance * 0.5f }

distance는 두 '앵커 포인트' 사이의 거리를 의미한다. 그 거리의 절반(0.5f) 이상 드래그했다면 스와이프가 실행된다.

 

(2) velocityThreshold = { with(density) { 125.dp.toPx() } }

사용자가 손을 뗄 때의 속도가 (125.dp / 1초)이상이면, 스와이프가 실행됨을 의미한다. 속도는 Compose 내부에서는 (px / 초) 단위이기에, 픽셀로 변환했다. 그럼 그냥 처음부터 (px / 초) 단위로 넣어주면 되지않을까? 가능은 하다. 그러나 자연스럽지 않다. (px / 초) 단위를 넣으려는 시도는 마치, 건축가들이 아파트의 높이를 "총 몇 m인가?"가 아닌 "총 몇 층인가?"로 파악하려는 시도와 같다. 따라서 코드에서는 인간(프로그래머) 입장에서 정확한 단위인 dp로 적는 것이다.

 

(3) animationSpec = spring()

spring은 안드로이드의 기본 애니메이션이다. spring에 커스텀을 할 수도 있다.

 

(4) y = state.requireOffset().roundToInt()

requireOffset()은 Modifier.anchoredDraggable()가 붙은 컴포저블 객체의 offset를 반환한다.

 

#5-5 동영상 1

잘 작동하지만 첫 앵커 포인트와 끝 앵커 포인트에서 더 스와이프될 수 없는 방향으로 드래그했을 때, Box()가 움찔거리는 게 마음에 들지 않았다.

 

#5-6 깔끔하게 다듬기

Box(
    Modifier
        .offset {
            IntOffset(
                x = 0,
                y = state.requireOffset()
                    .coerceIn(anchors.minAnchor(), anchors.maxAnchor())
                    .roundToInt()
            )
        }
        ...
) {
    Text("Swipe me")
}

하지만 offset를 이렇게 변경하면,

 

#5-7 동영상 2

움찔거리는 현상을 제거할 수 있다.

 

#5-8 코드 업데이트

Compose 기초  |  Jetpack  |  Android Developers

Jetpack compose 1.7.0-alpha01 버전부터, AnchoredDraggableState의 인수 animationSpec의 이름이 snapAnimationSpec으로 바뀌었고 decayAnimationSpec이라는 인수가 추가되었다.

 

또, 1.8.0-alpha06 버전부터는 confirmValueChange 인수가 삭제되었다. confirmValueChange를 대체하는 건 없다. 이제 특정 앵커로 스와이프되는 게 싫다면, confirmValueChange로 세부조정을 할 게 아니라 앵커 포인트 목록에서 제거를 해버리라고 한다.

 

이에 맞게 코드를 업데이트하겠다.

 

enum class DragValue { Start, Center, End }

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun AnchoredDraggableBox() {
    val density = LocalDensity.current

    // 앵커 정의
    val anchors = with(density) {
        DraggableAnchors {
            DragValue.Start at -250.dp.toPx()
            DragValue.Center at 0f
            DragValue.End at 250.dp.toPx()
        }
    }

    // AnchoredDraggableState 선언
    val state = remember {
        AnchoredDraggableState(
            initialValue = DragValue.Center
        )
    }

    // AnchoredDraggableState에 앵커 연결 (초기화)
    LaunchedEffect(Unit) {
        state.updateAnchors(anchors)
    }

    if (!state.offset.isNaN()) { // 분기문으로 앵커 연결 (초기화) 유무 확인 후 Box() 호출
        Box(
            Modifier
                .offset {
                    IntOffset(
                        x = 0,
                        y = state.offset.roundToInt()
                    )
                }
                .width(200.dp)
                .height(200.dp)
                .background(Color.LightGray)
                .anchoredDraggable(
                    state = state,
                    orientation = Orientation.Vertical,
                    flingBehavior = AnchoredDraggableDefaults.flingBehavior(
                        state = state,
                        positionalThreshold = { distance -> distance * 0.5f },
                        animationSpec = spring()
                    )
                )
        ) {
            Text(
                """
                Swipe me!
                
                current: ${state.currentValue}
                settled: ${state.settledValue}
                """.trimIndent()
            )
        }
    }
}

Box() 외부의 코드 설명

AnchoredDraggableState 생성이 매우 간소화되었다. 또, 앵커 포인트를 AnchoredDraggableState.updateAnchors()를 통해 추가하는 게 기본값이 되었다 (여전히 생성자에 넣어도 되긴 한다). 위 코드에서는 updateAnchors()를 LaunchedEfftect()를 통해 비동기적으로 넣어주고 있다. 이 비동기 코드 때문에 Box()를 if문으로 감쌌다. 앵커 포인트가 초기화되지 않은 상태에서 Box()를 생성할 수는 없기 때문이다.

 

Box() 내부의 코드 설명

coerceIn()을 쓰지 않아도 움찔거리지 않기에 제거했다. 이제 애니메이션 관련 코드는 anchoredDraggable() 속으로 들어간다. anchoredDraggable()의 flingBehavior 프로퍼티가 애니메이션을 담당한다. 여기에 AnchoredDraggableDefaults.flingBehavior를 넣어 애니메이션을 지정해주었다. flingBehavior 프로퍼티는 nullable이라 비워도 동작한다. 리팩토링하는 김에, Text()에 현재 상태도 표시하게 만들었다.

 

#5-8 전체 소스코드

android-practice/pointer-input/AnchoredDraggableExample at master · Kanmanemone/android-practice

#5-8의 코드 업데이트를 적용했다.