Memahami fase scroll

Scrolling dibagi menjadi beberapa fase. Delta input dikirim melalui urutan fase untuk memastikan setiap fase memiliki peluang untuk menggunakan atau bereaksi terhadap pergerakan.

Selama siklus ini, delta input yang tersedia dan delta input yang digunakan akan diteruskan di setiap langkah. Hal ini memberi setiap fase konteks lengkap yang diperlukan untuk bereaksi, menggunakan, atau memproses peristiwa scroll.

Seperti yang diilustrasikan dalam Gambar 1, proses scrolling mengikuti urutan yang sama:

1. Overscroll: Menerima delta input awal terlebih dahulu, yang memberi overscroll peluang untuk bereaksi terlebih dahulu (misalnya, dengan melonggarkan efek peregangan aktif).
2. Scroll bertingkat pra-scroll: Memberikan peluang untuk bereaksi terhadap delta input sebelum fase Scroll. Pada fase ini, beberapa delta input mungkin digunakan, atau mungkin hanya dipantau untuk memicu perubahan UI, seperti menciutkan atau memperluas panel aplikasi.
3. Transformasi delta input: Menyesuaikan tanda delta input mentah berdasarkan orientasi dan arah tata letak untuk memastikan perilaku scroll yang alami. Untuk mengetahui informasi selengkapnya, lihat bagian Transformasi delta input
4. Scroll: Fase ini menerima delta input yang tersedia dan tidak digunakan yang disesuaikan agar sesuai dengan konfigurasi penampung scroll. Biasanya, delta ini digunakan untuk memperbarui offset scroll-nya sendiri.
5. Kembalikan ke delta input mentah: Mengembalikan delta yang tersedia dan digunakan dari fase Scroll ke tanda delta input mentah asli.
6. Scroll bertingkat pasca-scroll: Fase ini bereaksi setelah fase scroll utama selesai, menerima delta yang tersedia dan digunakan yang baru diperbarui. Fase ini dapat menggunakan input yang tersedia yang tersisa, atau menggunakan konteks dari input yang baru saja digunakan.
7. Overscroll: Fase terakhir ini melihat delta yang tersedia dan digunakan terakhir. Input yang tersedia yang tersisa dan mencapai tahap ini biasanya digunakan untuk mendorong efek tepi, seperti peregangan atau cahaya, yang menunjukkan bahwa pengguna telah mencapai batas area yang dapat di-scroll.

Transformasi delta input

Delta input pointer memerlukan penyesuaian tanda di seluruh fase scroll agar sesuai dengan kontrak yang diharapkan. Sebelum delta mencapai fase Scroll, pengubah scroll menyesuaikan delta input berdasarkan orientasi, arah tata letak, dan konteks RTL. Hal ini terjadi karena input mentah melacak pergerakan piksel fisik pointer di layar (misalnya, bergerak ke bawah akan meningkatkan koordinat Y layar, sehingga menghasilkan delta positif). Namun, untuk mencapai "scroll alami" saat konten bergerak dengan jari Anda, menarik ke bawah berarti area pandang harus bergeser ke atas konten, yang sesuai dengan offset scroll negatif.

Delta input dari sumber input lain, seperti roda mouse atau touchpad, tidak diubah di seluruh fase scroll.

Contoh: Pointer bergerak ke kanan menggunakan Modifier.horizontalScroll()

Untuk memahami cara delta digunakan dan diubah, lihat Gambar 2, yang memetakan gestur saat pointer bergerak ke kanan.

• Pra-scroll: Gestur dimulai dengan delta input mentah positif sebesar 100.
  • Overscroll mengamati hal ini dan menggunakan 10, sehingga tersisa 90.
  • Scroll bertingkat pra-scroll memberi komponen induk peluang untuk bereaksi, menggunakan 30. Delta mentah yang tersisa adalah 60.
• Transformasi A: Sebelum memasuki fase Scroll, horizontalScroll membalikkan delta mentah positif yang tersisa (60) menjadi delta negatif (-60). Hal ini memastikan area pandang bergeser ke kiri sehingga konten tampak bergerak ke kanan bersama jari pengguna.
• Scroll: Komponen yang dapat di-scroll target menggunakan sebagian delta yang diubah ini untuk memperbarui offset scroll-nya. Dalam contoh ini, komponen tersebut menggunakan -30, sehingga -30 tidak digunakan.
• Transformasi B: Delta scroll yang tidak digunakan (-30) dikonversi kembali menjadi delta mentah positif (30) agar sesuai dengan kontrak scroll bertingkat dan overscroll.
• Pasca-scroll: Delta mentah yang tersisa diteruskan kembali ke pipeline.
  • Scroll bertingkat pasca-scroll menggunakan 10, sehingga tersisa 20.
  • Efek overscroll menggunakan 20 terakhir untuk mendorong efek tepi visual, seperti peregangan atau cahaya, yang sepenuhnya menyelesaikan delta input menjadi 0.

Referensi transformasi delta input pointer

Tabel berikut menguraikan cara delta input ditandatangani di berbagai fase dan arah untuk input pointer.

	Delta input mentah	Efek overscroll	Scroll bertingkat	scrollableArea dengan orientasi horizontal	scrollableArea dengan orientasi horizontal (dibalik)	scrollableArea dengan orientasi vertikal	scrollableArea dengan orientasi vertikal (dibalik)
Pointer bergerak KE ATAS	Negatif	Negatif	Negatif	T/A	T/A	Positif	Negatif
Pointer bergerak KE BAWAH	Positif	Positif	Positif	T/A	T/A	Negatif	Positif
Pointer bergerak KE KIRI	Negatif	Negatif	Negatif	Positif (Negatif untuk RTL)	Negatif (Positif untuk RTL)	T/A	T/A
Pointer bergerak KE KANAN	Positif	Positif	Positif	Negatif (Positif untuk RTL)	Positif (Negatif untuk RTL)	T/A	T/A