Listview ve RecyclerView Nedir?

DisserF · 23 Eki 2020

Merhaba ben DisserF bugün sizlere Listview ve RecyclerView nedir ondan bahsedicem.

İlk olarak Listview'den başlayalım.

ListView, belirlediğinmiz sütunları gösterip satır satır bilgi listeleyebileceğimiz bir form bileşenidir. Çalışma mantığı ListBox ile hemen hemen aynıdır. Tek farkı, bir tek sütun yerine istediğimiz kadar excell tarzı hücre belirleyebiliyor olmamız. Bununla beraber liste elemanlarına ikon ya da CheckBox ekleme gibi özellikleri de var. Yani CheckedListBox gibi de kullanılabilir.

ListView kullanmanın ilk adımı sütunları oluşturup boyutlarını belirlemek. Sütunları eklemeden önce görünebilmesi için görünüm modunu "detaylar" olarak ayarlayacağız.

Kod:

private vo-id Form1_Load(object sender, EventArgs e)
{
    listView1.View = View.Details;
    listView1.FullRowSelect = true;

    listView1.Columns.Add("Ad", 150);
    listView1.Columns.Add("Soyad", 150);
    listView1.Columns.Add("Meslek", 150);
}

Bir hücre seçildiğinde tüm satırın seçili hale gelmesi için FullRowSelect özelliğini aktif yaptık.

Yeni Kayıt Ekleme

Kayıt eklemek için TextBox'lardaki bilgileri bir diziye atıp o diziden ListViewItem -liste elemanı- üretip onu da listView1 içine ekledik.

Kod:

private **** button1_Click(object sender, EventArgs e)
{
    string ad = textBox1.Text;
    string soyad = textBox2.Text;
    string meslek = textBox3.Text;

    string[] bilgiler = { ad, soyad, meslek };

    listView1.Items.Add(new ListViewItem(bilgiler));

    textBox1.Clear();
    textBox2.Clear();
    textBox3.Clear();
}

Son olarak da Clear ile TextBox içlerine yazılanları temizledik.

Tüm Kayıtları Temizleme

Elemanları silmek için Items koleksiyonundaki Clear methodunu kullandık.

Kod:

private **** button3_Click(object sender, EventArgs e)
{
    listView1.Items.Clear();
}

Kayıt Sayısını Öğrenme

Yine Items koleksiyonundaki Count özelliği kayıtlı liste elemanı sayısını verir.

Kod:

private **** button4_Click(object sender, EventArgs e)
{
    int kayitSayisi = listView1.Items.Count;
    MessageBox.Show(kayitSayisi + " adet kayıt bilgisi var.");
}

Seçili Elemanı Silme

ListView içindeki SelectedItems koleksiyonu içinde o an seçili olan elemanları tutar. Bir döngü yardımıyla koleksiyonu dolaşıp tüm elemanları tek tek silebiliriz.

Kod:

private **** button2_Click(object sender, EventArgs e)
{
    int secimSayisi = listView1.SelectedItems.Count;

    foreach (ListViewItem bilgi in listView1.SelectedItems)
    {
        bilgi.Remove();
    }

    MessageBox.Show(secimSayisi + " adet kayıt silindi.");
}

Sadece işaretli olanları silme

Eğer sadece check atılmış olan elemanları silmek isterseniz önce Form1_Load olayında CheckBoxes özelliğini aktif yapmalısınız.

Kod:

listView1.CheckBoxes = true;

Ardından tıpkı seçili elemanlarda olduğu gibi CheckedItems koleksiyonundaki elemanları silmelisiniz.

Kod:

foreach (ListViewItem bilgi in listView1.CheckedItems)
{
    bilgi .Remove();
}

Kayda Resim Ekleme

Resim ekleyebilmek için önce bir ImageList oluşturup onu listenin SmallImageList özelliğine atamalısınız.

Kod:

private **** Form1_Load(object sender, EventArgs e)
{
    ImageList imageList1 = new ImageList();

    // Resimleri ekle
    imageList1.Images.Add("ikon1", Image.FromFile("C:\\Resimler\\ikon1.png"));
    imageList1.Images.Add("ikon2", Image.FromFile("C:\\Resimler\\ikon2.png"));
    imageList1.Images.Add("ikon3", Image.FromFile("C:\\Resimler\\ikon3.png"));

    listView1.SmallImageList = imageList1;
}

Daha sonra yeni eleman eklerden ImageKey özelliğini ImageList içinde belirlediğiniz resmin adı yapmalısınız.

Kod:

private **** button1_Click(object sender, EventArgs e)
{
    string ad = textBox1.Text;
    string soyad = textBox2.Text;
    string meslek = textBox3.Text;

    string[] bilgiler = { ad, soyad, meslek };

    ListViewItem eleman = new ListViewItem(bilgiler);
    eleman.ImageKey = "ikon1";

    listView1.Items.Add(eleman);
}

Android RecyclerView Nedir?

Android RecyclerView, içeriklerin sayfa yüklendikçe yüklenmesini sağlayan bir Android geliştirme özelliğidir. Android paging, pagination ve endless scrolling olarak da adlandırılmaktadır.

RecyclerView nasıl kullanılır?

1 - Öncelikle android studio açalım.
2 - Yeni bir proje oluşturalım. Kotlin dilin de.
3- <app>/build.gradle içerisini şu şekilde değiştirelim ve sync now tuşu ile senkronize edelim.

Kod:

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'androidx.appcompat:appcompat:1.1.0'
    implementation 'androidx.core:core-ktx:1.1.0'
    implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
    implementation 'androidx.recyclerview:recyclerview:1.1.0'
}

Şimdi sırası ile özelleştirilmiş liste elemanlarımızı ekleyelim. Önce normal liste elemanınız. Bu yükleme durumunun haricinde normal verilerimizi göstereceğimiz liste.(list_item_text_row.xml)

Kod:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="?actionBarSize"
        android:layout_height="match_parent"
        android:layout_margin="5dp"
        android:src="@mipmap/ic_launcher"/>

    <TextView
        android:id="@+id/list_item_text_row_textTitle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="@string/app_name"
        android:gravity="center|start"
        android:textStyle="bold"
        android:textSize="20sp"/>

</LinearLayout>

Şimdi yükleme durumunu göstereceğimiz liste tasarımını ekleyelim.(list_item_loading_row.xm)

Kod:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize">

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

</LinearLayout>

Liste tasarımlarımız bittiğine göre MainActivity tasarımını yapalım. Bu ekranda sadece RecyclerView olacak. (activity_main.xml)

Kod:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/activity_main_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

Tasarım kısmını bitirdik, devam edelim.

Öncelikle listemizde eleman olarak model ekleceğiz. O yüzden örnek model sınıfını oluşturalım. (Model.kt)

Kod:

class Model(val position: Int)

Şimdi sırası ile liste elemanlarını tanımlacağımız holderları yazalım. Önce loading holder. (HolderLoading.kt)

Kod:

import android.view.View
import androidx.recyclerview.widget.RecyclerView

class HolderLoading(view: View): RecyclerView.ViewHolder(view)

Burada progressBar var. Fakat tanımlamaya gerek yok. Bu yüzden burası sade. Şimdi sırada normal itemlerin olduğu sınıf. (HolderModel.kt)

Kod:

import android.view.View
import android.widget.TextView
import androidx.recyclerview.widget.RecyclerView

class HolderModel(view: View): RecyclerView.ViewHolder(view){
    val textTitle: TextView = view.findViewById(R.id.list_item_text_row_textTitle)
}

Burada TextView görünümünü tanımladık. Listeleme sırasında pozisyon bilgisini yazdıracağız. Şimdi sıra adaptörümüzde. (Adapter.kt)

Kod:

class Adapter(private val arrayList: ArrayList<Model?>): RecyclerView.Adapter<RecyclerView.ViewHolder>(){

    private val VIEW_TYPE_ITEM = 0 //Normal item
    private val VIEW_TYPE_LOADING = 1 //Yükleniyor

    override fun getItemViewType(position: Int): Int {
        if (arrayList[position] == null){ //Eğer model boş ise (arrayList.add(null) ile kullandık) yükleniyor
            return VIEW_TYPE_LOADING
        } else { //Değilse normal item
            return VIEW_TYPE_ITEM
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        if (viewType == VIEW_TYPE_ITEM){ //view type değerine göre görüntü layout'u ekliyoruz
            return HolderModel(LayoutInflater.from(parent.context).inflate(R.layout.list_item_text_row, parent, false))
        } else {
            return HolderLoading(LayoutInflater.from(parent.context).inflate(R.layout.list_item_loading_row, parent, false))
        }
    }

    override fun getItemCount(): Int {
        return arrayList.size
    }

    override fun onBindViewHolder(recyclerHolder: RecyclerView.ViewHolder, position: Int) {
        val model: Model? = arrayList[position]

        if (recyclerHolder is HolderLoading){ //Yükleniyor
            var holder: HolderLoading = recyclerHolder
            //Yükleniyor kısmı. progress bar burada
        } else if (recyclerHolder is HolderModel){ //Normal item
            var holder: HolderModel = recyclerHolder
            //burada işlem olarak text içeriğini değiştiriyoruz
            holder.textTitle.text = "Position : ${model?.position}"
        }
    }
}

Son olarak MainActivity.kt.

Kod:

class MainActivity : AppCompatActivity() {

    private val loadTime: Long = 1000 * 2L //yüklenme süresini 2 saniye olarak aldık
    private var isLoading: Boolean = false //Yüklenme işleminin başlamasını ve bitmesini kontrol eden bool değişkeni
    private var itemPosition: Int = 0 //pozisyon bilgisi

    private val arrayList: ArrayList<Model?> = ArrayList()
    private lateinit var layoutManager: LinearLayoutManager
    private lateinit var adapter: Adapter
    private lateinit var recyclerView: RecyclerView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        layoutManager = LinearLayoutManager(this@MainActivity)

        adapter = Adapter(arrayList)
        recyclerView = findViewById(R.id.activity_main_recyclerView)
        recyclerView.layoutManager = layoutManager
        recyclerView.adapter = adapter

        recyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener(){
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)
                var lastPosition: Int = layoutManager.findLastVisibleItemPosition() //Görünen son görünümün pozisyonunu alır
                var listSize: Int = arrayList.size //liste uzunluğu

                if (!isLoading && listSize == (lastPosition + 1)) { //eğer yüklenme işlemi yoksa ve liste en aşağıdaysa
                    addLoadMoreData() //yeni değerleri yükle
                    isLoading = true //yükleniypr
                }
            }
        })
        addItems()
    }

    private fun addLoadMoreData(){
        arrayList.add(null) //listeye boş bir görüntü model ekle. Bunu adapterda eğer boş ise yükleniyor anlamında kullanacağız
        adapter.notifyItemInserted(arrayList.size - 1) //adapter son itemi alıyor
        layoutManager.scrollToPosition(arrayList.size - 1) //listeyi kaydırıyoruz

        Handler().postDelayed({ //2 saniye sonra
            arrayList.removeAt(arrayList.size - 1) //yükleniyor progressBar item'ini siliyoruz
            adapter.notifyItemRemoved(arrayList.size) //son değerin silindiğini adaptera bildiriyoruz
            isLoading = false //Yüklenmiyor
            addItems() //yeni itemleri gönderiyoruz
        }, loadTime)
    }

    private fun addItems(){
        var i: Int = 0
        while (i < 20) {
            arrayList.add(Model(++itemPosition)) //itemleri ekliyor
            i++
        }
        adapter.notifyDataSetChanged() //listeyi yeniliyor
    }
}

İyi forumlar dilerim(z).

Profesör · 23 Eki 2020

Eline sağlık kardeşim

Listview ve RecyclerView Nedir?

DisserF

Üye

Profesör

Kadim Üye

Sosyal medya sayfalarımız