Memahami fase scroll

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

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

Diagram siklus scroll yang menampilkan fase scroll peristiwa scroll pengguna
Gambar 1. Diagram siklus scroll yang menampilkan fase scroll peristiwa scroll pengguna.

Seperti yang diilustrasikan pada Gambar 1, proses men-scroll mengikuti urutan yang tepat ini:

  1. Overscroll: Menerima delta input awal terlebih dahulu, yang memberi overscroll kesempatan untuk bereaksi terlebih dahulu (misalnya, dengan melonggarkan efek peregangan aktif).
  2. Pra-scroll scroll bertingkat: Memberikan peluang untuk bereaksi terhadap input delta sebelum fase Scroll. Pada fase ini, beberapa delta input mungkin digunakan, atau hanya dipantau untuk memicu perubahan UI, seperti menciutkan atau meluaskan panel aplikasi.
  3. Ubah delta input: Menyesuaikan tanda delta input mentah berdasarkan orientasi dan arah tata letak untuk memastikan perilaku scrolling yang alami. Untuk mengetahui informasi selengkapnya, lihat bagian Transformasikan delta input.
  4. Scroll: Fase ini menerima delta input yang tersedia dan belum digunakan yang disesuaikan agar cocok dengan konfigurasi penampung scroll. Biasanya menggunakan delta ini untuk memperbarui offset scroll-nya sendiri.
  5. Kembali ke delta input mentah: Mengembalikan delta yang tersedia dan digunakan dari fase Scroll ke tanda delta input mentah asli.
  6. Scroll bertingkat setelah scroll: Fase ini bereaksi setelah fase scroll utama selesai, menerima delta yang tersedia dan digunakan yang baru diperbarui. Model ini dapat menggunakan input yang tersedia yang tersisa, atau menggunakan konteks dari input yang baru saja digunakan.
  7. Overscroll: Fase terakhir ini melihat delta akhir yang tersedia dan digunakan. Input yang tersisa dan tersedia yang 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.

Mengubah delta input

Delta input penunjuk 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 gerakan piksel fisik kursor di layar (misalnya, bergerak ke bawah akan meningkatkan koordinat Y layar, sehingga menghasilkan delta positif). Namun, untuk mencapai "scrolling alami" di mana konten bergerak bersama jari Anda, menarik ke bawah berarti area tampilan harus bergeser ke atas di 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()

Grafik yang memetakan gestur saat pointer bergerak ke kanan
Gambar 2. Grafik yang memetakan gestur saat pointer bergerak ke kanan.

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

  • Sebelum scroll: Gestur dimulai dengan delta input mentah positif sebesar 100.
    • Overscroll mengamati ini dan menggunakan 10, sehingga menyisakan 90.
    • Pra-scroll bertingkat memberi komponen induk kesempatan 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 tampilan bergeser ke kiri sehingga konten tampak bergerak ke kanan bersama jari pengguna.
  • Scroll: Komponen yang dapat di-scroll target menggunakan sebagian delta yang ditransformasikan ini untuk memperbarui offset scroll-nya. Dalam contoh ini, -30 dikonsumsi, sehingga -30 tidak dikonsumsi.
  • Transformasi B: Delta scroll yang belum digunakan (-30) dikonversi kembali menjadi delta mentah positif (30) agar sesuai dengan kontrak scroll dan scroll berlebih bertingkat.
  • Setelah scroll: Delta mentah yang tersisa dikirim 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 ke 0.

Referensi transformasi delta input pointer

Tabel berikut menguraikan cara menandatangani delta input di berbagai fase dan arah untuk input penunjuk.

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 UP Negatif Negatif Negatif T/A T/A Positif Negatif
Pointer bergerak DOWN 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