ListView Hücre Görünümünü Özelleştirme

sınıfı Xamarin.FormsListView , öğelerin kullanımıyla ViewCell özelleştirilebilen kaydırılabilir listeler sunmak için kullanılır. Bir ViewCell öğe metin ve görüntüleri görüntüleyebilir, true/false durumunu gösterebilir ve kullanıcı girişi alabilir.

Yerleşik Hücreler

Xamarin.Forms birçok uygulamada çalışan yerleşik hücrelerle birlikte gelir:

TextCell denetimler, ayrıntı metni için isteğe bağlı ikinci satır içeren metinleri görüntülemek için kullanılır.
ImageCell denetimleri s ile TextCellbenzerdir, ancak metnin soluna bir resim ekler.
SwitchCell denetimleri, açık/kapalı veya true/false durumlarını sunmak ve yakalamak için kullanılır.
EntryCell denetimleri, kullanıcının düzenleyebileceği metin verilerini sunmak için kullanılır.

SwitchCell ve EntryCell denetimleri daha yaygın olarak bağlamında TableViewkullanılır.

TextCell

TextCell , isteğe bağlı olarak ikinci satırı ayrıntı metni olarak içeren, metin görüntülemeye yönelik bir hücredir. Aşağıdaki ekran görüntüsünde iOS ve Android'de öğeler gösterilmektedir TextCell :

Varsayılan TextCell Örneği

TextCell'ler çalışma zamanında yerel denetimler olarak işlenir, bu nedenle özel ViewCellile karşılaştırıldığında performans çok iyidir. TextCell'ler özelleştirilebilir ve aşağıdaki özellikleri ayarlamanıza olanak sağlar:

Text – birinci satırda, büyük yazı tipinde gösterilen metin.
Detail – ilk satırın altında, daha küçük bir yazı tipinde gösterilen metin.
TextColor – metnin rengi.
DetailColor – ayrıntı metninin rengi

Aşağıdaki ekran görüntüsünde, özelleştirilmiş renk özelliklerine sahip öğeler gösterilmektedir TextCell :

Özel TextCell Örneği

ImageCell

ImageCellgibi TextCell, metin ve ikincil ayrıntı metnini görüntülemek için kullanılabilir ve her platformun yerel denetimlerini kullanarak harika performans sunar. ImageCell , metnin solunda bir resim görüntülemesinden TextCell farklıdır.

Aşağıdaki ekran görüntüsünde iOS ve Android'de öğeler gösterilmektedir ImageCell :

ImageCell , kişi veya film listesi gibi görsel bir yönü olan bir veri listesi görüntülemeniz gerektiğinde kullanışlıdır. ImageCellS'ler özelleştirilebilir ve şunları ayarlamanıza olanak sağlar:

Text – büyük yazı tipinde ilk satırda gösterilen metin
Detail – ilk satırın altında, daha küçük bir yazı tipinde gösterilen metin
TextColor – metnin rengi
DetailColor – ayrıntı metninin rengi
ImageSource – metnin yanında görüntülenecek resim

Aşağıdaki ekran görüntüsünde, özelleştirilmiş renk özelliklerine sahip öğeler gösterilmektedir ImageCell :

Özel Hücreler

Özel hücreler, yerleşik hücreler tarafından desteklenmeyen hücre düzenleri oluşturmanıza olanak sağlar. Örneğin, eşit ağırlığa sahip iki etiket içeren bir hücre sunmak isteyebilirsiniz. küçük bir etikete sahip olduğundan TextCell A TextCell yetersiz olacaktır. Çoğu hücre özelleştirmesi ek salt okunur veriler (ek etiketler, resimler veya diğer görüntü bilgileri gibi) ekler.

Tüm özel hücreler, tüm yerleşik hücre türlerinin kullandığı temel sınıftan türetilmelidir ViewCell.

Xamarin.Forms, denetim üzerinde ListView bazı özel hücre türleri için kaydırma performansını geliştirebilecek bir önbelleğe alma davranışı sunar.

Aşağıdaki ekran görüntüsünde özel hücre örneği gösterilmektedir:

XAML

Önceki ekran görüntüsünde gösterilen özel hücre aşağıdaki XAML ile oluşturulabilir:

<?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 aşağıdaki gibi çalışır:

Özel hücre, içinde bulunan bir DataTemplateiçinde iç içe yerleştirilmiştir ListView.ItemTemplate. Bu, herhangi bir yerleşik hücreyi kullanmakla aynı işlemdir.
ViewCell özel hücrenin türüdür. öğesinin DataTemplate alt öğesi sınıfından olmalıdır veya sınıfından ViewCell türetilmelidir.
ViewCelliçinde, düzeni herhangi bir Xamarin.Forms düzen tarafından yönetilebilir. Bu örnekte düzen, arka plan renginin özelleştirilmesine olanak tanıyan bir StackLayoutile yönetilir.

Not

Bu özelliğin StackLayout bağlanabilir olması, özel bir hücrenin içine bağlanabilir. Ancak bu özellik XAML örneğinde gösterilmez.

Kod

Kodda özel bir hücre de oluşturulabilir. İlk olarak, öğesinden ViewCell türetilen özel bir sınıf oluşturulmalıdır:

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;
        }
    }

Sayfa oluşturucusunda, ListView'un ItemTemplate özelliği belirtilen türe sahip CustomCell olarak DataTemplate ayarlanır:

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

Bağlama Bağlam Değişiklikleri

Bir özel hücre türünün BindableProperty örneklerine bağlanırken, değerleri görüntüleyen BindableProperty kullanıcı arabirimi denetimleri, aşağıdaki kod örneğinde gösterildiği gibi, hücre oluşturucu yerine her hücrede görüntülenecek verileri ayarlamak için geçersiz kılmayı kullanmalıdır OnBindingContextChanged :

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;
        }
    }
}

Olay OnBindingContextChanged tetiklendiğinde, değişen özelliğin BindingContextChanged değerine BindingContext yanıt olarak geçersiz kılma çağrılır. Bu nedenle, değişiklikler olduğunda BindingContext , değerleri görüntüleyen BindableProperty kullanıcı arabirimi denetimleri verilerini ayarlamalıdır. BindingContext Çöp toplama için tarafından ayarlanabildiği Xamarin.Forms için null değerinin denetlenmesi gerektiğini ve bunun sonucunda geçersiz kılmanın OnBindingContextChanged çağrılacağını unutmayın.

Alternatif olarak, kullanıcı arabirimi denetimleri örneklerine bağlanarak BindableProperty değerlerini görüntüleyebilir ve bu da yöntemi geçersiz kılma gereksinimini OnBindingContextChanged ortadan kaldırır.

Not

geçersiz kılınırken OnBindingContextChanged, kayıtlı temsilcilerin olayı alması için temel sınıfın OnBindingContextChanged yönteminin BindingContextChanged çağrıldığından emin olun.

XAML'de, aşağıdaki kod örneğinde gösterildiği gibi özel hücre türünü verilere bağlama işlemi yapılabilir:

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

Bu, örnekteki Name, Ageve Location bağlanabilir özelliklerini, temel koleksiyondaki CustomCell her nesnenin Name, Ageve Location özelliklerine bağlar.

C# dilinde eşdeğer bağlama aşağıdaki kod örneğinde gösterilmiştir:

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
};

iOS ve Android'de, öğesi geri dönüşüm öğeleriyse ve özel hücre özel işleyici kullanıyorsa ListView , özel işleyici özellik değişikliği bildirimini doğru şekilde uygulamalıdır. Hücreler yeniden kullanıldığında, bağlama bağlamı kullanılabilir bir hücreye PropertyChanged güncelleştirildiğinde ve olaylar tetiklendiğinde özellik değerleri değişir. Daha fazla bilgi için bkz . ViewCell'i Özelleştirme. Hücre geri dönüşümü hakkında daha fazla bilgi için bkz . Önbelleğe Alma Stratejisi.

Last updated on 2019-09-12

Aracılığıyla paylaş