스크롤 단계 이해하기

스크롤은 여러 단계로 나뉩니다. 입력 델타는 각 단계가 움직임을 소비하거나 반응할 기회를 갖도록 일련의 단계를 통해 전달됩니다.

이 주기 동안 사용 가능한 입력 델타와 소비된 입력 델타가 모두 모든 단계에서 전달됩니다. 이렇게 하면 각 단계에 스크롤 이벤트에 반응하거나, 이벤트를 사용하거나, 이벤트를 수신하는 데 필요한 전체 컨텍스트가 제공됩니다.

그림 1과 같이 스크롤 프로세스는 다음 순서를 따릅니다.

1. 오버스크롤: 초기 입력 델타를 먼저 수신하므로 오버스크롤이 먼저 반응할 수 있습니다 (예: 활성 스트레치 효과 완화).
2. 중첩 스크롤 사전 스크롤: 스크롤 단계 전에 입력 델타에 반응할 기회를 제공합니다. 이 단계에서는 일부 입력 델타가 사용되거나 앱 바 접기 또는 펼치기와 같은 UI 변경을 트리거하기 위해 모니터링될 수 있습니다.
3. 입력 델타 변환: 레이아웃 방향에 따라 원시 입력 델타의 부호를 조정하여 자연스러운 스크롤 동작을 보장합니다. 자세한 내용은 입력 델타 변환 섹션을 참조하세요.
4. 스크롤: 이 단계에서는 스크롤 컨테이너 구성에 맞게 조정된, 사용 가능하고 사용되지 않은 입력 델타를 수신합니다. 일반적으로 이 델타를 사용하여 자체 스크롤 오프셋을 업데이트합니다.
5. 원시 입력 델타로 되돌리기: 스크롤 단계에서 사용 가능하고 사용된 델타를 원래 원시 입력 델타 부호로 되돌립니다.
6. 중첩 스크롤 스크롤 후: 이 단계는 기본 스크롤 단계가 완료된 후 반응하여 새로 업데이트된 사용 가능한 델타와 사용된 델타를 수신합니다. 남은 사용 가능한 입력을 소비하거나 방금 소비된 항목의 컨텍스트를 사용할 수 있습니다.
7. 오버스크롤: 이 마지막 단계에서는 사용 가능한 최종 델타와 소비된 최종 델타를 확인합니다. 이 단계에 도달하는 나머지 사용 가능한 입력은 일반적으로 늘이기 또는 빛나기와 같은 에지 효과를 유도하는 데 사용되며, 이는 사용자가 스크롤 가능한 영역의 경계에 도달했음을 나타냅니다.

입력 델타 변환

포인터 입력 델타는 예상 계약과 일치하도록 스크롤 단계에서 부호 조정이 필요합니다. 델타가 Scroll 단계에 도달하기 전에 스크롤 수정자는 방향, 레이아웃 방향, RTL 컨텍스트를 기반으로 입력 델타를 조정합니다. 이는 원시 입력이 화면에서 포인터의 물리적 픽셀 움직임을 추적하기 때문에 발생합니다 (예: 아래로 이동하면 화면의 Y 좌표가 증가하여 양의 델타가 생성됨). 하지만 콘텐츠가 손가락을 따라 움직이는 '자연스러운 스크롤'을 구현하려면 아래로 드래그할 때 표시 영역이 콘텐츠 위로 이동해야 합니다. 이는 음수 스크롤 오프셋에 해당합니다.

마우스 휠이나 터치패드와 같은 다른 입력 소스의 입력 델타는 스크롤 단계 전반에서 변환되지 않습니다.

예: Modifier.horizontalScroll()을 사용하여 포인터가 오른쪽으로 이동함

델타가 사용되고 변환되는 방식을 이해하려면 포인터가 오른쪽으로 이동하는 동작을 매핑하는 그림 2를 참고하세요.

• 사전 스크롤: 동작은 양의 원시 입력 델타 100으로 시작합니다.
  • 오버스크롤은 이를 관찰하고 10을 소비하여 90을 남깁니다.
  • 중첩 스크롤 사전 스크롤은 상위 구성요소에 반응할 기회를 제공하여 30을 소비합니다. 남은 원시 델타는 60입니다.
• 변환 A: 스크롤 단계에 들어가기 전에 horizontalScroll는 나머지 양수 원시 델타 (60)를 음수 델타 (-60)로 반전합니다. 이렇게 하면 표시 영역이 왼쪽으로 이동하여 콘텐츠가 사용자의 손가락과 함께 오른쪽으로 이동하는 것처럼 보입니다.
• 스크롤: 타겟 스크롤 가능 구성요소는 이 변환된 델타의 일부를 사용하여 스크롤 오프셋을 업데이트합니다. 이 예시에서는 -30을 사용하고 -30은 사용하지 않습니다.
• 변환 B: 사용되지 않은 스크롤 델타(-30)가 중첩 스크롤 및 오버스크롤의 계약과 일치하도록 양의 원시 델타(30)로 다시 변환됩니다.
• 스크롤 후: 나머지 원시 델타가 파이프라인으로 다시 전달됩니다.
  • 중첩 스크롤 post-scroll은 10을 소비하고 20을 남깁니다.
  • 오버스크롤 효과는 마지막 20을 사용하여 늘이기 또는 빛나기와 같은 시각적 가장자리 효과를 유도하여 입력 델타를 0으로 완전히 해결합니다.

포인터 입력 델타 변환 참조

다음 표에서는 포인터 입력의 다양한 단계와 방향에서 입력 델타가 어떻게 서명되는지 설명합니다.

	원시 입력 델타	오버스크롤 효과	중첩 스크롤	가로 방향의 scrollableArea	가로 방향의 scrollableArea (반전됨)	세로 방향의 scrollableArea	세로 방향 (반전)의 scrollableArea
포인터가 위쪽으로 이동	부정적	부정적	부정적	해당 사항 없음	해당 사항 없음	긍정적	부정적
포인터가 아래로 이동함	긍정적	긍정적	긍정적	해당 사항 없음	해당 사항 없음	부정적	긍정적
포인터가 왼쪽으로 이동	부정적	부정적	부정적	양수 (RTL의 경우 음수)	음수 (RTL의 경우 양수)	해당 사항 없음	해당 사항 없음
포인터가 오른쪽으로 이동	긍정적	긍정적	긍정적	음수 (RTL의 경우 양수)	양수 (RTL의 경우 음수)	해당 사항 없음	해당 사항 없음