RecycleView’ı Uygulamak için Adım Adım Kılavuzlar

Android bu RecycleView bağdaştırıcı mimarisi sınıf diyagramı. Bunu çiziyorum çünkü genel resmi anlamama yardımcı oluyor.

1. Uygulayın ve oluşturun ViewModel RecycleView’ı tutmak için ItemData

Bu sadece bir geri dönüşüm görünümü örneğidir ItemData. Basitlik için, yalnızca bir veriyi tutar, o da id.

data class ItemData (val id : Int)

mockItems() sahte veri oluşturmak için kullanılır. Pratikte, veriler ya uzak ya da yerel veri kaynağı aracılığıyla depodan geliyor olabilir.

class MainViewModel : ViewModel() {
    private val _items = MutableLiveData<List<ItemData>>()
    val items: LiveData<List<ItemData>>
        get() = _items

    init {
        mockItems()
    }

    private fun mockItems() {
        val itemDataList = mutableListOf<ItemData>()

        for(count in 1..100) {
            val data = ItemData(id = count)
            itemDataList.add(data)
        }
        _items.postValue(itemDataList)
    }
}

İçinde MainFragmentoluştur ViewModel. Bir önceki mesajıma bakın – ViewModel Oluşturmanın Önerilen Yolları

private val viewModel: MainViewModel by viewModels()

2. RecycleView’ı uygulayın item.xml Yerleşim

item.xml içindeki tek bir unsuru temsil eder. RecycleView.

Düzeni güncellemeden önce, bağlanma verileri uygulamanızda build.gradle.

buildFeatures {  
    dataBinding true  
}

içine veri değişkeni ekleyin item.xmlEkle TextView ve atamak itemData.Id için android:text bağlanmak.

<?xml version="1.0" encoding="utf-8"?>  
<layout 
    xmlns:android="http://schemas.android.com/apk/res/android"  
    xmlns:app="http://schemas.android.com/apk/res-auto"  
    xmlns:tools="http://schemas.android.com/tools">  

    <data>  
        <variable 
            name="itemData"  
            type="com.example.android.recycleviewdemo.ui.main.ItemData" />  
    </data>  

    <androidx.constraintlayout.widget.ConstraintLayout  
         android:layout_width="match_parent"  
         android:layout_height="wrap_content">  

        <TextView  android:id="@+id/itemId"  
             android:layout_width="wrap_content"  
             android:layout_height="wrap_content"  
             android:text="@{Integer.toString(itemData.id)}" 
             android:textAppearance="@style/TextAppearance.AppCompat.Large"  
             android:textSize="34sp"  
             android:textStyle="bold"  
             app:layout_constraintBottom_toBottomOf="parent"  
             app:layout_constraintEnd_toEndOf="parent"  
             app:layout_constraintStart_toStartOf="parent"  
             app:layout_constraintTop_toTopOf="parent"  
             tools:text="1" />  
    </androidx.constraintlayout.widget.ConstraintLayout>  
</layout>

3. Ekle RecycleView içine MainFragment Yerleşim

Ekle viewModel veri değişkeni, ekle RecycleView (kullanır LinearLayoutManager).

<?xml version="1.0" encoding="utf-8"?>

<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools">

    <data>
        <variable
            name="viewModel"
            type="com.example.android.recycleviewdemo.ui.main.MainViewModel" />
    </data>

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context=".ui.main.MainFragment">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            tools:listitem="@layout/item"/>

        </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

4. UygulayınItemViewHolder uzanan RecycleView.ViewHolder

Uygula bindData() fonksiyon bağlamak itemData içine item düzen görünümü.

class ItemViewHolder(
    private val binding: ItemBinding
) : RecyclerView.ViewHolder(binding.root) {

    private lateinit var _itemData: ItemData

    fun bindData(itemData: ItemData) {
        _itemData = itemData
        binding.itemData = _itemData
        binding.executePendingBindings()
    }
}

5. Uygulayın ItemDiffCallback tek nesne

Bu, oluşturmak için bir sonraki adımda gereklidir. RecycleViewAdapter

object ItemDiffCallback : DiffUtil.ItemCallback<ItemData>() {
    override fun areItemsTheSame(oldItem: ItemData, newItem: ItemData): Boolean {
        return oldItem.id == newItem.id
    }

    override fun areContentsTheSame(oldItem: ItemData, newItem: ItemData): Boolean {
        return (oldItem == newItem)
    }
}

6. Uygulayın RecycleViewAdapter uzanan ListAdapter

Kapsamlar ListAdapter<ItemData, ItemViewHolder> ve içinden geçen ItemDiffCallbackuygulamak onCreateViewHolder() ve onBindViewHolder() fonksiyonlar.

class RecycleViewAdapter()
    : ListAdapter<ItemData, ItemViewHolder> (ItemDiffCallback) {

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ItemViewHolder {

        val itemBinding = ItemBinding.inflate(
            LayoutInflater.from(parent.context),
            parent, false)

        return ItemViewHolder(itemBinding)
    }

    override fun onBindViewHolder(holder: ItemViewHolder, position: Int) {
        holder.bindData(getItem(position))
    }
}

7. Oluştur RecycleViewAdapter ve onu atayın RecycleView içinde onCreateView() parça

Ayrıca şunları da gözlemlemeniz gerekir: viewModel.item canlı veri ve çağrı ListAdapter.submitList()

override fun onCreateView(
    inflater: LayoutInflater, container: ViewGroup?,
    savedInstanceState: Bundle?
): View {

    val binding = MainFragmentBinding.inflate(inflater)

    val adapter = RecycleViewAdapter()
    binding.recyclerView.adapter = adapter

    viewModel.items.observe(viewLifecycleOwner, { items ->
        adapter.submitList(items)
    })

    return binding.root
}

Bu kadar! Tamamdır!

Referanslar

Ayrıca bakınız