Android listviewlerin özelleştirilmesi (custom listview)

Daha önce listviewlerin kullanımına değinmiştik. Listviewler kendi içinde satır satır textviewlerden oluşur. Fakat biz listemizin her satırında isteğimize göre imageview, textview ve diğer view elemanlarını kullanabiliriz. Şimdi ise bu işlemleri nasıl yapabileceğimize değineceğiz. Bunu Osmanlı padişahlarının listesini göstereceğimiz bir uygulama yaparak anlatmak istiyorum. Uygulamanın son görüntüsü aşağıdaki gibi olacaktır. 

 

Görüldüğü üzere her satırda sol tarafra bir imageview ile padişahların resimleri ve sağda padişahların isimlerini ve saltanat sürelerini gösteren birer textview nesnesi bulunmaktadır. Uygulamayı tasarlarken takip edeceğimiz işlemler şunlardır:

  1. Listview nesnesini oluşturma
  2. Her bir satırı düzenleme
  3. Kullanılacak veriler için model sınıfını oluşturma
  4. Custom adapteri tanımlamak

1. Listview nesnesini oluşturma

Listemizi tanımlayacağımız main_activity.xml dosyamızı res/layout klasörü içerisinde oluşturuyoruz ve RelativeLayout içerisinde sadece bir ListView nesnesi oluşturuyoruz ve id değerini  main_activity_listview_padisahlar olarak veriyoruz.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ahmet.com.customlistview.MainActivity">

    <ListView
        android:id="@+id/main_activity_listview_padisahlar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></ListView>
    
</RelativeLayout>

Tasarım görüntüsü aşağıdaki gibi olacaktır. 

2. Her bir satırı düzenleme

Her bir satırı düzenleyeceğimiz list_row.xml dosyamızı res/layout dizininde oluşturuyoruz. Satırın tasarımında bir imageview ve 2 tane de textview nesnesi kullanıyoruz. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="2dp"
    android:background="@color/colorPrimary"
    android:padding="5dp">

    <ImageView
        android:id="@+id/list_row_imageview_padisah"
        android:layout_width="70dp"
        android:layout_height="100dp"
        android:src="@mipmap/mehmed_2_7" />

    <TextView
        android:id="@+id/list_row_textview_sure"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/list_row_imageview_padisah"
        android:layout_alignLeft="@+id/list_row_textview_isim"
        android:layout_alignStart="@+id/list_row_textview_isim"
        android:layout_marginBottom="15dp"
        android:text="TextView"
        android:textColor="?android:attr/colorPressedHighlight"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/list_row_textview_isim"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="17dp"
        android:layout_marginStart="17dp"
        android:layout_marginTop="11dp"
        android:layout_toRightOf="@+id/list_row_imageview_padisah"
        android:text="TextView"
        android:textColor="?android:attr/colorPressedHighlight"
        android:textSize="30sp" />

</RelativeLayout>

3. Kullanılacak veriler için model sınıfını oluşturma

Verilerimizi yukarıda oluşturduğumuz satır layoutunda gösterebilmek için bir model classı yazıyoruz. Bize lazım olan bilgiler padişahın ismi, resmi ve tahtta kalma süresidir. Padisah.java sınıfımızı oluşturuyoruz. Sınıfın değişkenlerini, yapıcı metodumuzu ve getter, setter metodlarımızı aşağıda gözüktüğü gibi oluşturuyoruz.

package ahmet.com.customlistview;

public class Padisah {

    private String isim;
    private String sure;
    private int resimId;

    public Padisah(String isim, String sure, int resimId) {
        this.isim = isim;
        this.sure = sure;
        this.resimId = resimId;
    }

    public String getIsim() {
        return isim;
    }

    public void setIsim(String isim) {
        this.isim = isim;
    }

    public String getSure() {
        return sure;
    }

    public void setSure(String sure) {
        this.sure = sure;
    }

    public int getResimId() {
        return resimId;
    }

    public void setResimId(int resimId) {
        this.resimId = resimId;
    }
}

Burada isim ve süre değişkenlerimizi String, resimId değişkenimizi ise integer(tamsayı) tipinde oluşturduğumuza dikkat edelim. 

padişah resimlerini res/mipmap/ dizininde saklayacağımız için, erişirken de tam sayı tipinde olan id değerleriyle erişim sağlayacağız. Bu yüzden resimId değişkenimizi integer tipinde tanımlıyoruz.

model sınıfımızı oluşturduktan ve gerekli resimleri res/mipmap/ dizinine kopyaladıktan sonra MainActivity.java sınıfımızda verilerimizi oluşturuyoruz.

package ahmet.com.customlistview;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    ListView liste;
    final ArrayList<Padisah> padisahlar = new ArrayList<Padisah>();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main_activity);

        liste = (ListView) findViewById(R.id.main_activity_listview_padisahlar);

        padisahlar.add(new Padisah("I. Osman", "27 yıl", R.mipmap.osman_1_1));
        padisahlar.add(new Padisah("I. Orhan", "35 yıl", R.mipmap.orhan_1_2));
        padisahlar.add(new Padisah("I. Murad", "29 yıl", R.mipmap.murad_1_3));
        padisahlar.add(new Padisah("I. Bayezid", "13 yıl", R.mipmap.bayezid_1_4));
        padisahlar.add(new Padisah("I. Mehmed", "8 yıl", R.mipmap.mehmed_1_5));
        padisahlar.add(new Padisah("II. Murad", "23 yıl + 5 yıl", R.mipmap.murad_2_6));
        padisahlar.add(new Padisah("II. Mehmed", "3 yıl + 30 yıl", R.mipmap.mehmed_2_7));
        padisahlar.add(new Padisah("II. Bayezid", "31 yıl", R.mipmap.bayezid_2_8));
        padisahlar.add(new Padisah("I. Selim", "8 yıl", R.mipmap.selim_1_9));
        padisahlar.add(new Padisah("I. Süleyman", "46 yıl", R.mipmap.suleyman_1_10));
        padisahlar.add(new Padisah("II. Selim", "8 yıl", R.mipmap.selim_2_11));
        padisahlar.add(new Padisah("III. Murad", "21 yıl", R.mipmap.murad_3_12));
        padisahlar.add(new Padisah("III. Mehmed", "8 yıl", R.mipmap.mehmed_3_13));
        padisahlar.add(new Padisah("I. Ahmed", "14 yıl", R.mipmap.ahmed_1_14));
        padisahlar.add(new Padisah("I. Mustafa", "1 yıl + 1 yıl", R.mipmap.mustafa_1_15));
        padisahlar.add(new Padisah("II. Osman", "4 yıl", R.mipmap.osman_2_16));
        padisahlar.add(new Padisah("IV. Murad", "17 yıl", R.mipmap.murad_4_17));
        padisahlar.add(new Padisah("İbrahim", "8 yıl", R.mipmap.ibrahim_1_18));
        padisahlar.add(new Padisah("IV. Mehmed", "39 yıl", R.mipmap.mehmed_4_19));
        padisahlar.add(new Padisah("II. Süleyman", "4 yıl", R.mipmap.suleyman_2_20));
        padisahlar.add(new Padisah("II. Ahmed", "4 yıl", R.mipmap.ahmed_2_21));
        padisahlar.add(new Padisah("II. Mustafa", "8 yıl", R.mipmap.mustafa_2_22));
        padisahlar.add(new Padisah("III. Ahmed", "27 yıl", R.mipmap.ahmed_3_23));
        padisahlar.add(new Padisah("I. Mahmud", "24 yıl", R.mipmap.mahmud_1_24));
        padisahlar.add(new Padisah("III. Osman", "3 yıl", R.mipmap.osman_3_25));
        padisahlar.add(new Padisah("III. Mustafa", "17 yıl", R.mipmap.mustafa_3_26));
        padisahlar.add(new Padisah("I. Abdülhamid", "15 yıl", R.mipmap.abdulhamid_1_27));
        padisahlar.add(new Padisah("III. Selim", "18 yıl", R.mipmap.selim_3_28));
        padisahlar.add(new Padisah("IV. Mustafa", "1 yıl", R.mipmap.mustafa_4_29));
        padisahlar.add(new Padisah("II. Mahmud", "31 yıl", R.mipmap.mahmud_2_30));
        padisahlar.add(new Padisah("Abdülmecid", "22 yıl", R.mipmap.abdulmecid_1_31));
        padisahlar.add(new Padisah("Abdülaziz", "15 yıl", R.mipmap.abdulaziz_1_32));
        padisahlar.add(new Padisah("V. Murad", "93 gün", R.mipmap.murad_5_33));
        padisahlar.add(new Padisah("II. Abdülhamid", "33 yıl", R.mipmap.abdulhamid_2_34));
        padisahlar.add(new Padisah("V. Mehmed", "9 yıl", R.mipmap.mehmed_5_35));
        padisahlar.add(new Padisah("VI. Mehmed", "4 yıl", R.mipmap.mehmed_6_36));

        PadisahAdapter padisahAdapter = new PadisahAdapter(this, padisahlar);
        if (liste != null) {
            liste.setAdapter(padisahAdapter);
        }
    }
}

padisahlar isminde bir arrayList oluşturuyoruz ve bu arrayListe sırasıyla Padisah sınıfından ürettiğimiz nesneleri sırasıyla ekliyoruz. Ve daha önce oluşturduğumuz ListView nesnesini liste değişkenine bağlıyoruz. En sonunda ise bu liste değişkenimizi biraz sonra yazacağımız PadisahAdapter isimli custom adapterimiz aracılığıyla dolduruyoruz. 

4. Custom adapteri tanımlamak

Bu bölümde listemizi doldurmamıza yardımcı olan custom adapterimizi tanımlıyoruz. Bu sınıfı BaseAdapter sınıfından türetiyor ve override etmemiz gereken 4 metodu aşağıdaki gibi yazıyoruz. Bu metotlar şunlardır: 

  • getCount(): Listemizdeki eleman sayısını döndürür. Bir başka deyişle gösterilecek satır sayısını döndürür. int değer döndürür. 
  • getItem(int position): Position ile belirtilen satırdaki nesneyi döndürür. object tipinde değer döndürür. 
  • getItemId(int position): Position ile belirtilen satırın id değerini döndürür. long tipinde değer döndürür. 
  • getView(int position, View convertView, ViewGroup parent): View değer döner. position ile sırası belirtilen satır için bir View döndürür.
package ahmet.com.customlistview;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;

public class PadisahAdapter extends BaseAdapter {

    private LayoutInflater mInflater;
    private ArrayList<Padisah> padisahArrayList;

    public PadisahAdapter(Activity activity, ArrayList<Padisah> padisahArrayList) {

        this.mInflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.padisahArrayList = padisahArrayList;
    }

    @Override
    public int getCount() {
        return padisahArrayList.size();
    }

    @Override
    public Object getItem(int position) {
        return padisahArrayList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        convertView = mInflater.inflate(R.layout.list_row, null);
        TextView padisahIsim = (TextView) convertView.findViewById(R.id.list_row_textview_isim);
        TextView padisahSure = (TextView) convertView.findViewById(R.id.list_row_textview_sure);
        ImageView padisahResim = (ImageView) convertView.findViewById(R.id.list_row_imageview_padisah);
        Padisah padisah = padisahArrayList.get(position);
        padisahIsim.setText(padisah.getIsim());
        padisahSure.setText(padisah.getSure());
        padisahResim.setImageResource(padisah.getResimId());
        return convertView;
    }
}
ETİKETLER
androidlistviewcustom listviewözelleştirilmiş listviewcustom adapterözel adaptör
Öncekİ Yazı

Android listview kullanımı

Sonrakİ Yazı

Php dizi fonksiyonları-1

İlgili Yazılar