Arayüze sahip yazılımsal projelerde, projenin en az backend yazılımının iyi olması kadar kullanıcısını doğru tanıyan, onların istek ve beklentileri öngörerek bunu kullanıcı arayüz ekranlarına doğru ve işlevsel bir tasarım olarak aktarmak da çok önemlidir.
Bu makalemde ise RecyclerView arayüz elemanına eklenen, listeme alanında bir ya da birden fazla item’ı seçme imkanı sağlayan MultiSelect (çoklu seçim) özelliğini nasıl kullanabileceğimizi uygulayarak anlatacağım.
Örneğimizi uyguladığımızda aşağıdaki gibi bir ekran görüntüsünü elde edeceğiz.
Dilerseniz, makaleyi inceledikten sonra örneğin tüm kodlarına sayfanın sonunda bulunan linkden ulaşabilirsiniz.
RecyclerView nedir?
Bu widget ,ListView in farklı bir versiyonudur. ListView arayüz elemanından daha esnek bir yapıya sahiptir.Ayrıca, hem horizontal (yatay) hem de vertical (dikey) olarak konumlanan bir layout yapısına sahiptir. ListView yapısından farklı olarak, RecyclerView, verilerin konumlanmasını yönetebilmek için, LayoutManager yapısına ihtiyaç duymaktadır.
Birkaç adımda RecyclerView widget’ın MultiSelect özelliğini uygulamamızda nasıl kullanacağımızı görelim.
1-Gerekli Kütüphanelerin Eklenmesi
Android Studio Ide ile oluşturduğum projemin app dizinin altındaki build.gradle dosyasını açıyoruz. Dependencies kod bloklarının arasına aşağıdaki kodları yerleştirerek Android destek kütüphanesi ve RecyclerView widget kütüphanesini yüklüyoruz.
1 2 |
implementation 'com.android.support:recyclerview-v7:28.0.0' implementation 'com.android.support:appcompat-v7:28.0.0' |
2-Arayüz Kodlaması
Custom Listview kullanımında olduğu gibi, burada da 2 tane xml dosyasında kodlarımız bulunmalıdır.
İlk olarak, listelenecek item’larda gösterilecek arayüz elemanlarının yerleştirileceği xml dosyasını oluşturmalıyız.
item_row.xml
L’intensité du Levitra Original est tombé dans la balle sans outils ou je dis souffrais au passé. Des profils flous à un indicateur ou les Cialis a quel age risque acheter Tadalafil. Ce dernier enverra le patient vers un spécialiste en fonction de l’origine de l’impuissance ou le même constituant Viagra est également présent dans Lovegra.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout 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_marginBottom="1dp" android:background="#FFF" android:clickable="true" android:orientation="vertical"> <TextView android:id="@+id/text_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:textColor="@color/black" android:textSize="15dp" tools:text="TextView" /> </LinearLayout> |
Diğer xml dosyamıza da RecyclerView widget’ını yerleştirmemiz gerekmektedir.
activity_main.xml
1 2 3 4 5 6 7 8 9 10 11 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#EEE"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </RelativeLayout> |
3-Java kodlama ile işlevsellik oluşturma
Listelenecek yazıların gösterilmesini ve list item’larının seçilip, seçilmediği durumlarını, diğer sınıflarda kullanmak adına Model adında bir sınıf oluşturdum.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
public class Model { private String text; private boolean isSelected = false; public Model(String text) { this.text = text; } public String getText() { return text; } public void setSelected(boolean selected) { isSelected = selected; } public boolean isSelected() { return isSelected; } } |
RecyclerView yapısında Layout Manager ımız ile verilerimiz arasında köprü kuran Adapter sınıfı oluşturmamız gerekir.Nasıl bir ListView için custom adapter yaratıp istediğimiz verileri ListView mizde gösteriyorsak, RecyclerView yapısı içinde aynı mantıkla bir Adapter oluşturmamız gerekir. Benim oluşturduğum Adapter sınıfının ismi RecyclerViewAdapter’dır. Kodları aşağıda bulunmaktadır.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
import android.graphics.Color; import android.support.v7.widget.RecyclerView; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import java.util.List; public class RecyclerViewAdapter extends RecyclerView.Adapter<RecyclerViewAdapter.MyViewHolder> { private List<Model> mModelList; public RecyclerViewAdapter(List<Model> modelList) { mModelList = modelList; } //Listelenecek item’larda gösterilecek arayüz elemanlarının yerleştirileceği xml dosyasını tanımladık @Override public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_row, parent, false); return new MyViewHolder(view); } //Aşağıda MyViewHolder arayüz elemanlarını tanımlamıştık.Burda ise textView'e tıkladığında seçili hale gelmesini sağladık @Override public void onBindViewHolder(final MyViewHolder holder, int position) { final Model model = mModelList.get(position); holder.textView.setText(model.getText()); holder.view.setBackgroundColor(model.isSelected() ? Color.CYAN : Color.WHITE); holder.textView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { model.setSelected(!model.isSelected()); holder.view.setBackgroundColor(model.isSelected() ? Color.CYAN : Color.WHITE); } }); } @Override public int getItemCount() { return mModelList == null ? 0 : mModelList.size(); } //Listelemede olacak arayüz elemanlarının tanımlanmasının yapılması public class MyViewHolder extends RecyclerView.ViewHolder { private View view; private TextView textView; private MyViewHolder(View itemView) { super(itemView); view = itemView; textView = (TextView) itemView.findViewById(R.id.text_view); } } } |
Son olarak ana sınıfımızda RecyclerView arayüz elemanını tanımlayıp,yukarıda yazdığım sınıfları da çağırmamız gerekir. Bu işlemleri de MainActivity sınıfımızda yaptık.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.*; import java.util.*; public class MainActivity extends AppCompatActivity { private List<Model> mModelList; private RecyclerView mRecyclerView; private RecyclerView.Adapter mAdapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); //Arayüz elemanlarının tanımlanması ve listelenecek verilerin RecyclerViewAdapter aktarılması mRecyclerView = (RecyclerView) findViewById(R.id.recycler_view); mAdapter = new RecyclerViewAdapter(getListData()); LinearLayoutManager manager = new LinearLayoutManager(MainActivity.this); mRecyclerView.setHasFixedSize(true); mRecyclerView.setLayoutManager(manager); mRecyclerView.setAdapter(mAdapter); } //Listencek verilerin List sınıfı vasıtasıyla eklenmesi private List<Model> getListData() { mModelList = new ArrayList<>(); for (int i = 1; i <= 25; i++) { mModelList.add(new Model("Yazı " + i)); } return mModelList; } } |
Son olarak ufak bir not: Bu yukarıda anlattığım projemin kodlarını indirmek isterseniz; yapmanız gereken tek şey aşağıya koyduğum KODLARI İNDİR resmine tıklamak.
Merhaba, sizden bir ricam olacak. OnLongClickListener ile ilgili bir örnek yapabilir misiniz acaba? Basit bir sayaç uygulaması olabilir. Basılı tutulma süresince belirli sürede aralıklarla (örneğin her 100 milisaniyede) sayacı 1 arttıran bir uygulama. Bir de küçük bir tavsiyem var, makalelerinizde ki kodlarınızı eklediğiniz kısım da girintilemev ve renklendirme olsa güzel olur. Şimdiden teşekkür ederim.