Menyesuaikan Entri

Xamarin.Forms Kontrol Entri memungkinkan satu baris teks diedit. Artikel ini menunjukkan cara membuat perender kustom untuk kontrol Entri, memungkinkan pengembang untuk mengambil alih penyajian asli default dengan kustomisasi khusus platform mereka sendiri.

Setiap Xamarin.Forms kontrol memiliki perender yang menyertainya untuk setiap platform yang membuat instans kontrol asli. Entry Ketika kontrol dirender oleh Xamarin.Forms aplikasi, di iOS EntryRenderer kelas dibuat, yang pada gilirannya membuat instans kontrol asliUITextField. Pada platform Android, kelas membuat EntryRenderer instans EditText kontrol. Pada Platform Windows Universal (UWP), EntryRenderer kelas membuat instans TextBox kontrol. Untuk informasi selengkapnya tentang kelas perender dan kontrol asli yang Xamarin.Forms mengontrol peta ke, lihat Kelas Dasar Perender dan Kontrol Asli.

Diagram berikut mengilustrasikan hubungan antara Entry kontrol dan kontrol asli terkait yang mengimplementasikannya:

Proses penyajian dapat dimanfaatkan untuk mengimplementasikan penyesuaian khusus platform dengan membuat perender kustom untuk Entry kontrol pada setiap platform. Proses untuk melakukan ini adalah sebagai berikut:

1. BuatXamarin.Forms kontrol kustom.
2. Gunakan kontrol kustom dari Xamarin.Forms.
3. Buat perender kustom untuk kontrol pada setiap platform.

Setiap item sekarang akan dibahas pada gilirannya, untuk mengimplementasikan Entry kontrol yang memiliki warna latar belakang yang berbeda pada setiap platform.

Penting

Artikel ini menjelaskan cara membuat perender kustom sederhana. Namun, tidak perlu membuat perender kustom untuk mengimplementasikan Entry yang memiliki warna latar belakang yang berbeda pada setiap platform. Ini dapat lebih mudah dicapai dengan menggunakan Device kelas, atau OnPlatform ekstensi markup, untuk menyediakan nilai khusus platform. Untuk informasi selengkapnya, lihat Menyediakan Nilai Khusus Platform dan Ekstensi Markup OnPlatform.

Membuat Kontrol Entri Kustom

Kontrol kustom Entry dapat dibuat dengan subkelas kontrol, seperti yang Entry ditunjukkan dalam contoh kode berikut:

public class MyEntry : Entry
{
}

Kontrol MyEntry dibuat dalam proyek pustaka .NET Standard dan hanyalah Entry kontrol. Kustomisasi kontrol akan dilakukan di perender kustom, sehingga tidak ada implementasi tambahan yang MyEntry diperlukan dalam kontrol.

Mengonsumsi Kontrol Kustom

MyEntry Kontrol dapat direferensikan dalam XAML dalam proyek pustaka Standar .NET dengan mendeklarasikan namespace untuk lokasinya dan menggunakan awalan namespace pada elemen kontrol. Contoh kode berikut menunjukkan bagaimana MyEntry kontrol dapat digunakan oleh halaman XAML:

<ContentPage ...
    xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
    ...>
    ...
    <local:MyEntry Text="In Shared Code" />
    ...
</ContentPage>

local Awalan namespace dapat diberi nama apa pun. Namun, clr-namespace nilai dan assembly harus cocok dengan detail kontrol kustom. Setelah namespace dinyatakan awalan digunakan untuk mereferensikan kontrol kustom.

Contoh kode berikut menunjukkan bagaimana MyEntry kontrol dapat dikonsumsi oleh halaman C#:

public class MainPage : ContentPage
{
  public MainPage ()
  {
    Content = new StackLayout {
      Children = {
        new Label {
          Text = "Hello, Custom Renderer !",
        },
        new MyEntry {
          Text = "In Shared Code",
        }
      },
      VerticalOptions = LayoutOptions.CenterAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
    };
  }
}

Kode ini membuat instans objek baru ContentPage yang akan menampilkan kontrol dan MyEntry berpusat Label baik secara vertikal maupun horizontal pada halaman.

Perender kustom sekarang dapat ditambahkan ke setiap proyek aplikasi untuk menyesuaikan tampilan kontrol pada setiap platform.

Membuat Perender Kustom di setiap Platform

Proses untuk membuat kelas perender kustom adalah sebagai berikut:

1. Buat subkelas EntryRenderer kelas yang merender kontrol asli.
2. Ambil alih OnElementChanged metode yang merender kontrol asli dan logika tulis untuk menyesuaikan kontrol. Metode ini dipanggil ketika kontrol yang Xamarin.Forms sesuai dibuat.
3. ExportRenderer Tambahkan atribut ke kelas perender kustom untuk menentukan bahwa atribut tersebut akan digunakan untuk merender Xamarin.Forms kontrol. Atribut ini digunakan untuk mendaftarkan perender kustom dengan Xamarin.Forms.

Catatan

Ini bersifat opsional untuk menyediakan perender kustom di setiap proyek platform. Jika perender kustom tidak terdaftar, maka perender default untuk kelas dasar kontrol akan digunakan.

Diagram berikut mengilustrasikan tanggung jawab setiap proyek dalam aplikasi sampel, bersama dengan hubungan di antara mereka:

Kontrol MyEntry dirender oleh kelas khusus MyEntryRenderer platform, yang semuanya berasal dari EntryRenderer kelas untuk setiap platform. Ini menghasilkan setiap MyEntry kontrol yang dirender dengan warna latar belakang khusus platform, seperti yang ditunjukkan pada cuplikan layar berikut:

Kelas EntryRenderer mengekspos OnElementChanged metode , yang dipanggil ketika Xamarin.Forms kontrol dibuat untuk merender kontrol asli yang sesuai. Metode ini mengambil ElementChangedEventArgs parameter yang berisi OldElement properti dan NewElement . Properti ini mewakili Xamarin.Forms elemen tempat perender dilampirkan, dan Xamarin.Forms elemen yang dilampirkan oleh perender. Dalam aplikasi OldElement sampel, properti akan menjadi null dan NewElement properti akan berisi referensi ke MyEntry kontrol.

Versi yang ditimpa dari OnElementChanged metode di MyEntryRenderer kelas adalah tempat untuk melakukan kustomisasi kontrol asli. Referensi yang diketik ke kontrol asli yang digunakan pada platform dapat diakses melalui Control properti . Selain itu, referensi ke Xamarin.Forms kontrol yang sedang dirender dapat diperoleh melalui Element properti , meskipun tidak digunakan dalam aplikasi sampel.

Setiap kelas perender kustom dihiasi dengan ExportRenderer atribut yang mendaftarkan perender dengan Xamarin.Forms. Atribut mengambil dua parameter – nama jenis kontrol yang Xamarin.Forms dirender, dan nama jenis perender kustom. assembly Awalan ke atribut menentukan bahwa atribut berlaku untuk seluruh rakitan.

Bagian berikut membahas implementasi setiap kelas perender kustom khusus MyEntryRenderer platform.

Membuat Perender Kustom di iOS

Contoh kode berikut menunjukkan perender kustom untuk platform iOS:

using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged (e);

            if (Control != null) {
                // do whatever you want to the UITextField here!
                Control.BackgroundColor = UIColor.FromRGB (204, 153, 255);
                Control.BorderStyle = UITextBorderStyle.Line;
            }
        }
    }
}

Panggilan ke metode kelas OnElementChanged dasar membuat instans kontrol iOS UITextField , dengan referensi ke kontrol yang ditetapkan ke properti perender Control . Warna latar belakang kemudian diatur ke ungu muda dengan UIColor.FromRGB metode .

Membuat Custom Renderer di Android

Contoh kode berikut menunjukkan perender kustom untuk platform Android:

using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.Android
{
    class MyEntryRenderer : EntryRenderer
    {
        public MyEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
            }
        }
    }
}

Panggilan ke metode kelas OnElementChanged dasar membuat instans kontrol Android EditText , dengan referensi ke kontrol yang ditetapkan ke properti perender Control . Warna latar belakang kemudian diatur ke hijau muda dengan Control.SetBackgroundColor metode .

Membuat Perender Kustom di UWP

Contoh kode berikut menunjukkan perender kustom untuk UWP:

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.UWP
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Background = new SolidColorBrush(Colors.Cyan);
            }
        }
    }
}

Panggilan ke metode kelas OnElementChanged dasar membuat instans TextBox kontrol, dengan referensi ke kontrol yang ditetapkan ke properti perender Control . Warna latar belakang kemudian diatur ke sian dengan membuat SolidColorBrush instans.

Ringkasan

Artikel ini telah menunjukkan cara membuat perender kontrol kustom untuk Xamarin.FormsEntry kontrol, memungkinkan pengembang mengambil alih penyajian asli default dengan penyajian khusus platform mereka sendiri. Perender kustom memberikan pendekatan yang kuat untuk menyesuaikan tampilan Xamarin.Forms kontrol. Mereka dapat digunakan untuk perubahan gaya kecil atau penyesuaian tata letak dan perilaku khusus platform yang canggih.