Jetpack Oluşturma ile Bölüm Tabanlı Listeler İçin İç İçe Otomatik Kaydırma | tarafından Heba Mekawi | Tem, 2022

Jetpack Oluşturma ile Bölüm Tabanlı Listeler İçin İç İçe Otomatik Kaydırma |  tarafından Heba Mekawi |  Tem, 2022
fotoğrafı çeken Nathana Rebouças üzerinde Sıçramayı kaldır

Menü öğelerini birden fazla yiyecek ve içecek uygulamasında göstermek, birden çok liste etkileşimi için en iyi kullanım örneklerinden biridir, Jetpack Compose ile basit bir uygulama oluşturalım 🚀

Aşağıdaki noktaların tümünü ele alacağız:

  • Bölümlere göre etiketlenmiş menü öğeleri listesini göster
  • Bölüm listesini göster ve seçili olanı vurgula
  • Menü öğeleri listesi kaydırmada, görüntülenen bölümle bölümler listesini vurgulayın
  • Bölüm adına tıkladığınızda, menü öğeleri listesi bölüm konumuna atlayın

Bölümlere göre etiketlenmiş menü öğeleri listesini göster

Bu, bölüm başlığına göre etiketlenmiş ve dizine alınmış tüm menü öğeleri için basit bir listedir.

  • öğelerListeDurumu bir TembelListState daha sonra tartışılacak olan otomatik kaydırmayı işlemek için kullanılacak
  • onPostScroll çağrılan menü öğeleri listesindeki bir kaydırma eylemini algılamak için kullanılır. yuvalanmışScroll değiştirici

Ve bu MenuItemViewbölüm öğelerini göstermek için yalnızca basit bir görünüm:

Bölüm listesini göster ve seçili olanı vurgula

Bu, bölüm başlıklarını art arda gösteren ve kullanılan basit bir listedir. SectionTextView seçilen bölümü göstermek ve vurgulamak için:

SectionTextView ayrıca seçilen bölüm öğesine bir alt çizgi gösterir, alt çizgi genişliği metin Genişliği ölçülebilmesi için her zaman metin boyutuyla eşleşmelidir onGloballyPositioned değiştirici:

Menü öğeleri listesi kaydırmada, görüntülenen bölümle bölümler listesini vurgulayın

Her iki liste etkileşimini de ele alacak ana ana görünüm MenuView

Geçerli seçimi tutacak ve menü öğeleri listesi görünümünden onPostScroll olayını işleyecektir.

  • Seçili bölüm dizinini güncelle
  • Seçili bölüm başlığı konumuna bölümler listesinde ilerleyin

Bölüm adına tıkladığınızda, bölüm menüsü öğeleri listesi konumuna atlayın

MenuView bölüm başlığı tıklama olayını da işleyecek

  • Seçili bölüm dizinini güncelle
  • Öğeler listesinde seçilen bölüm konumuna ilerleyin
  • Seçili bölüm başlığı konumuna bölümler listesinde ilerleyin

Sonunda MenuView şöyle olacak:

Bu kadar! Başardın! 💪

Eksik bir şey görüyor musun? lütfen yorumlayın!

Okuduğunuz için teşekkürler, bir sonraki yazıda görüşmek üzere 😊

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.