Xamarin Android Listview, Bu makalemizde android’de listeleme yapmak için kullanılan listview bileşeninden bahsedip bol örnek yapacağız ayrıca kendi özel adaptörümüzü ve özel lisview layout’umuzu nasıl oluşturacağımızıda görmüş olacağız.
Xamarin Android Listview Kullanımı
ListView Bileşeni ve Adaptör Oluşturma
ListView bileşeninin liste elemanlarını grafiksel olarak son kullanıcıya göstermek için kullandığımızı söylemiştik. ArrayAdapter nesnesi ise ListView bileşenini beslemek için kullanılan ara bağlantı nesnesi olarak adlandırmak yanlış olmayacaktır. Zira ArrayAdapter nesnesi sadece veri seti ve bu veri setinin ListView bileşenine basıldığında oluşacak şablonu barındıran bir ara bağlantı nesnesidir. 4 adet elemanı bulunan basit bir liste oluşturalım.
Örnekleri oluştururken Visual Studio ide’sini kullanacağım bu yüzden anlatımlarımın bazı kısımlarında Visual Studio’da yapmanız gereken işlemlere değineceğim.
Visual Studio’da Xamarin Android projesi oluşturmak için Menüden File > New > Project (CTRL + Shift + N)
açılan pencerede sol taraftaki listeden Installed > Templates > Visual C# > Android
bu adımları doğru şekilde seçtiyseniz adı (Android) şeklinde biten örnek xamarin android projelerini göreceksiniz bizim şuan ihtiyacımız olan Blank App (Android) adlı şablondur o yüzden bu şablonu seçip projeyi oluşturunuz.
Projeyi oluşturduktan sonra MainActivity.cs
adlı bir sınıf oluşturduğunu göreceksiniz bu sınıf Resource.Layout.Main
adlı layout’a ait kod tarafıdır. Kod işlemlerini bu sınıf içerisinde fakat görsel işlemleri Resource.Layout.Main
içerisinde gerçekleştireceğiz. Şimdi Main.axml
ve MainActivity.cs
adlı dosya içeriklerine gözatalım.
Main.axml(XML)
1 2 3 4 5 6 7 8 9 10 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ListView android:id="@+id/listView" android:layout_height="match_parent" android:layout_width="match_parent" /> </LinearLayout> |
Varsayılan olarak oluşan Main.axml
dosyasına ListView
bileşenini ekleyip id’sini listView
olarak değiştirdik.
MainActivity.cs(C#)
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 | using Android.App; using Android.Widget; using Android.OS; using System.Collections.Generic; namespace MHG.Listview { [Activity(Label = "MHG.Listview", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { List<string> list; ListView listView; protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); listView = FindViewById<ListView>(Resource.Id.listView); list = new List<string> { "Murat", "Sakine", "Hüseyin", "Mustafa" }; ArrayAdapter<string> adapter = new ArrayAdapter<string>(this, Android.Resource.Layout.SimpleListItem1, list); listView.Adapter = adapter; } } } |
global list ve listView adında iki değişken tanımladık listView değişkenine layout’umuzda yer alan listView
id’li bileşenimizi atıyoruz. daha sonra list
adında string
tipli liste değişkenine 4 eleman ekliyoruz.
Ardından listView
değişkenimiz için gerekli olan ArrayAdapter
nesnesini oluşturuyoruz ArrayAdapter
nesnesinin contructor
methodu parametrelerine sırasıyla Context(this)
nesnesini atıyoruz, 2.parametreye oluşacak olan her bir satırın hangi tasarım şablonu ile oluşacağını belirtiyoruz biz burada android sdk’nin kendi varsayılan şablonunundan birini kullandık alttaki diğer örneğimizde özel listview
görünümü oluşturmanın nasıl yapıldığınada gözatabilirsiniz.
Son olarak listView
değişkenimizin Adapter
özelliğine oluşturmuş olduğumuz adapter
adlı değişkeni atıyoruz.
Ekran Görüntüsü
Özel ListView Görünümü Oluşturma
Android mobil platformu geliştiriciler için hâlihazırda 5-10 çeşit listview görünümünü sunmaktadır eğer bu görünüm ihtiyaçlarınızı karşılamıyor ise o zaman bu kısım sizi ilgilendiriyor olacak bu kısımda anlatılanlar ile ListView
bileşeniniz için özel görünümler oluşturabileceksiniz.
MainActivity.cs(C#)
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 | using Android.App; using Android.OS; using System.Collections.Generic; namespace MHG.Ozel.ListView { [Activity(Label = "MHG.Ozel.ListView", MainLauncher = true, Icon = "@drawable/icon")] public class MainActivity : Activity { Android.Widget.ListView _listView; List<Kisi> _list; protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); _listView = FindViewById<Android.Widget.ListView>(Resource.Id.customListView); _list = new List<Kisi> { new Kisi { Ad = "Murat", Soyad = "ÖNER", Yas = 25, Cinsiyet = "E" }, new Kisi { Ad = "Sakine", Soyad = "SALMANLI", Yas = 22, Cinsiyet = "K" }, new Kisi { Ad = "Hüseyin", Soyad = "TURAK", Yas = 24, Cinsiyet = "E" }, new Kisi { Ad = "Mustafa", Soyad = "ÖNER", Yas = 25, Cinsiyet = "E" } }; MyListViewAdapter adapter = new MyListViewAdapter(this, _list); _listView.Adapter = adapter; } } } |
Eğer kendinize özel listview görünümleri oluşturacaksanız o zaman kendi adaptörünüzüde oluşturmalısınız üstteki kodda görüldüğü gibi MyListViewAdapter adında bir sınıfımız var ve bu sınıfı BaseAdapter<T> generic type’lı sınıftan miras aldık. Miras alma sonucunda bazı metodların dahil edilmesi konusunda bir hata alacaksınız bu metodları dahil etmelisiniz ve kendinize ihtiyacınıza görede bu metodların içeriğini düzenlemeniz gerekiyor. Şimdi MyListViewAdapter adlı sınıfımıza ait kodlara gözatalım
MyListViewAdapter.cs(C#)
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 | using Android.Content; using Android.Views; using Android.Widget; using System.Collections.Generic; namespace MHG.Ozel.ListView { public class MyListViewAdapter : BaseAdapter<Kisi> { List<Kisi> _liste; Context _context; public MyListViewAdapter(Context context, List<Kisi> liste) { _liste = liste; _context = context; } public override Kisi this[int position] { get { return _liste[position]; } } public override int Count { get { return _liste.Count; } } public override long GetItemId(int position) { return position; } public override View GetView(int position, View convertView, ViewGroup parent) { View satir = convertView; if (satir == null) satir = LayoutInflater.From(_context).Inflate(Resource.Layout.listview_satir, null, false); TextView txtAd = satir.FindViewById<TextView>(Resource.Id.txtAd); txtAd.Text = _liste[position].Ad; TextView txtSoyad = satir.FindViewById<TextView>(Resource.Id.txtSoyad); txtSoyad.Text = _liste[position].Soyad; TextView txtYas = satir.FindViewById<TextView>(Resource.Id.txtYas); txtYas.Text = _liste[position].Yas.ToString(); TextView txtCinsiyet = satir.FindViewById<TextView>(Resource.Id.txtCinsiyet); txtCinsiyet.Text = _liste[position].Cinsiyet; return satir; } } } |
Main.axml(XML)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:minWidth="25px" android:minHeight="25px"> <ListView android:minWidth="25px" android:minHeight="25px" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/customListView" /> </LinearLayout> |
listview_satir.axml(XML)
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 | <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent" android:minWidth="30px" android:minHeight="30px" android:weightSum="100" android:padding="5dp"> <TextView android:text="Text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="25" android:id="@+id/txtAd" /> <TextView android:text="Text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="25" android:id="@+id/txtSoyad" /> <TextView android:text="Text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="25" android:id="@+id/txtYas" /> <TextView android:text="Text" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="25" android:id="@+id/txtCinsiyet" /> </LinearLayout> |
listview_satir.axml dosyası oluşturduğumuz MyListViewAdapter sınıfında kullanmak üzere oluştuduğumuz listview satır şablonudur. Kisi sınıfı içerisindeki Ad Soyas Yas Cinsiyet alanlarını yan yana olarak bastıracağız.
Ekran Görüntüsü
Click Listener İle Tıklama Olayını Yakalama
Yukarıdaki kodlara ek olarak OnCreate()
metodu içerisine alttaki 2 satırı ekliyoruz ItemClick
event’i listview’deki her bir satıra tıklama sonucu çalışmaktadır. ItemLongClick
event’ide aynı şekilde listview’deki her bir item’a tıklama sonucu çalışıyor fakat uzun süre basılı tutunca bu event tetikleniyor arasındaki tek fark bu.
MainActivity.cs(C#)
1 2 | _listView.ItemClick += _listView_ItemClick; _listView.ItemLongClick += _listView_ItemLongClick; |
Şimdi ise _listView_ItemClick
ve _listView_ItemLongClick
adlı event’lerin tanımlanmasına bakalım ve bu event’ler tetiklendiğinde ne yapıyoruz gözatalım.
MainActivity.cs(C#)
1 2 3 4 5 6 7 8 9 10 11 | private void _listView_ItemLongClick(object sender, AdapterView.ItemLongClickEventArgs e) { var kisi = _liste[e.Position]; Toast.MakeText(this, string.Format("LongClick: {0} {1}", kisi.Yas, kisi.Cinsiyet), ToastLength.Long).Show(); } private void _listView_ItemClick(object sender, Android.Widget.AdapterView.ItemClickEventArgs e) { var kisi = _liste[e.Position]; Toast.MakeText(this, string.Format("Click: {0} {1}", kisi.Ad, kisi.Soyad), ToastLength.Long).Show(); } |
Yukarıda görüldüğü üzere listview’deki hangi elemana tıklandıysa e.Position
ile ilgili kaydın index
numarası alınıyor böylelikle tıklanmış olan kişiye bu index
numarası ile ulaşabiliyoruz. kişi’yi aldıktan sonra her iki event
metodunda aynı işlemi yapıyoruz sadece ekrana bastırdığımız içerik ayırt edebilmemiz için farklı örnek verecek olursak Murat ÖNER
adlı liste elemanına bir defa tıkladıyıp bıraktığınızda ekrana Click: Murat ÖNER
toast mesajı belirecektir ama uzun süre basılı tuttuğunuzda ise LongClick: 25 E
yazacaktır. Alttaki örnek ekran görüntülerindede görebilirsiniz.
Ekran Görüntüsü
Xamarin Listview için yaptığımız ve diğer tüm örneklerin kodlarına ulaşmak için alttaki github bağlantısını ziyaret ediniz.
Github: https://github.com/muratoner/xamarin/tree/master/Xamarin ListView Kullanımı
Kaynak
Xamarin Android Listview
merhaba birşey sormak istiyorum itemclick ile ilgili olarak. Şimdi ben kendime bir listview oluşturdum ve bu bu listviewe eleman olarak alfabedeki harfleri ekledim.Daha sonra arama kısmı oluşturdum.Buraya kadar herşey çalışması gerektiği gibi örneğin ben örneğin C harfini aradığımda listview bana ekranda sadece C harfini getiriyor fakat ben C harfine tıkladıgım zaman bana A harfinin uyarısını ekrana getiriyor. e.Position bu şekilde işlemlerde işe yaramıyor bunun için ne yapabilirim.
Teşekkürler.
Normal olarka a harfini getiriyordur çünkü siz c harfi ile aradığınız liste içerinde
_liste[e.Position]
gibi bir kullanım yapıyorsunuzdur yapmanız gereken_filtrelenmisListe[e.Position]
şeklinde bir kullanım ile hangi elemana tıkladıysanız ilgili eleman getirilecektir bu arada_filtrelenmisListe
değişkeni benim uydurduğum bir degisken adıdır siz arama sonrası filtrelenmis sonucu hangi field’a aktarıyorsanız ilgili filtrelenmiş fielddae.Position
değeri ile kayıta erişmelisiniz.Merhaba Murat Hocam; tekrar ben. Şimdi ise şurada takıldım.
örneğin ben edittextler içeren form ile bir kayıtlar oluşturuyorum.
örneğin ad özgür yas 20 gibi daha sonra bunu güncellemek istiyorum ad özgür yaş 21 diye fakat burada benim istediğim listedeki kayıtlara baksın bu kayıttan varsa yeni eklemek yerine var olanı güncellesin.
Bunu nasıl yapabilirim?