Menyesuaikan ContentPage

ContentPage adalah elemen visual yang menampilkan satu tampilan dan menempati sebagian besar layar. Artikel ini menunjukkan cara membuat perender kustom untuk halaman ContentPage, memungkinkan pengembang untuk mengambil alih penyajian asli default dengan penyesuaian khusus platform mereka sendiri.

Setiap Xamarin.Forms kontrol memiliki perender yang menyertainya untuk setiap platform yang membuat instans kontrol asli. ContentPage Ketika dirender oleh Xamarin.Forms aplikasi, di iOS PageRenderer kelas dibuat, yang pada gilirannya membuat instans kontrol asliUIViewController. Pada platform Android, PageRenderer kelas membuat instans ViewGroup kontrol. Pada Platform Windows Universal (UWP), PageRenderer kelas membuat instans FrameworkElement 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 ContentPage kontrol asli terkait dan yang mengimplementasikannya:

Proses penyajian dapat dimanfaatkan untuk menerapkan penyesuaian khusus platform dengan membuat perender kustom untuk ContentPage di setiap platform. Proses untuk melakukan ini adalah sebagai berikut:

1. BuatXamarin.Forms halaman.
2. Gunakan halaman dari Xamarin.Forms.
3. Buat perender kustom untuk halaman di setiap platform.

Setiap item sekarang akan dibahas pada gilirannya, untuk mengimplementasikan CameraPage yang menyediakan umpan kamera langsung dan kemampuan untuk mengambil foto.

Xamarin.Forms Membuat Halaman

Yang tidak ContentPage diubah dapat ditambahkan ke proyek bersama Xamarin.Forms , seperti yang ditunjukkan dalam contoh kode XAML berikut:

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="CustomRenderer.CameraPage">
    <ContentPage.Content>
    </ContentPage.Content>
</ContentPage>

Demikian pula, file code-behind untuk ContentPage juga harus tetap tidak diubah, seperti yang ditunjukkan dalam contoh kode berikut:

public partial class CameraPage : ContentPage
{
    public CameraPage ()
    {
        // A custom renderer is used to display the camera UI
        InitializeComponent ();
    }
}

Contoh kode berikut menunjukkan bagaimana halaman dapat dibuat di C#:

public class CameraPageCS : ContentPage
{
    public CameraPageCS ()
    {
    }
}

Instans CameraPage akan digunakan untuk menampilkan umpan kamera langsung di setiap platform. Kustomisasi kontrol akan dilakukan di perender kustom, sehingga tidak ada implementasi tambahan yang CameraPage diperlukan di kelas .

Mengkonsumsi Xamarin.Forms Halaman

CameraPage Kosong harus ditampilkan oleh Xamarin.Forms aplikasi. Ini terjadi ketika tombol pada MainPage instans diketuk, yang pada gilirannya OnTakePhotoButtonClicked menjalankan metode, seperti yang ditunjukkan dalam contoh kode berikut:

async void OnTakePhotoButtonClicked (object sender, EventArgs e)
{
    await Navigation.PushAsync (new CameraPage ());
}

Kode ini hanya menavigasi ke CameraPage, di mana perender kustom akan menyesuaikan tampilan halaman di setiap platform.

Membuat Perender Halaman di setiap Platform

Proses untuk membuat kelas perender kustom adalah sebagai berikut:

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

Catatan

Ini bersifat opsional untuk menyediakan perender halaman di setiap proyek platform. Jika perender halaman tidak terdaftar, maka perender default untuk halaman akan digunakan.

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

CameraPage Instans dirender oleh kelas khusus CameraPageRenderer platform, yang semuanya berasal dari kelas untuk platform tersebutPageRenderer. Ini menghasilkan setiap CameraPage instans yang dirender dengan umpan kamera langsung, seperti yang ditunjukkan pada cuplikan layar berikut:

Kelas PageRenderer mengekspos OnElementChanged metode , yang dipanggil ketika Xamarin.Forms halaman 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 CameraPage instans.

Versi metode yang OnElementChanged ditimpa di CameraPageRenderer kelas adalah tempat untuk melakukan penyesuaian halaman asli. Referensi ke Xamarin.Forms instans halaman yang sedang dirender dapat diperoleh melalui Element properti .

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

Bagian berikut membahas implementasi perender CameraPageRenderer kustom untuk setiap platform.

Membuat Perender Halaman di iOS

Contoh kode berikut menunjukkan perender halaman untuk platform iOS:

[assembly:ExportRenderer (typeof(CameraPage), typeof(CameraPageRenderer))]
namespace CustomRenderer.iOS
{
    public class CameraPageRenderer : PageRenderer
    {
        ...

        protected override void OnElementChanged (VisualElementChangedEventArgs e)
        {
            base.OnElementChanged (e);

            if (e.OldElement != null || Element == null) {
                return;
            }

            try {
                SetupUserInterface ();
                SetupEventHandlers ();
                SetupLiveCameraStream ();
                AuthorizeCameraUse ();
            } catch (Exception ex) {
                System.Diagnostics.Debug.WriteLine (@"            ERROR: ", ex.Message);
            }
        }
        ...
    }
}

Panggilan ke metode kelas OnElementChanged dasar membuat instans kontrol iOS UIViewController . Aliran kamera langsung hanya dirender asalkan perender belum dilampirkan ke elemen yang ada Xamarin.Forms , dan asalkan ada instans halaman yang sedang dirender oleh perender kustom.

Halaman kemudian disesuaikan dengan serangkaian metode yang menggunakan AVCapture API untuk menyediakan streaming langsung dari kamera dan kemampuan untuk mengambil foto.

Membuat Perender Halaman di Android

Contoh kode berikut menunjukkan perender halaman untuk platform Android:

[assembly: ExportRenderer(typeof(CameraPage), typeof(CameraPageRenderer))]
namespace CustomRenderer.Droid
{
    public class CameraPageRenderer : PageRenderer, TextureView.ISurfaceTextureListener
    {
        ...
        public CameraPageRenderer(Context context) : base(context)
        {
        }

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

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            try
            {
                SetupUserInterface();
                SetupEventHandlers();
                AddView(view);
            }
            catch (Exception ex)
            {
                System.Diagnostics.Debug.WriteLine(@"            ERROR: ", ex.Message);
            }
        }
        ...
    }
}

Panggilan ke metode kelas OnElementChanged dasar membuat instans kontrol Android ViewGroup , yang merupakan sekelompok tampilan. Aliran kamera langsung hanya dirender asalkan perender belum dilampirkan ke elemen yang ada Xamarin.Forms , dan asalkan ada instans halaman yang sedang dirender oleh perender kustom.

Halaman kemudian disesuaikan dengan memanggil serangkaian metode yang menggunakan Camera API untuk menyediakan streaming langsung dari kamera dan kemampuan untuk mengambil foto, sebelum AddView metode dipanggil untuk menambahkan antarmuka pengguna streaming kamera langsung ke ViewGroup. Perhatikan bahwa di Android juga perlu mengambil alih OnLayout metode untuk melakukan operasi pengukuran dan tata letak pada tampilan.

Membuat Perender Halaman di UWP

Contoh kode berikut menunjukkan perender halaman untuk UWP:

[assembly: ExportRenderer(typeof(CameraPage), typeof(CameraPageRenderer))]
namespace CustomRenderer.UWP
{
    public class CameraPageRenderer : PageRenderer
    {
        ...
        protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.Page> e)
        {
            base.OnElementChanged(e);

            if (e.OldElement != null || Element == null)
            {
                return;
            }

            try
            {
                ...
                SetupUserInterface();
                SetupBasedOnStateAsync();

                this.Children.Add(page);
            }
            ...
        }

        protected override Size ArrangeOverride(Size finalSize)
        {
            page.Arrange(new Windows.Foundation.Rect(0, 0, finalSize.Width, finalSize.Height));
            return finalSize;
        }
        ...
    }
}

Panggilan ke metode kelas OnElementChanged dasar membuat instans FrameworkElement kontrol, tempat halaman dirender. Aliran kamera langsung hanya dirender asalkan perender belum dilampirkan ke elemen yang ada Xamarin.Forms , dan asalkan ada instans halaman yang sedang dirender oleh perender kustom. Halaman kemudian dikustomisasi dengan memanggil serangkaian metode yang menggunakan MediaCapture API untuk menyediakan streaming langsung dari kamera dan kemampuan untuk mengambil foto sebelum halaman yang disesuaikan ditambahkan ke Children koleksi untuk ditampilkan.

Saat menerapkan perender kustom yang berasal dari PageRenderer UWP, ArrangeOverride metode ini juga harus diimplementasikan untuk mengatur kontrol halaman, karena perender dasar tidak tahu apa yang harus dilakukan dengan mereka. Jika tidak, hasil halaman kosong. Oleh karena itu, dalam contoh ArrangeOverride ini metode memanggil metode pada Page instansArrange.

Catatan

Penting untuk menghentikan dan membuang objek yang menyediakan akses ke kamera dalam aplikasi UWP. Kegagalan untuk melakukannya dapat mengganggu aplikasi lain yang mencoba mengakses kamera perangkat. Untuk informasi selengkapnya, lihat Menampilkan pratinjau kamera.

Ringkasan

Artikel ini telah menunjukkan cara membuat perender kustom untuk ContentPage halaman, memungkinkan pengembang untuk mengambil alih penyajian asli default dengan kustomisasi khusus platform mereka sendiri. adalah ContentPage elemen visual yang menampilkan satu tampilan dan menempati sebagian besar layar.