Xamarin.Android – Custom Adapter yapmak

9 Tem

Merhaba arkadaşlar,
Bugün sizlere en basit şekli ile verileri toplu halde istediğimiz tasarıma uygun olarak listelemeyi anlatacağım.

Listview ile verileri listeleyeceğiz fakat kendi tasarımımıza uygun olarak listelemek için, görsel dizaynımızı yani .axml dosyamızı hazırlayıp custom adapter yaparak verileri set edeceğiz.

Boş bir android projesi açıp adım adım devam edelim.

1- Main.axml ya da activity_main.axml yani ana sayfamıza 1 adet listview ekleyelim.


<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/listViewMain" />
</RelativeLayout>

2- Yukarıda bahsetmiş olduğum kendi tasarımımıza uygun adapter dosyamızı hazırlayalım.
Resources > layout klasörüne sağ tıklayıp yeni bir Android Layout ekleyelip. Adını CustListAdapter.axml olarak değiştirdim.
1 tablo ve 2 satır ekledim. Satırların arasına verileri listelemek için textview ekledim.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TableLayout
        android:minWidth="25px"
        android:minHeight="25px"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tableLayout1">
        <TableRow
            android:id="@+id/tableRow1">
          <TextView
        android:text="Name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtName" />
        </TableRow>
        <TableRow
            android:id="@+id/tableRow2">
          <TextView
        android:text="Surname"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/txtSurname" />
        </TableRow>
    </TableLayout>
</LinearLayout>

3- Verileri listelemek için haliyle elimde veri olması gerekmekte 🙂 bundan dolayı CustomerModel.cs adında bir model ekliyorum. Bu modele göre test verisi oluşturacağım.

Projeye sağ tıklayıp yeni class ekledim > Adına CustomerModel.cs olarak değiştirip ekledim.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

namespace CustomAdapterApp
{
    class CustomerModel
    {
        public string Name { get; set; }
        public string Surname { get; set; }
    }
}

4- Şimdi sıra geldi Adapter dosyamızın classını oluşturmaya.
Projeye Sağ tıklayıp > Add > New item diyerek > yeni adapter ekledim > Adını CustListAdapter.cs olarak değiştirdim.
(Hangi adapterin hangi layouta yani .axml dosyasına denk geldiğini kolayca anlamak için class adı ile layout adını aynı vermenizi öneririm. Böylece daha büyük projelerde bir bakışta hangi classın hangi layouta baktığını anlamış olursunuz.)

Aşağıda ki kod ile adapter dosyamı düzenliyorum. 2.Adım daki CustListAdapter.axml dosyasına uygun şekilde verileri set edicek adapteri yapmış oluyorum.


using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;

namespace CustomAdapterApp
{
    class CustListAdapter : BaseAdapter
    {

        Activity context;
        string[] name;
        string[] surName;

        public CustListAdapter(Activity context, List<CustomerModel> custList)
        {
            //Aktivite dosyası çekilir.
            this.context = context;
            //İsimler çekilir.
            this.name = custList.Select(x => x.Name).ToArray();
            //Soyisimler çekilir.
            this.surName = custList.Select(x => x.Surname).ToArray();
        }

        public override View GetView(int position, View convertView, ViewGroup parent)
        {
            //Verilerin listeleneceği view yani CustListAdapter.axml dosyamı çekiyorum.
            var view = context.LayoutInflater.Inflate(Resource.Layout.CustListAdapter, parent, false);

            //+Objeler çekilir.
            TextView txtName = (TextView)view.FindViewById(Resource.Id.txtName);
            txtName.SetTypeface(null, Android.Graphics.TypefaceStyle.Bold);

            TextView txtSurname = (TextView)view.FindViewById(Resource.Id.txtSurname);
            //-

            //Veriler atılır.
            txtName.Text = name[position].ToString();
            txtSurname.Text = surName[position].ToString();

            return view;
        }

        //Fill in cound here, currently 0
        public override int Count
        {
            get
            {
                return name.Length;
            }
        }


        public override Java.Lang.Object GetItem(int position)
        {
            return name[position];
        }

        public override long GetItemId(int position)
        {
            return position;
        }
    }
}

5- MainActivity.cs dosyasını aşağıda ki gibi düzenleyerek işlemleri bitiyorum.
Kodların arasında önemli yerleri açıklıyorum.


using Android.App;
using Android.Widget;
using Android.OS;
using Android.Support.V7.App;
using System.Collections.Generic;

namespace CustomAdapterApp
{
    [Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
    public class MainActivity : AppCompatActivity
    {
        protected override void OnCreate(Bundle savedInstanceState)
        {
            base.OnCreate(savedInstanceState);

            // Set our view from the "main" layout resource
            SetContentView(Resource.Layout.activity_main);

            //Ana sayfada ki listview çekilir.
            ListView listViewMain = FindViewById<ListView>(Resource.Id.listViewMain);

            //Test verileri çekilir.
            List<CustomerModel> customerListData = this.setAndGetCustomer();

            CustListAdapter custListAdapter = new CustListAdapter(this, customerListData);

            //Yeni custom yaptığım adapteri ana sayfada listelemek için, anasyfada ki listviewa atamasını yapıyorum.
            listViewMain.Adapter = custListAdapter;
            listViewMain.ItemClick += ListViewMain_ItemClick;
        }

        private void ListViewMain_ItemClick(object sender, AdapterView.ItemClickEventArgs e)
        {
            Toast.MakeText(this, e.Position + "Satırına tıklandı.", ToastLength.Short).Show();
        }

        /// <summary>
        /// Test datası oluşturur.
        /// </summary>
        /// <returns></returns>
        private List<CustomerModel> setAndGetCustomer()
        {
            List<CustomerModel> localList = new List<CustomerModel>();

            for (int i = 1; i <= 10; i++)
            {
                CustomerModel model = new CustomerModel();

                model.Name = "Semih" + i;
                model.Surname = "Çelikol" + i;

                localList.Add(model);
            }

            return localList;
        }
    }
}

Ekran çıktısı;

Bir Cevap Yazın