Bagikan melalui

Ringkasan Bab 27. Perender kustom

  • Artikel

Catatan

Buku ini diterbitkan pada musim semi 2016, dan belum diperbarui sejak saat itu. Ada banyak dalam buku yang tetap berharga, tetapi beberapa materi sudah kedaluarsa, dan beberapa topik tidak lagi sepenuhnya benar atau lengkap.

Xamarin.Forms Elemen seperti Button dirender dengan tombol khusus platform yang dienkapsulasi di kelas bernama ButtonRenderer. Berikut adalah versi iOS dariButtonRenderer , versi Android dari ButtonRenderer, dan versi UWP dari ButtonRenderer.

Bab ini membahas bagaimana Anda dapat menulis perender Anda sendiri untuk membuat tampilan kustom yang memetakan ke objek khusus platform.

Hierarki kelas lengkap

Ada empat rakitan yang berisi Xamarin.Forms kode khusus platform. Anda dapat melihat sumber di GitHub menggunakan tautan ini:

Catatan

WinRT Rakitan yang disebutkan dalam buku tidak lagi menjadi bagian dari solusi ini.

Sampel PlatformClassHierarchy menampilkan hierarki kelas untuk rakitan yang valid untuk platform yang mengeksekusi.

Anda akan melihat kelas penting bernama ViewRenderer. Ini adalah kelas yang Anda dapatkan saat membuat perender khusus platform. Ini ada dalam tiga versi yang berbeda, karena terikat dengan sistem tampilan platform target:

iOS ViewRenderer<TView, TNativeView> memiliki argumen generik:

Android ViewRenderer<TView, TNativeView> memiliki argumen generik:

UWP ViewRenderer<TElement, TNativeElement> memiliki argumen generik bernama berbeda:

Saat menulis perender, Anda akan mendapatkan kelas dari View, dan kemudian menulis beberapa ViewRenderer kelas, satu untuk setiap platform yang didukung. Setiap implementasi khusus platform akan mereferensikan kelas asli yang berasal dari jenis yang Anda tentukan sebagai TNativeView parameter atau TNativeElement .

Halo, penyaji kustom!

Program HelloRenderers mereferensikan tampilan kustom bernama HelloView di kelasnya App .

Kelas HelloView ini termasuk dalam proyek HelloRenderers dan hanya berasal dari View.

Kelas HelloViewRenderer dalam proyek HelloRenderers.iOS berasal dari ViewRenderer<HelloView, UILabel>. Dalam penimpaan OnElementChanged , ini membuat iOS UILabel asli dan memanggil SetNativeControl.

Kelas HelloViewRenderer dalam proyek HelloRenderers.Droid berasal dari ViewRenderer<HelloView, TextView>. Dalam penimpaan OnElementChanged , ia membuat Android TextView dan memanggil SetNativeControl.

Kelas HelloViewRenderer di HelloRenderers.UWP dan proyek Windows lainnya berasal dari ViewRenderer<HelloView, TextBlock>. Dalam penimpaan OnElementChanged , ia membuat Windows TextBlock dan memanggil SetNativeControl.

Semua turunan ViewRenderer berisi ExportRenderer atribut pada tingkat perakitan yang mengaitkan HelloView kelas dengan kelas tertentu HelloViewRenderer . Ini adalah cara Xamarin.Forms menemukan perender dalam proyek platform individual:

Cuplikan layar tiga kali dari Halo Tampilan

Perender dan properti

Set perender berikutnya mengimplementasikan gambar elips, dan terletak di berbagai proyek Xamarin.Formssolusi Book.Platform.

Kelas EllipseView berada di Xamarin.Formsplatform Book.Platform . Kelas ini mirip BoxView dengan dan hanya mendefinisikan satu properti: Color dari jenis Color.

Perender dapat mentransfer nilai properti yang View diatur pada ke objek asli dengan mengambil alih OnElementPropertyChanged metode dalam perender. Dalam metode ini (dan di sebagian besar perender), dua properti tersedia:

  • ElementXamarin.Forms, elemen
  • Control, tampilan asli atau widget atau objek kontrol

Jenis properti ini ditentukan oleh parameter generik ke ViewRenderer. Dalam contoh ini, Element berjenis EllipseView.

Oleh karena ituOnElementPropertyChanged, penimpaan Element dapat mentransfer Color nilai ke objek asliControl, mungkin dengan semacam konversi. Ketiga perender tersebut adalah:

Kelas EllipseDemo menampilkan beberapa objek ini EllipseView :

Cuplikan layar tiga kali dari Demo Elips

BouncingBall memantul EllipseView dari sisi layar.

Perender dan peristiwa

Dimungkinkan juga bagi perender untuk secara tidak langsung menghasilkan peristiwa. Kelas StepSlider ini mirip dengan normal Xamarin.FormsSlider tetapi memungkinkan menentukan sejumlah langkah diskrit antara Minimum nilai dan Maximum .

Ketiga perender tersebut adalah:

Perender mendeteksi perubahan pada kontrol asli, lalu memanggil SetValueFromRenderer, yang mereferensikan properti yang dapat diikat yang ditentukan dalam StepSlider, perubahan yang menyebabkan StepSlider peristiwa diaktifkan ValueChanged .

Sampel StepSliderDemo menunjukkan slider baru ini.