Android Programlama 7.1 -> Custom ListView

CUSTOM LISTVIEW

Bir önceki blog yazımızda listView yapısını ve bir diziyi veri kaynağı olarak gösterip listenin elemanlarını doldurmayı görmüştük.

Bu yazımızda ise custom listView yapısını inceleyeceğiz. Daha önceden de söylediğimiz gibi listView içerisinde satır satır textView bulunduruyordu bu düzen sıradan bir listView için geçerliydi. Biz bugün sizinle kendi düzen ve tasarımımıza özgü bir listView düzenleyeceğiz.

Şimdi adım adım listView tasarımı yapalım. Projemizin .xml kısmında bir listView oluşturup ID atayalım. 

İkinci adım olarak olulturduğumuz listView in satır düzenini gerçekleştirelim. Bunun için yeni bir xml dosyası oluşturuyoruz. custom_xml dosyası içersinde bir imageView ve textView oluşturuyoruz.

 <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="18dp"
        android:layout_marginStart="53dp"
        android:layout_marginTop="80dp"
        android:layout_marginEnd="134dp"
        android:text="TextView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/imageView"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="120dp"
        android:layout_height="120dp"
        android:layout_marginStart="37dp"
        android:layout_marginTop="43dp"
        android:layout_marginEnd="53dp"
        android:layout_marginBottom="560dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/textView"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.25"
        tools:srcCompat="@tools:sample/avatars" />

Şimdi bu oluşturduğumuz custom_xml dosyasını listView'in birer satırı olarak göstereceğiz. Bunun için inflating işlemine başburacağız.

3. adım olarak daha önce sadece string yapıda veriler içeren basit bir listview tasarlamıştık.Şimdi ise kendi oluşturduğumuz düzendeki verileri kullanacağız.
Şimdi bir satırın tasarımına ve nasıl oluşturulduğuna bakalım. Satırın sol tarafında şehrin simgesi sağ tarafında şehrin adı olacak şekilde tasarımı yapalım. Bu iki veriyi temsil eden bir sınıf oluşturmalıyız. OPP mantığında buna model sınıflar denmektedir.

package com.example.customlist;

public class sehirler {
    private String name;
     private int image;
    public sehirler(String name, int image) {
        this.name = name;
        this.image = image;
    }
    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public int getImage() {
        return image;
    }

    public void setImage(int image) {
        this.image = image;
    }



}

Burada oluşturduğumuz constructor ile bu sınıftan üretilecek nesneler için bir isim bir de image parametresi atamış olduk.

4. adım olarak listede görüntülenecek verileri oluşturacağız. Bunun için içini "sehirler" nesneleriyle dolduracağımız bir ArrayList kullanmamız gerekmektedir. Simdi MainActivity dosyasında bir ArrayList oluşturalım.

Şimdi de en önemli adım olan 5. adıma geldik burada yine listView içerisine veri atayabilmek için bir adapter kullanacağız. Custom bir adapter oluşturabilmek için Android SDK da yer alan BaseAdapter sınıfını extends edeceğiz. Bu sınıftan türettiğimiz sınıfların override etmesi gereken dört metod vardır.

• getCount() -> Integer değer döndürür ve ListView da gösterilecek satır sayısını ifade eder.

• getItem(int position) -> Object değer döndürür. Position 'ı verilen satıra denk gelen nesneyi döndürür ve bu nesne satır olarak gösterilecek nesnedir.
•  
• getItemId(int position) -> Long değer döndürür. Position  ile sırası belirtilen satırın  ID sini döndürür  Veri tabanı işlemlerinde gereklidir.

• getView(int position, View convertview, ViewGroup parent) -> View değer döndürür. Position ile sırası belirtilen satır için bir view döndürür. Bu metot içindeyken her satır için XML!i okuyup view haline getirme işlemi(inflating) yapılır. 

CustomAdapter.java dosyasında;

package com.example.customlist;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class Adapter extends BaseAdapter {
    Context context;
    List<sehirler> data;

    public Adapter(Context context, List<sehirler> data) {
        this.context = context;
        this.data = data;
    }

    @Override

    public int getCount() {
        return data.size();
    }

    @Override
    public Object getItem(int position) {

        return data.get(position);
    }

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
       View view = View.inflate(context,R.layout.custom_listview,null);
        ImageView image  =view.findViewById(R.id.imageView);
        TextView textView = view.findViewById(R.id.textView);
        image.setImageResource(data.get(position).getImage());
        textView.setText(data.get(position).getName());


        return view;
    }
}

İşlemleri gerçekleştirilir.

Bütün bu işlmelerden sonra activity_main.xml dosyasında ListView oluşturulur.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 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">

    <ListView
        android:id="@+id/listView"
        android:layout_width="395dp"
        android:layout_height="715dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

Şimdi gelelim MainActivity.java dosyasına burada gerekli tanımlamaları yapacağız ve oluşturduğumuz list'e add komutu ile ekleme yapacağız daha sonra oluşturduğumuz Adapter ile ListView ve Listeyi birbirine bağlayacağız.

package com.example.customlist;

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

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

public class MainActivity extends AppCompatActivity {


    ListView listView =(ListView)findViewById(R.id.listView);
    Adapter adapter;
    List<sehirler> sehirList;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        sehirList.add(new sehirler("Adana",R.drawable.adana));
        sehirList.add(new sehirler("Ankara",R.drawable.ankara));
        sehirList.add(new sehirler("Antalya",R.drawable.antalya));
        sehirList.add(new sehirler("Artvin",R.drawable.artvin));
        sehirList.add(new sehirler("Erzurum",R.drawable.erzurum));

        adapter = new Adapter(getApplicationContext(),sehirList);
        listView.setAdapter(adapter);
    }
}

Bütün bu işlemlerden sonra custom listViewimizi oluşturmuş oluyoruz.