스크롤은 여러 단계로 나뉩니다. 각 단계에서 움직임을 사용하거나 이에 반응할 수 있도록 입력 델타는 일련의 단계를 통해 전달됩니다.
이 주기 전반에 걸쳐 사용 가능한 입력 델타와 사용된 입력 델타가 모든 단계에서 전달됩니다. 이렇게 하면 각 단계에서 스크롤 이벤트에 반응하거나, 이를 사용하거나, 수신하는 데 필요한 전체 컨텍스트가 제공됩니다.
그림 1에 나와 있는 것처럼 스크롤 프로세스는 정확히 이 순서를 따릅니다.
- 오버스크롤: 초기 입력 델타를 먼저 수신하여 오버스크롤이 먼저 반응할 수 있도록 합니다 (예: 활성 스트레치 효과를 완화).
- 중첩 스크롤 사전 스크롤: 스크롤 단계 전에 입력 델타에 반응할 수 있는 기회를 제공합니다. 이 단계에서는 일부 입력 델타가 사용되거나 앱 바 축소 또는 펼치기와 같은 UI 변경을 트리거하기 위해 모니터링될 수 있습니다.
- 입력 델타 변환: 레이아웃 방향 및 방향에 따라 원시 입력 델타의 부호를 조정하여 자연스러운 스크롤 동작을 보장합니다. 자세한 내용은 입력 델타 변환 섹션을 참고하세요.
- 스크롤: 이 단계에서는 스크롤 컨테이너 구성과 일치하도록 조정된 사용 가능한 미사용 입력 델타를 수신합니다. 일반적으로 이 델타를 사용하여 자체 스크롤 오프셋을 업데이트합니다.
- 원시 입력 델타로 되돌리기: 스크롤 단계에서 사용 가능한 델타와 사용된 델타를 원래 원시 입력 델타 부호로 되돌립니다.
- 중첩 스크롤 사후 스크롤: 이 단계는 기본 스크롤 단계가 완료된 후 반응하여 새로 업데이트된 사용 가능한 델타와 사용된 델타를 수신합니다. 남은 사용 가능한 입력을 사용하거나 방금 사용된 컨텍스트를 사용할 수 있습니다.
- 오버스크롤: 이 마지막 단계에서는 최종 사용 가능한 델타와 사용된 델타를 살펴봅니다. 이 단계에 도달하는 나머지 사용 가능한 입력은 일반적으로 스트레치 또는 글로우와 같은 가장자리 효과를 유도하는 데 사용되며, 이는 사용자가 스크롤 가능한 영역의 경계에 도달했음을 나타냅니다.
입력 델타 변환
포인터 입력 델타는 예상 계약과 일치하도록 스크롤 단계 전반에 걸쳐 부호 조정을 해야 합니다. 델타가 스크롤 단계에 도달하기 전에 스크롤 수정자는 방향, 레이아웃 방향, RTL 컨텍스트를 기반으로 입력 델타를 조정합니다. 이는 원시 입력이 화면에서 포인터의 물리적 픽셀 이동을 추적하기 때문에 발생합니다 (예: 아래로 이동하면 화면의 Y 좌표가 증가하여 양수 델타가 생성됨). 그러나 콘텐츠가 손가락과 함께 이동하는 '자연스러운 스크롤'을 구현하려면 아래로 드래그할 때 뷰포트가 콘텐츠 위로 위로 이동해야 하며, 이는 음수 스크롤 오프셋에 해당합니다.
마우스 휠 또는 터치패드와 같은 다른 입력 소스의 입력 델타는 스크롤 단계 전반에 걸쳐 변환되지 않습니다.
예: Modifier.horizontalScroll()을 사용하여 포인터가 오른쪽으로 이동
델타가 사용되고 변환되는 방식을 이해하려면 포인터가 오른쪽 으로 이동하는 동작을 매핑하는 그림 2를 참고하세요.
- 사전 스크롤: 동작은 100 의 양수 원시 입력 델타로 시작됩니다.
- 오버스크롤 은 이를 관찰하고 10 을 사용하여 90 을 남깁니다.
- 중첩 스크롤 사전 스크롤 은 상위 구성요소에 반응할 수 있는 기회를 제공하여 30 을 사용합니다. 나머지 원시 델타는 60 입니다.
- 변환 A: 스크롤 단계에 들어가기 전에
horizontalScroll는 나머지 양수 원시 델타 (60)를 음수 델타 (-60)로 반전합니다. 이렇게 하면 뷰포트가 왼쪽으로 이동하여 콘텐츠가 사용자의 손가락과 함께 오른쪽으로 이동하는 것처럼 보입니다. - 스크롤: 대상 스크롤 가능한 구성요소는 이 변환된 델타의 일부를 사용하여 스크롤 오프셋을 업데이트합니다. 이 예에서는 -30을 사용하여 -30을 사용하지 않은 상태로 둡니다.
- 변환 B: 사용되지 않은 스크롤 델타 (-30) 는 중첩 스크롤 및 오버스크롤의 계약과 일치하도록 다시 양수 원시 델타 (30) 로 변환됩니다.
- 사후 스크롤: 나머지 원시 델타는 파이프라인 위로 다시 전달됩니다.
- 중첩 스크롤 사후 스크롤 은 10 을 사용하여 20 을 남깁니다.
- 오버스크롤 효과 는 최종 20 을 사용하여 스트레치 또는 글로우와 같은 시각적 가장자리 효과를 유도하여 입력 델타를 0 으로 완전히 해결합니다.
포인터 입력 델타 변환 참조
다음 표에서는 포인터 입력의 다양한 단계와 방향에서 입력 델타에 부호가 지정되는 방식을 간략하게 설명합니다.
| 원시 입력 델타 | 오버스크롤 효과 | 중첩 스크롤 | 가로 방향의 scrollableArea |
가로 방향의 scrollableArea (반전됨) |
세로 방향의 scrollableArea |
세로 방향의 scrollableArea (반전됨) |
|
|---|---|---|---|---|---|---|---|
| 포인터가 위로 이동 | 음수 | 음수 | 음수 | 해당 사항 없음 | 해당 사항 없음 | 양수 | 음수 |
| 포인터가 아래로 이동 | 양수 | 양수 | 양수 | 해당 사항 없음 | 해당 사항 없음 | 음수 | 양수 |
| 포인터가 왼쪽 으로 이동 | 음수 | 음수 | 음수 | 양수 (RTL의 경우 음수) | 음수 (RTL의 경우 양수) | 해당 사항 없음 | 해당 사항 없음 |
| 포인터가 오른쪽 으로 이동 | 양수 | 양수 | 양수 | 음수 (RTL의 경우 양수) | 양수 (RTL의 경우 음수) | 해당 사항 없음 | 해당 사항 없음 |