Android Custom Listview Oluşturma ve Listview Button Ekleme İşlemleri

Android programlamada yeni başlayanlar için ilk sorun Custom Adapter. Bende yeni başlayan bir geliştirici olarak başlarda kaynak bulmakta ve istediğimi yapmakta oldukça zorlanmıştım. Ayrıca Basic adapter yardımı ile Listview kullanarak kolayca ekranda veri gösterilebiliyor. Ama işlemler biraz karmaşıklaştığı zaman illaki bir custom adapter yazmak zorundayız.

Custom Listview işlemlerini aradığınız için Listview nedir? ve Listview Neden Kullanılır anlatmaya gerek olduğunu zannetmiyorum.

Bu yazıda Custom listview oluşturma  ve custom listview üzerine button ekleme , edittext ekleme gibi işlemleri gerçekleştireceğim.

Aşağıda oluşturacağım listview örneğinin resmine ulaşabilirsiniz. Ayrıca aşağıda resmini gördüğünüz Restoran Sipariş Mobil Uygulaması yazıma da göz atabilirsiniz.

Oluşturacağımız custom listview üzerinde bir adet Textview, bir adet Edittext ve 2 adet Button bulunuyor. Butonlara + ve – değerlerini vereceğiz ve edittextteki değeri arttırıp, azaltmalarını sağlayacağız.

• İlk olarak activity_main layout dosyamıza bir adet ListView ekliyoruz. Aşağıda activity_main layout dosyamızın kodları yer almaktadır. Listview’a id eklemeyi unutmayalım.

<?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=
"com.example.mustafa.customlistview.MainActivity">

    <ListView
        android:id="@+id/listview_custom"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf ="parent"
        app:layout_constraintEnd_toEndOf ="parent"
        app:layout_constraintStart_toStartOf ="parent"
        app:layout_constraintTop_toTopOf ="parent" />

</android.support.constraint.ConstraintLayout>

Listview normal kullanımda içerisindeki her satıra verdiğimiz elemanları içerisine ekleyen ve kaydırarak bu elemanlara ulaşabileceğimiz bir yapıdır. Ancak biz özelleştirerek Listview üzerine 2 adet buton ve bir adet edittext ekleyeceğiz. Bu yüzden ekleyeceğimiz elemanları ayrı bir layout dosyasında birleştirerek Listview’a her satırına eklemesi için bu layout dosyamızı vereceğiz.

• Custom Listview için oluşturduğumuz layout dosyamızın kodları aşağıda yer almaktadır.

<?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">

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:background="@android:color/white"
            android:orientation="horizontal"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent">

            <TextView
                android:id="@+id/textview_urun_isim"
                android:layout_width="200dp"
                android:layout_height= "wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_below= "@+id/editText2_urun_miktari"
                android:layout_weight="1"
                android:paddingLeft="8dp"
                android:text="TextView"
                android:textColor= "@android:color/holo_red_dark"
                android:textSize="24sp"
                tools:layout_editor_absoluteX ="5dp"
                tools:layout_editor_absoluteY ="16dp" />

            <Button
                android:id="@+id/buton_eksi"
                android:layout_width="49dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:text="-" />

            <EditText
                android:id="@+id/editText2_urun_miktari"
                android:layout_width="55dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:backgroundTint= "@color/colorPrimaryDark"
                android:ems="10"
                android:enabled="false"
                android:inputType="number"
                android:textAlignment="center"
                android:textColor= "@android:color/holo_red_dark" />

            <Button
                android:id="@+id/buton_arti"
                android:layout_width="49dp"
                android:layout_height="40dp"
                android:layout_weight="1"
                android:text="+" />

        </LinearLayout>

    </android.support.constraint.ConstraintLayout>
</android.support.constraint.ConstraintLayout>

• Bizlere gerekli olan layout dosyalarımızı oluşturduk. Şimdi bu dosyalarımız için bir java class oluşturmamız gerekli. Ürünleri sıralayacağım için ben basit bir Urunler.class dosyası oluşturuyorum. Gerekli get ve set işlemlerini yapmayı unutmayın. Getter metodu objeden gerekli attribute çekilirken kullanılacaktır.

public class Urunler {

    public Urunler(String s) {
        this.siparis_isim = s;
    }

    public String getSiparis_isim() {
        return siparis_isim;
    }

    public int getSiparis_miktar() {
        return siparis_miktar;
    }

    public void setSiparis_miktar(int siparis_miktar) {
        this.siparis_miktar = siparis_miktar;
    }

    private String siparis_isim;
    private int siparis_miktar=0;
}

• Class dosyamızı da oluşturduğumuza göre artık Adapter sınıfımızı yazabiliriz. Adapter sınıfını yazarken tıklama olaylarını da dikkate alacağımız için OnClickListener’ı implement etmeliyiz. Tıklama olaylarının kullanımı aşağıda kod içerisinde verilmiştir.

public class CustomListviewUrunler extends ArrayAdapter<Urunler> implements View.OnClickListener{

    private Context context;
    ArrayList<Urunler> list_urunler;

    public CustomListviewUrunler (Context context, ArrayList<Urunler> urunlers){
        super(context,0,urunlers);
        this.context=context;
        this.list_urunler=urunlers;
    }

    // View Holder Pattern for better performance -> View Holder bir pattern olup detaylı bilgiye Google üzerinden ulaşabilirsiniz.
    private static class ViewHolder{
        Button b_arti,b_eksi;
        EditText t_siparis_mikatari;
        TextView t_urun_name;
    }

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

    @Nullable
    @Override
    public Urunler getItem(int position) {
        return list_urunler.get(position);
    }

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

    @Override
    public void onClick(View v) {
        ViewHolder viewHolder = new ViewHolder();
        viewHolder.t_siparis_mikatari = (EditText)v.findViewById (R.id.editText2_urun_miktari);
    }

    @NonNull
    @Override
    public View getView (final int position, View convertView, ViewGroup parent) {
        final ViewHolder viewHolder;
        View row;

        if (convertView ==null){
            viewHolder=new ViewHolder();
            LayoutInflater layoutInflater=(LayoutInflater)context.getSystemService (Context.LAYOUT_INFLATER_SERVICE);
            row=layoutInflater.inflate (R.layout.custom_listview,parent,false);

            viewHolder.b_arti=row.findViewById(R.id.buton_arti);
            viewHolder.b_eksi=row.findViewById(R.id.buton_eksi);
            viewHolder.t_siparis_mikatari= row.findViewById(R.id.editText2_urun_miktari);
            viewHolder.t_urun_name=row.findViewById (R.id.textview_urun_isim);

            row.setTag(viewHolder);
        }else{
            row=convertView;
            viewHolder=(ViewHolder) row.getTag();
        }

        final Urunler urunler=getItem(position);
        viewHolder.t_urun_name.setText (urunler.getSiparis_isim());
        viewHolder.t_siparis_mikatari.setText (urunler.getSiparis_miktar()+"");

        viewHolder.b_eksi.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                updateEdittext (position,viewHolder.t_siparis_mikatari,-1);
            }
        });

        viewHolder.b_arti.setOnClickListener (new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                updateEdittext (position,viewHolder.t_siparis_mikatari,+1);
            }
        });

        return  row;
    }

    private void updateEdittext(int position, EditText t_siparis_mikatari, int value) {

        Urunler urunler=getItem(position);

        if (value>0){
            urunler.setSiparis_miktar (urunler.getSiparis_miktar()+1);
        }else{
            if (urunler.getSiparis_miktar()>0){
                urunler.setSiparis_miktar (urunler.getSiparis_miktar()-1);
            }
        }
        // Burada +"" kullanmadığımız zaman hata almamız muhtemel. Zira edittext
        // string bir değer almak zorunda.
        t_siparis_mikatari.setText(urunler.getSiparis_miktar()+"");
    }
}

• Adapter sınıfımızı kodladıktan sonra son olarak MainActivity içerisinde verilerimizi listemiz yardımı ile listelemeye geçebiliriz.

public class MainActivity extends AppCompatActivity {

    private ArrayList<Urunler> urunlerArrayList;
    private ListView listView;
    private CustomListviewUrunler customListviewUrunler;

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

        // Listview tanımlama ve içerisine veri ekleme işlemleri ayrı birer metot olarak yazıldı.
        initialize();
        fill(urunlerArrayList);
    }

    private void initialize() {
        urunlerArrayList = new ArrayList<Urunler>();
        listView=(ListView)findViewById(R.id.listview_custom);
        customListviewUrunler=new CustomListviewUrunler (MainActivity.this,urunlerArrayList);
        listView.setAdapter(customListviewUrunler);
    }

    private void fill(ArrayList<Urunler>arrylistUrunler){
        for (int i = 0; i < 20; i++) {
            Urunler person = new Urunler("Sipariş : " + i);
            arrylistUrunler.add(person);
        }
    }
}

• Yaptığımız işlemlerden sonra kodumuzu Genymotion ile çalıştırdığımızda aşağıda yer alan ekranı elde edebiliriz. Listenin yanlarında bulunan butonlar yardımı ile sipariş miktarını arttırıp azaltmamız mümkün. Daha detaylı bilgi için aşağıdaki yazıya da bakabilirsiniz.
• Aynı yapıyı kullanarak farklı tasarımlar elde edilebilir. Ayrıca tasarımlara fotograf, yazı vb. içerikler de eklemek mümkün.

Android Custom Listview Oluşturma ve Listview Button Ekleme İşlemleri Proje Kodları

Programın tüm kodları için buraya tıklayabilirsiniz.