Menyesuaikan Tampilan Sel ListView

Artikel
09/12/2019

Kelas Xamarin.FormsListView ini digunakan untuk menyajikan daftar yang dapat digulir, yang dapat disesuaikan melalui penggunaan ViewCell elemen. Elemen ViewCell dapat menampilkan teks dan gambar, menunjukkan status benar/salah, dan menerima input pengguna.

Sel Bawaan

Xamarin.Forms dilengkapi dengan sel bawaan yang berfungsi untuk banyak aplikasi:

TextCell kontrol digunakan untuk menampilkan teks dengan baris kedua opsional untuk teks detail.
ImageCell kontrol mirip TextCelldengan s tetapi menyertakan gambar di sebelah kiri teks.
SwitchCell kontrol digunakan untuk menyajikan dan menangkap status on/off atau true/false.
EntryCell kontrol digunakan untuk menyajikan data teks yang dapat diedit pengguna.

Kontrol SwitchCell dan EntryCell lebih umum digunakan dalam konteks TableView.

TextCell

TextCell adalah sel untuk menampilkan teks, secara opsional dengan baris kedua sebagai teks detail. Cuplikan layar berikut menunjukkan TextCell item di iOS dan Android:

Contoh TextCell Default

TextCells dirender sebagai kontrol asli saat runtime, sehingga performa sangat baik dibandingkan dengan kustom ViewCell. TextCells dapat disesuaikan, memungkinkan Anda mengatur properti berikut:

Text – teks yang ditampilkan pada baris pertama, dalam font besar.
Detail – teks yang ditampilkan di bawah baris pertama, dalam font yang lebih kecil.
TextColor – warna teks.
DetailColor – warna teks detail

Cuplikan layar berikut ini memperlihatkan TextCell item dengan properti warna yang dikustomisasi:

Contoh TextCell Kustom

ImageCell

ImageCell, seperti TextCell, dapat digunakan untuk menampilkan teks dan teks detail sekunder, dan menawarkan performa yang bagus dengan menggunakan kontrol asli setiap platform. ImageCell berbeda dari TextCell di dalamnya menampilkan gambar di sebelah kiri teks.

Cuplikan layar berikut menunjukkan ImageCell item di iOS dan Android:

ImageCell berguna ketika Anda perlu menampilkan daftar data dengan aspek visual, seperti daftar kontak atau film. ImageCells dapat disesuaikan, memungkinkan Anda mengatur:

Text – teks yang ditampilkan pada baris pertama, dalam font besar
Detail – teks yang ditampilkan di bawah baris pertama, dalam font yang lebih kecil
TextColor – warna teks
DetailColor – warna teks detail
ImageSource – gambar yang akan ditampilkan di samping teks

Cuplikan layar berikut ini memperlihatkan ImageCell item dengan properti warna yang dikustomisasi:

Sel Kustom

Sel kustom memungkinkan Anda membuat tata letak sel yang tidak didukung oleh sel bawaan. Misalnya, Anda mungkin ingin menyajikan sel dengan dua label yang memiliki bobot sama. A TextCell tidak akan cukup karena TextCell memiliki satu label yang lebih kecil. Sebagian besar kustomisasi sel menambahkan data baca-saja tambahan (seperti label tambahan, gambar, atau informasi tampilan lainnya).

Semua sel kustom harus berasal dari ViewCell, kelas dasar yang sama dengan yang digunakan semua jenis sel bawaan.

Xamarin.Forms menawarkan perilaku penembolokan pada ListView kontrol yang dapat meningkatkan performa gulir untuk beberapa jenis sel kustom.

Cuplikan layar berikut ini memperlihatkan contoh sel kustom:

XAML

Sel kustom yang diperlihatkan dalam cuplikan layar sebelumnya dapat dibuat dengan XAML berikut:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="demoListView.ImageCellPage">
    <ContentPage.Content>
        <ListView  x:Name="listView">
            <ListView.ItemTemplate>
                <DataTemplate>
                    <ViewCell>
                        <StackLayout BackgroundColor="#eee"
                        Orientation="Vertical">
                            <StackLayout Orientation="Horizontal">
                                <Image Source="{Binding image}" />
                                <Label Text="{Binding title}"
                                TextColor="#f35e20" />
                                <Label Text="{Binding subtitle}"
                                HorizontalOptions="EndAndExpand"
                                TextColor="#503026" />
                            </StackLayout>
                        </StackLayout>
                    </ViewCell>
                </DataTemplate>
            </ListView.ItemTemplate>
        </ListView>
    </ContentPage.Content>
</ContentPage>

XAML berfungsi sebagai berikut:

Sel kustom disarangkan di dalam DataTemplate, yang berada di dalam ListView.ItemTemplate. Ini adalah proses yang sama seperti menggunakan sel bawaan apa pun.
ViewCell adalah jenis sel kustom. Anak dari DataTemplate elemen harus dari, atau berasal dari, ViewCell kelas .
ViewCellDi dalam tata letak , dapat dikelola oleh tata letak apa punXamarin.Forms. Dalam contoh ini, tata letak dikelola oleh StackLayout, yang memungkinkan warna latar belakang disesuaikan.

Catatan

Properti apa pun yang StackLayout dapat diikat dapat diikat di dalam sel kustom. Namun, kemampuan ini tidak ditampilkan dalam contoh XAML.

Kode

Sel kustom juga dapat dibuat dalam kode. Pertama, kelas kustom yang berasal dari ViewCell harus dibuat:

public class CustomCell : ViewCell
    {
        public CustomCell()
        {
            //instantiate each of our views
            var image = new Image ();
            StackLayout cellWrapper = new StackLayout ();
            StackLayout horizontalLayout = new StackLayout ();
            Label left = new Label ();
            Label right = new Label ();

            //set bindings
            left.SetBinding (Label.TextProperty, "title");
            right.SetBinding (Label.TextProperty, "subtitle");
            image.SetBinding (Image.SourceProperty, "image");

            //Set properties for desired design
            cellWrapper.BackgroundColor = Color.FromHex ("#eee");
            horizontalLayout.Orientation = StackOrientation.Horizontal;
            right.HorizontalOptions = LayoutOptions.EndAndExpand;
            left.TextColor = Color.FromHex ("#f35e20");
            right.TextColor = Color.FromHex ("503026");

            //add views to the view hierarchy
            horizontalLayout.Children.Add (image);
            horizontalLayout.Children.Add (left);
            horizontalLayout.Children.Add (right);
            cellWrapper.Children.Add (horizontalLayout);
            View = cellWrapper;
        }
    }

Di konstruktor halaman, properti ListView ItemTemplate diatur ke dengan DataTemplateCustomCell jenis yang ditentukan:

public partial class ImageCellPage : ContentPage
    {
        public ImageCellPage ()
        {
            InitializeComponent ();
            listView.ItemTemplate = new DataTemplate (typeof(CustomCell));
        }
    }

Mengikat Perubahan Konteks

Saat mengikat ke instans tipe BindableProperty sel kustom, kontrol UI yang menampilkan BindableProperty nilai harus menggunakan OnBindingContextChanged penimpaan untuk mengatur data yang akan ditampilkan di setiap sel, bukan konstruktor sel, seperti yang ditunjukkan dalam contoh kode berikut:

public class CustomCell : ViewCell
{
    Label nameLabel, ageLabel, locationLabel;

    public static readonly BindableProperty NameProperty =
        BindableProperty.Create ("Name", typeof(string), typeof(CustomCell), "Name");
    public static readonly BindableProperty AgeProperty =
        BindableProperty.Create ("Age", typeof(int), typeof(CustomCell), 0);
    public static readonly BindableProperty LocationProperty =
        BindableProperty.Create ("Location", typeof(string), typeof(CustomCell), "Location");

    public string Name
    {
        get { return(string)GetValue (NameProperty); }
        set { SetValue (NameProperty, value); }
    }

    public int Age
    {
        get { return(int)GetValue (AgeProperty); }
        set { SetValue (AgeProperty, value); }
    }

    public string Location
    {
        get { return(string)GetValue (LocationProperty); }
        set { SetValue (LocationProperty, value); }
    }
    ...

    protected override void OnBindingContextChanged ()
    {
        base.OnBindingContextChanged ();

        if (BindingContext != null)
        {
            nameLabel.Text = Name;
            ageLabel.Text = Age.ToString ();
            locationLabel.Text = Location;
        }
    }
}

Penimpaan OnBindingContextChanged akan dipanggil ketika BindingContextChanged peristiwa diaktifkan, sebagai respons terhadap nilai properti yang BindingContext berubah. Oleh karena itu, ketika BindingContext perubahan, kontrol UI yang menampilkan BindableProperty nilai harus mengatur datanya. Perhatikan bahwa BindingContext harus diperiksa nilainya null , karena ini dapat diatur oleh Xamarin.Forms untuk pengumpulan sampah, yang pada gilirannya akan mengakibatkan penimpaan dipanggil OnBindingContextChanged .

Atau, kontrol UI dapat mengikat ke BindableProperty instans untuk menampilkan nilainya, yang menghapus kebutuhan untuk mengambil alih OnBindingContextChanged metode.

Catatan

Saat mengambil alih OnBindingContextChanged, pastikan bahwa metode kelas OnBindingContextChanged dasar dipanggil sehingga delegasi terdaftar menerima peristiwa tersebut BindingContextChanged .

Di XAML, mengikat jenis sel kustom ke data dapat dicapai seperti yang ditunjukkan dalam contoh kode berikut:

<ListView x:Name="listView">
    <ListView.ItemTemplate>
        <DataTemplate>
            <local:CustomCell Name="{Binding Name}" Age="{Binding Age}" Location="{Binding Location}" />
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Ini mengikat properti , , Agedan Location yang dapat diikat dalam CustomCell instansName, ke Nameproperti , Age, dan Location dari setiap objek dalam koleksi yang mendasar.

Pengikatan yang setara dalam C# ditampilkan dalam contoh kode berikut:

var customCell = new DataTemplate (typeof(CustomCell));
customCell.SetBinding (CustomCell.NameProperty, "Name");
customCell.SetBinding (CustomCell.AgeProperty, "Age");
customCell.SetBinding (CustomCell.LocationProperty, "Location");

var listView = new ListView
{
    ItemsSource = people,
    ItemTemplate = customCell
};

Di iOS dan Android, jika ListView elemen daur ulang dan sel kustom menggunakan perender kustom, perender kustom harus menerapkan pemberitahuan perubahan properti dengan benar. Ketika sel digunakan kembali nilai propertinya akan berubah saat konteks pengikatan diperbarui ke sel yang tersedia, dengan PropertyChanged peristiwa yang dimunculkan. Untuk informasi selengkapnya, lihat Menyesuaikan ViewCell. Untuk informasi selengkapnya tentang daur ulang sel, lihat Strategi Penembolokan.

Bagikan melalui