Xamarin.Android ile ListView Görünümünü Özelleştirme

ListView görünümü, görüntülenen satırların düzenine göre dikte edilir. görünümünü değiştirmek ListViewiçin farklı bir satır düzeni kullanın.

Yerleşik Satır Görünümleri

Android.Resource.Layout kullanılarak başvurulabilen on iki yerleşik Görünüm vardır:

TestListItem – En az biçimlendirmeye sahip tek satırlı metin.
SimpleListItem1 – Tek satırlı metin.
SimpleListItem2 – İki satır metin.
SimpleSelectableListItem – Tek veya birden çok öğe seçimini destekleyen tek satırlı metin (API düzeyi 11'e eklendi).
SimpleListItemActivated1 – SimpleListItem1'e benzer, ancak arka plan rengi bir satırın ne zaman seçildiğini gösterir (API düzeyi 11'e eklenir).
SimpleListItemActivated2 – SimpleListItem2'ye benzer, ancak arka plan rengi bir satırın ne zaman seçildiğini gösterir (API düzeyi 11'e eklenir).
SimpleListItemChecked – Seçimi belirtmek için onay işaretlerini görüntüler.
SimpleListItemMultipleChoice – Çoktan seçmeli seçimi belirtmek için onay kutularını görüntüler.
SimpleListItemSingleChoice – Birbirini dışlayan seçimi göstermek için radyo düğmelerini görüntüler.
TwoLineListItem : İki satırlık metin.
ActivityListItem : Resim içeren tek satırlı metin.
SimpleExpandableListItem – Satırları kategorilere göre gruplandırır ve her grup genişletilebilir veya daraltılabilir.

Her yerleşik satır görünümünün kendisiyle ilişkilendirilmiş yerleşik bir stili vardır. Bu ekran görüntüleri, her görünümün nasıl göründüğünü gösterir:

BuiltInViews/HomeScreenAdapter.cs örnek dosyası (BuiltInViews çözümünde) genişletilemez liste öğesi ekranlarını üretme kodunu içerir. Görünüm yönteminde GetView şu şekilde ayarlanır:

view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleListItem1, null);

Görünümün özellikleri daha sonra standart denetim tanımlayıcılarına Text1Text2 başvurularak ayarlanabilir ve Icon altında Android.Resource.Id (görünümün içermediği özellikleri ayarlamayın veya bir özel durum oluşturulur):

view.FindViewById<TextView>(Android.Resource.Id.Text1).Text = item.Heading;
view.FindViewById<TextView>(Android.Resource.Id.Text2).Text = item.SubHeading;
view.FindViewById<ImageView>(Android.Resource.Id.Icon).SetImageResource(item.ImageResourceId); // only use with ActivityListItem

BuiltInExpandableViews/ExpandableScreenAdapter.cs örnek dosyası (BuiltInViews çözümünde) SimpleExpandableListItem ekranını üretme kodunu içerir. Grup görünümü yönteminde GetGroupView şöyle ayarlanır:

view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleExpandableListItem1, null);

Alt görünüm yönteminde GetChildView şöyle ayarlanır:

view = context.LayoutInflater.Inflate(Android.Resource.Layout.SimpleExpandableListItem2, null);

Grup görünümünün ve alt görünümün özellikleri daha sonra yukarıda gösterildiği gibi standart Text1 ve Text2 denetim tanımlayıcılarına başvurarak ayarlanabilir. SimpleExpandableListItem ekran görüntüsü (yukarıda gösterilmiştir), tek satırlı grup görünümü (SimpleExpandableListItem1) ve iki satırlı alt görünüm (SimpleExpandableListItem2) örneği sağlar. Alternatif olarak, grup görünümü iki satır (SimpleExpandableListItem2) için yapılandırılabilir ve alt görünüm bir satır için yapılandırılabilir (SimpleExpandableListItem1) veya hem grup görünümü hem de alt görünüm aynı sayıda satıra sahip olabilir.

Aksesuarlar

Satırlar, seçim durumunu belirtmek için görünümün sağındaki donatıları ekleyebilir:

SimpleListItemChecked – Gösterge olarak denetim içeren tek seçimli bir liste oluşturur.
SimpleListItemSingleChoice – Yalnızca bir seçeneğin mümkün olduğu radyo düğmesi türünde listeler oluşturur.
SimpleListItemMultipleChoice – Birden çok seçeneğin mümkün olduğu onay kutusu türü listeler oluşturur.

Yukarıda belirtilen aksesuarlar, aşağıdaki ekranlarda sırasıyla gösterilmiştir:

Bu donatılardan birini görüntülemek için gerekli düzen kaynak kimliğini bağdaştırıcıya geçirin, ardından gerekli satırların seçim durumunu el ile ayarlayın. Bu kod satırı, aşağıdaki düzenlerden birini kullanarak nasıl Adapter oluşturulacağını ve atanacağını gösterir:

ListAdapter = new ArrayAdapter<String>(this, Android.Resource.Layout.SimpleListItemChecked, items);

Kendisi ListView , görüntülenen aksesuardan bağımsız olarak farklı seçim modlarını destekler. Karışıklığı önlemek için aksesuarlarla SingleChoice seçim modunu ve Checked stille MultipleChoice birlikte veya Multiple modunu kullanınSingle. Seçim modu özelliğinin ChoiceMode denetimindedir ListView.

API Düzeyini İşleme

Xamarin.Android'in önceki sürümleri numaralandırmaları tamsayı özellikleri olarak uyguladı. En son sürüm, olası seçenekleri bulmayı çok daha kolay hale getiren uygun .NET numaralandırma türlerini kullanıma sunulmuştur.

Hedeflediğiniz API düzeyine bağlı olarak, ChoiceMode bir tamsayı veya sabit listesidir. Gingerbread API'sini hedeflemek istiyorsanız AccessoryViews/HomeScreen.cs örnek dosyasında açıklama satırı yapılan bir blok var:

// For targeting Gingerbread the ChoiceMode is an int, otherwise it is an
// enumeration.

lv.ChoiceMode = Android.Widget.ChoiceMode.Single; // 1
//lv.ChoiceMode = Android.Widget.ChoiceMode.Multiple; // 2
//lv.ChoiceMode = Android.Widget.ChoiceMode.None; // 0

// Use this block if targeting Gingerbread or lower
/*
lv.ChoiceMode = 1; // Single
//lv.ChoiceMode = 0; // none
//lv.ChoiceMode = 2; // Multiple
//lv.ChoiceMode = 3; // MultipleModal
*/

Program Aracılığıyla Öğe Seçme

'Seçili' öğeleri el ile ayarlama yöntemiyle SetItemChecked yapılır (birden çok seçim için birden çok kez çağrılabilir):

// Set the initially checked row ("Fruits")
lv.SetItemChecked(1, true);

Kodun ayrıca tek seçimleri birden çok seçimden farklı şekilde algılaması gerekir. Modda Single hangi satırın seçildiğini belirlemek için integer özelliğini kullanın CheckedItemPosition :

FindViewById<ListView>(Android.Resource.Id.List).CheckedItemPosition

Modda Multiple hangi satırların seçildiğini belirlemek için içinde CheckedItemPositions SparseBooleanArraydöngü yapmanız gerekir. Seyrek dizi, yalnızca değerin değiştirildiği girişleri içeren bir sözlük gibidir. Bu nedenle, aşağıdaki kod parçacığında gösterildiği gibi listede nelerin seçildiğini bilmek için true tüm diziyi geçirerek değerleri aramanız gerekir:

var sparseArray = FindViewById<ListView>(Android.Resource.Id.List).CheckedItemPositions;
for (var i = 0; i < sparseArray.Size(); i++ )
{
   Console.Write(sparseArray.KeyAt(i) + "=" + sparseArray.ValueAt(i) + ",");
}
Console.WriteLine();

Özel Satır Düzenleri Oluşturma

Dört yerleşik satır görünümü çok basittir. Daha karmaşık düzenleri (e-posta listesi, tweet veya kişi bilgileri gibi) görüntülemek için özel bir görünüm gerekir. Özel görünümler genellikle Kaynaklar/Düzen dizininde AXML dosyaları olarak bildirilir ve ardından özel bir bağdaştırıcı tarafından kaynak kimliği kullanılarak yüklenir. Görünüm, özel renkler, yazı tipleri ve düzen içeren herhangi bir sayıda görüntüleme sınıfı (TextViews, ImageViews ve diğer denetimler gibi) içerebilir.

Bu örnek, bir dizi yolla önceki örneklerden farklıdır:

öğesini değil ListActivity , öğesinden Activity devralır. Herhangi bir ListView için satırları özelleştirebilirsiniz, ancak bir düzene (başlık, düğmeler veya diğer kullanıcı arabirimi öğeleri gibi) başka denetimler de eklenebilir Activity . Bu örnek, öğesinin ListView üzerine göstermek için bir başlık ekler.
Ekran için bir AXML düzen dosyası gerektirir; önceki örneklerde ListActivity , bir düzen dosyası gerektirmez. Bu AXML bir ListView denetim bildirimi içerir.
Her satırı işlemek için bir AXML düzen dosyası gerektirir. Bu AXML dosyası, özel yazı tipi ve renk ayarlarıyla metin ve görüntü denetimlerini içerir.
Seçildiğinde satırın görünümünü ayarlamak için isteğe bağlı bir özel seçici XML dosyası kullanır.
Uygulama, Adapter geçersiz kılmadan GetView özel bir düzen döndürür.
ItemClickfarklı bildirilmelidir (içinde geçersiz kılma OnListItemClick ListActivityyerine bir olay işleyicisi ListView.ItemClick eklenmiştir).

Bu değişiklikler, etkinliğin görünümünü ve özel satır görünümünü oluşturma ve ardından bunları işlemek için Bağdaştırıcı ve Etkinlik değişikliklerini kapsayan şekilde aşağıda ayrıntılı olarak açıklanmıştır.

Etkinlik Düzenine ListView Ekleme

HomeScreen Artık bu dosyadan ListActivity devralmadığından varsayılan görünüm yoktur, bu nedenle HomeScreen görünümü için bir düzen AXML dosyası oluşturulmalıdır. Bu örnekte, görünümde bir başlık (kullanarak TextView) ve verileri görüntülemek için bir ListView bulunur. Düzen, burada gösterilen Resources/Layout/HomeScreen.axml dosyasında tanımlanır:

<?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">
    <TextView android:id="@+id/Heading"
        android:text="Vegetable Groups"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:background="#00000000"
        android:textSize="30dp"
        android:textColor="#FF267F00"
        android:textStyle="bold"
        android:padding="5dp"
    />
    <ListView android:id="@+id/List"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:cacheColorHint="#FFDAFF7F"
    />
</LinearLayout>

Özel düzende (yerineListActivity) bir kullanmanın Activity avantajı, ekrana bu örnekteki başlık TextView gibi ek denetimler ekleyebilmektir.

Özel Satır Düzeni Oluşturma

Liste görünümünde görünecek her satır için özel düzeni içermesi için başka bir AXML düzen dosyası gereklidir. Bu örnekte satırda yeşil bir arka plan, kahverengi metin ve sağa hizalanmış görüntü yer alır. Bu düzeni bildirmek için Android XML işaretlemesi Resources/Layout/CustomView.axml bölümünde açıklanmıştır:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="wrap_content"
   android:background="#FFDAFF7F"
   android:padding="8dp">
    <LinearLayout android:id="@+id/Text"
       android:orientation="vertical"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:paddingLeft="10dip">
        <TextView
         android:id="@+id/Text1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textColor="#FF7F3300"
         android:textSize="20dip"
         android:textStyle="italic"
         />
        <TextView
         android:id="@+id/Text2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:textSize="14dip"
         android:textColor="#FF267F00"
         android:paddingLeft="100dip"
         />
    </LinearLayout>
    <ImageView
        android:id="@+id/Image"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:padding="5dp"
        android:src="@drawable/icon"
        android:layout_alignParentRight="true" />
</RelativeLayout >

Özel satır düzeni birçok farklı denetim içerebilir ancak kaydırma performansı karmaşık tasarımlardan ve görüntülerin kullanılmasından (özellikle ağ üzerinden yüklenmesi gerekiyorsa) etkilenebilir. Kaydırma performansı sorunlarını giderme hakkında daha fazla bilgi için Google'ın makalesine bakın.

Özel Satır Görünümüne Başvurma

Özel bağdaştırıcı örneğinin uygulaması içindedir HomeScreenAdapter.cs. Anahtar yöntemi, GetView kaynak kimliğini Resource.Layout.CustomViewkullanarak özel AXML'yi yüklediği ve döndürmeden önce görünümdeki denetimlerin her birinde özellikleri ayarladığı yerdir. Bağdaştırıcı sınıfının tamamı gösterilir:

public class HomeScreenAdapter : BaseAdapter<TableItem> {
   List<TableItem> items;
   Activity context;
   public HomeScreenAdapter(Activity context, List<TableItem> items)
       : base()
   {
       this.context = context;
       this.items = items;
   }
   public override long GetItemId(int position)
   {
       return position;
   }
   public override TableItem this[int position]
   {
       get { return items[position]; }
   }
   public override int Count
   {
       get { return items.Count; }
   }
   public override View GetView(int position, View convertView, ViewGroup parent)
   {
       var item = items[position];
       View view = convertView;
       if (view == null) // no view to re-use, create new
           view = context.LayoutInflater.Inflate(Resource.Layout.CustomView, null);
       view.FindViewById<TextView>(Resource.Id.Text1).Text = item.Heading;
       view.FindViewById<TextView>(Resource.Id.Text2).Text = item.SubHeading;
       view.FindViewById<ImageView>(Resource.Id.Image).SetImageResource(item.ImageResourceId);
       return view;
   }
}

Etkinlikte Özel ListView'a Başvurma

Sınıfı artık öğesinden ActivityListView devraldığındanHomeScreen, AXML'de bildirilen denetime başvuruyu tutmak için sınıfında bir alan bildirilir:

ListView listView;

Sınıfın daha sonra yöntemini kullanarak Activity'in özel düzeni AXML'sini SetContentView yüklemesi gerekir. Ardından denetimi düzende bulabilir ListView , ardından bağdaştırıcıyı oluşturup atar ve tıklama işleyicisini atar. OnCreate yönteminin kodu burada gösterilmiştir:

SetContentView(Resource.Layout.HomeScreen); // loads the HomeScreen.axml as this activity's view
listView = FindViewById<ListView>(Resource.Id.List); // get reference to the ListView in the layout

// populate the listview with data
listView.Adapter = new HomeScreenAdapter(this, tableItems);
listView.ItemClick += OnListItemClick;  // to be defined

Son olarak işleyici tanımlanmalıdır ItemClick ; bu durumda yalnızca bir Toast ileti görüntüler:

void OnListItemClick(object sender, AdapterView.ItemClickEventArgs e)
{
   var listView = sender as ListView;
   var t = tableItems[e.Position];
   Android.Widget.Toast.MakeText(this, t.Heading, Android.Widget.ToastLength.Short).Show();
}

Sonuçta elde edilen ekran şöyle görünür:

Satır Seçici Rengini Özelleştirme

Bir satıra dokunulduğunda, kullanıcı geri bildirimi için satır vurgulanmalıdır. Özel görünüm CustomView.axml'nin yaptığı gibi arka plan rengi olarak belirttiğinde, seçim vurgusunun da geçersiz kılar. CustomView.axml dosyasındaki bu kod satırı arka planı açık yeşile ayarlar, ancak satıra dokunulduğunda görsel bir gösterge olmadığı anlamına da gelir:

android:background="#FFDAFF7F"

Vurgulama davranışını yeniden etkinleştirmek ve ayrıca kullanılan rengi özelleştirmek için arka plan özniteliğini özel bir seçici olarak ayarlayın. Seçici hem varsayılan arka plan rengini hem de vurgu rengini bildirir. Resources/Drawable/CustomSelector.xml dosyası aşağıdaki bildirimi içerir:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="false"
  android:state_selected="false"
  android:drawable="@color/cellback" />
<item android:state_pressed="true" >
  <shape>
     <gradient
      android:startColor="#E77A26"
        android:endColor="#E77A26"
        android:angle="270" />
  </shape>
</item>
<item android:state_selected="true"
  android:state_pressed="false"
  android:drawable="@color/cellback" />
</selector>

Özel seçiciye başvurmak için CustomView.axml dosyasındaki background özniteliğini şu şekilde değiştirin:

android:background="@drawable/CustomSelector"

Seçili satır ve karşılık gelen Toast ileti şu şekilde görünür:

Özel Düzenlerde Titremeyi Önleme

Android, düzen bilgilerini önbelleğe alarak kaydırma performansını ListView iyileştirmeye çalışır. Uzun süre kayan veri listeleriniz varsa, Activity'in AXML tanımındaki bildirimde özelliğini ListView de ayarlamanız android:cacheColorHint gerekir (özel satır düzeninizin arka planıyla aynı renk değerine). Bu ipucunun eklenememesi, kullanıcı özel satır arka plan renklerine sahip bir listede gezindikçe 'titremeye' neden olabilir.

Last updated on 2018-04-26

Aracılığıyla paylaş