Membuat Kontrol Kustom di Xamarin.Mac

Saat bekerja dengan C# dan .NET dalam aplikasi Xamarin.Mac, Anda memiliki akses ke Kontrol Pengguna yang sama dengan pengembang yang bekerja di Objective-C, Swift dan Xcode . Karena Xamarin.Mac terintegrasi langsung dengan Xcode, Anda dapat menggunakan Penyusun Antarmuka Xcode untuk membuat dan memelihara Kontrol Pengguna Anda (atau secara opsional membuatnya langsung dalam kode C#).

Meskipun macOS menyediakan banyak Kontrol Pengguna bawaan, mungkin ada kalanya Anda perlu membuat kontrol kustom untuk menyediakan fungsionalitas yang tidak disediakan di luar kotak atau untuk mencocokkan tema UI kustom (seperti antarmuka permainan).

Dalam artikel ini, kita akan membahas dasar-dasar pembuatan Kontrol Antarmuka Pengguna Kustom yang dapat digunakan kembali dalam aplikasi Xamarin.Mac. Sangat disarankan agar Anda bekerja melalui artikel Hello, Mac terlebih dahulu, khususnya bagian Pengenalan Xcode dan Penyusun Antarmuka dan Outlet dan Tindakan , karena mencakup konsep dan teknik utama yang akan kita gunakan dalam artikel ini.

Anda mungkin ingin melihat kelas / metode Exposing C# ke Objective-Cbagian dari dokumen Xamarin.Mac Internals juga, ini menjelaskan Register perintah dan Export yang digunakan untuk menyambungkan kelas C# Anda ke Objective-C objek dan Elemen UI.

Pengantar Kontrol Kustom

Seperti yang dinyatakan di atas, mungkin ada kalanya Anda perlu membuat Kontrol Antarmuka Pengguna Kustom yang dapat digunakan kembali untuk menyediakan fungsionalitas unik untuk UI aplikasi Xamarin.Mac Anda atau untuk membuat tema UI kustom (seperti antarmuka permainan).

Dalam situasi ini, Anda dapat dengan mudah mewarisi dan NSControl membuat alat kustom yang dapat ditambahkan ke UI aplikasi Anda melalui kode C# atau melalui Penyusun Antarmuka Xcode. Dengan mewarisi dari NSControl kontrol kustom Anda akan secara otomatis memiliki semua fitur standar yang dimiliki Kontrol Antarmuka Pengguna bawaan (seperti NSButton).

Jika kontrol Antarmuka Pengguna kustom Anda hanya menampilkan informasi (seperti bagan kustom dan alat grafis), Anda mungkin ingin mewarisi dari NSView alih-alih NSControl.

Tidak peduli kelas dasar mana yang digunakan, langkah-langkah dasar untuk membuat kontrol kustom sama.

Dalam artikel ini akan, buat komponen Sakelar Balik kustom yang menyediakan Tema Antarmuka Pengguna yang unik dan contoh membangun Kontrol Antarmuka Pengguna Kustom yang berfungsi penuh.

Membangun Kontrol Kustom

Karena kontrol kustom yang kita buat akan merespons input pengguna (klik tombol mouse kiri), kita akan mewarisi dari NSControl. Dengan cara ini, kontrol kustom kami akan secara otomatis memiliki semua fitur standar yang dimiliki kontrol Antarmuka Pengguna bawaan dan merespons seperti kontrol macOS standar.

Di Visual Studio untuk Mac, buka proyek Xamarin.Mac yang ingin Anda buat Kontrol Antarmuka Pengguna Kustom untuk (atau buat yang baru). Tambahkan kelas baru dan sebut saja NSFlipSwitch:

Selanjutnya, edit NSFlipSwitch.cs kelas dan buat terlihat seperti berikut ini:

using Foundation;
using System;
using System.CodeDom.Compiler;
using AppKit;
using CoreGraphics;

namespace MacCustomControl
{
    [Register("NSFlipSwitch")]
    public class NSFlipSwitch : NSControl
    {
        #region Private Variables
        private bool _value = false;
        #endregion

        #region Computed Properties
        public bool Value {
            get { return _value; }
            set {
                // Save value and force a redraw
                _value = value;
                NeedsDisplay = true;
            }
        }
        #endregion

        #region Constructors
        public NSFlipSwitch ()
        {
            // Init
            Initialize();
        }

        public NSFlipSwitch (IntPtr handle) : base (handle)
        {
            // Init
            Initialize();
        }

        [Export ("initWithFrame:")]
        public NSFlipSwitch (CGRect frameRect) : base(frameRect) {
            // Init
            Initialize();
        }

        private void Initialize() {
            this.WantsLayer = true;
            this.LayerContentsRedrawPolicy = NSViewLayerContentsRedrawPolicy.OnSetNeedsDisplay;
        }
        #endregion

        #region Draw Methods
        public override void DrawRect (CGRect dirtyRect)
        {
            base.DrawRect (dirtyRect);

            // Use Core Graphic routines to draw our UI
            ...

        }
        #endregion

        #region Private Methods
        private void FlipSwitchState() {
            // Update state
            Value = !Value;
        }
        #endregion

    }
}

Hal pertama yang perlu diperhatikan tentang kelas kustom kami di mana kami mewarisi dari NSControl dan menggunakan perintah Daftar untuk mengekspos kelas ini ke Objective-C dan Penyusun Antarmuka Xcode:

[Register("NSFlipSwitch")]
public class NSFlipSwitch : NSControl

Di bagian berikut, kita akan melihat sisa kode di atas secara rinci.

Melacak Status Kontrol

Karena Kontrol Kustom kami adalah sakelar, kita memerlukan cara untuk melacak status Aktif/Nonaktif sakelar. Kami menanganinya dengan kode berikut di NSFlipSwitch:

private bool _value = false;
...

public bool Value {
    get { return _value; }
    set {
        // Save value and force a redraw
        _value = value;
        NeedsDisplay = true;
    }
}

Ketika status switch berubah, kita memerlukan cara untuk memperbarui UI. Kami melakukan itu dengan memaksa kontrol untuk menggambar ulang UI-nya dengan NeedsDisplay = true.

Jika kontrol kami membutuhkan lebih banyak bahwa satu status Aktif/Nonaktif (misalnya sakelar multi-status dengan 3 posisi), kita dapat menggunakan Enum untuk melacak status. Misalnya, bool sederhana akan dilakukan.

Kami juga menambahkan metode pembantu untuk menukar status sakelar antara Aktif dan Nonaktif:

private void FlipSwitchState() {
    // Update state
    Value = !Value;
}

Nantinya, kita akan memperluas kelas pembantu ini untuk memberi tahu pemanggil ketika status switch telah berubah.

Menggambar Antarmuka Kontrol

Kita akan menggunakan rutinitas menggambar Core Graphic untuk menggambar Antarmuka Pengguna kontrol kustom kita pada waktu proses. Sebelum kita dapat melakukan ini, kita perlu menyalakan lapisan untuk kontrol kita. Kami melakukan ini dengan metode privat berikut:

private void Initialize() {
    this.WantsLayer = true;
    this.LayerContentsRedrawPolicy = NSViewLayerContentsRedrawPolicy.OnSetNeedsDisplay;
}

Metode ini dipanggil dari setiap konstruktor kontrol untuk memastikan bahwa kontrol dikonfigurasi dengan benar. Contohnya:

public NSFlipSwitch (IntPtr handle) : base (handle)
{
    // Init
    Initialize();
}

Selanjutnya, kita perlu mengambil alih DrawRect metode dan menambahkan rutinitas Core Graphic untuk menggambar kontrol:

public override void DrawRect (CGRect dirtyRect)
{
    base.DrawRect (dirtyRect);

    // Use Core Graphic routines to draw our UI
    ...

}

Kita akan menyesuaikan representasi visual untuk kontrol ketika statusnya berubah (seperti dari Aktif ke Nonaktif). Setiap kali status berubah, kita dapat menggunakan NeedsDisplay = true perintah untuk memaksa kontrol untuk menggambar ulang status baru.

Menanggapi Input Pengguna

Ada dua cara dasar yang dapat kita tambahkan input pengguna ke kontrol kustom kita: Mengambil alih Rutinitas Penanganan Mouse atau Pengenal Gerakan. Metode mana yang kami gunakan, akan didasarkan pada fungsionalitas yang diperlukan oleh kontrol kami.

Penting

Untuk kontrol kustom apa pun yang Anda buat, Anda harus menggunakan Override Methods atau Gesture Recognizers, tetapi tidak keduanya pada saat yang sama karena keduanya dapat bertentangan satu sama lain.

Menangani Input Pengguna dengan Metode Penimpaan

Objek yang mewarisi dari NSControl (atau NSView) memiliki beberapa metode penimpaan untuk menangani mouse atau input keyboard. Untuk contoh kontrol kami, kami ingin membalik status sakelar antara Aktif dan Mati ketika pengguna mengklik kontrol dengan tombol mouse kiri. Kita dapat menambahkan metode penimpaan berikut ke NSFlipSwitch kelas untuk menangani hal ini:

#region Mouse Handling Methods
// --------------------------------------------------------------------------------
// Handle mouse with Override Methods.
// NOTE: Use either this method or Gesture Recognizers, NOT both!
// --------------------------------------------------------------------------------
public override void MouseDown (NSEvent theEvent)
{
    base.MouseDown (theEvent);

    FlipSwitchState ();
}

public override void MouseDragged (NSEvent theEvent)
{
    base.MouseDragged (theEvent);
}

public override void MouseUp (NSEvent theEvent)
{
    base.MouseUp (theEvent);
}

public override void MouseMoved (NSEvent theEvent)
{
    base.MouseMoved (theEvent);
}
## endregion

Dalam kode di atas, kita memanggil FlipSwitchState metode (didefinisikan di atas) untuk membalik status Aktif/Nonaktif sakelar dalam MouseDown metode . Ini juga akan memaksa kontrol untuk digambar ulang untuk mencerminkan status saat ini.

Menangani Input Pengguna dengan Pengenal Gerakan

Secara opsional, Anda dapat menggunakan Gesture Recognizers untuk menangani pengguna yang berinteraksi dengan kontrol. Hapus penimpaan yang ditambahkan di atas, edit Initialize metode dan buat terlihat seperti berikut ini:

private void Initialize() {
    this.WantsLayer = true;
    this.LayerContentsRedrawPolicy = NSViewLayerContentsRedrawPolicy.OnSetNeedsDisplay;

    // --------------------------------------------------------------------------------
    // Handle mouse with Gesture Recognizers.
    // NOTE: Use either this method or the Override Methods, NOT both!
    // --------------------------------------------------------------------------------
    var click = new NSClickGestureRecognizer (() => {
        FlipSwitchState();
    });
    AddGestureRecognizer (click);
}

Di sini, kami membuat metode baru NSClickGestureRecognizer dan memanggil metode kami FlipSwitchState untuk mengubah status sakelar ketika pengguna mengkliknya dengan tombol mouse kiri. Metode menambahkan AddGestureRecognizer (click) Gesture Recognizer ke kontrol.

Sekali lagi, metode mana yang kita gunakan tergantung pada apa yang kita coba capai dengan kontrol kustom kita. Jika kita memerlukan akses tingkat rendah ke interaksi pengguna, gunakan Metode Penimpaan. Jika kita memerlukan fungsionalitas yang telah ditentukan sebelumnya, seperti klik mouse, gunakan Gesture Recognizers.

Menanggapi Peristiwa Perubahan Status

Ketika pengguna mengubah status kontrol kustom kami, kami memerlukan cara untuk menanggapi perubahan status dalam kode (seperti melakukan sesuatu ketika mengklik tombol kustom).

Untuk menyediakan fungsionalitas ini, edit NSFlipSwitch kelas dan tambahkan kode berikut:

#region Events
public event EventHandler ValueChanged;

internal void RaiseValueChanged() {
    if (this.ValueChanged != null)
        this.ValueChanged (this, EventArgs.Empty);

    // Perform any action bound to the control from Interface Builder
    // via an Action.
    if (this.Action !=null)
        NSApplication.SharedApplication.SendAction (this.Action, this.Target, this);
}
## endregion

Selanjutnya, edit FlipSwitchState metode dan buat terlihat seperti berikut ini:

private void FlipSwitchState() {
    // Update state
    Value = !Value;
    RaiseValueChanged ();
}

Pertama, kami menyediakan ValueChanged peristiwa yang dapat kami tambahkan handler ke dalam kode C# sehingga kami dapat melakukan tindakan saat pengguna mengubah status sakelar.

Kedua, karena kontrol kustom kami mewarisi dari NSControl, kontrol kustom secara otomatis memiliki Tindakan yang dapat ditetapkan di Penyusun Antarmuka Xcode. Untuk memanggil Tindakan ini saat status berubah, kami menggunakan kode berikut:

if (this.Action !=null)
    NSApplication.SharedApplication.SendAction (this.Action, this.Target, this);

Pertama, kita memeriksa untuk melihat apakah Tindakan telah ditetapkan ke kontrol. Selanjutnya, kita memanggil Tindakan jika telah ditentukan.

Menggunakan Kontrol Kustom

Dengan kontrol kustom yang sepenuhnya ditentukan, kita dapat menambahkannya ke UI aplikasi Xamarin.Mac menggunakan kode C# atau di Penyusun Antarmuka Xcode.

Untuk menambahkan kontrol menggunakan Interface Builder, pertama-tama lakukan build bersih dari proyek Xamarin.Mac, lalu klik Main.storyboard dua kali file untuk membukanya di Interface Builder untuk diedit:

Selanjutnya, seret Custom View ke desain Antarmuka Pengguna:

Dengan Tampilan Kustom masih dipilih, beralihlah ke Pemeriksa Identitas dan ubah Kelas tampilan menjadi NSFlipSwitch:

Beralih ke Editor Asisten dan buat Outlet untuk kontrol kustom (pastikan untuk mengikatnya dalam ViewController.h file dan bukan .m file):

Simpan perubahan Anda, kembali ke Visual Studio untuk Mac dan izinkan perubahan disinkronkan. ViewController.cs Edit file dan buat ViewDidLoad metode terlihat seperti berikut ini:

public override void ViewDidLoad ()
{
    base.ViewDidLoad ();

    // Do any additional setup after loading the view.
    OptionTwo.ValueChanged += (sender, e) => {
        // Display the state of the option switch
        Console.WriteLine("Option Two: {0}", OptionTwo.Value);
    };
}

Di sini, kami menanggapi peristiwa yang ValueChanged kami tentukan di atas pada NSFlipSwitch kelas dan menulis nilai saat ini ketika pengguna mengklik kontrol.

Secara opsional, kita dapat kembali ke Penyusun Antarmuka dan menentukan Tindakan pada kontrol:

Sekali lagi, edit ViewController.cs file dan tambahkan metode berikut:

partial void OptionTwoFlipped (Foundation.NSObject sender) {
    // Display the state of the option switch
    Console.WriteLine("Option Two: {0}", OptionTwo.Value);
}

Penting

Anda harus menggunakan Peristiwa atau menentukan Tindakan di Penyusun Antarmuka, tetapi Anda tidak boleh menggunakan kedua metode secara bersamaan atau metode tersebut dapat saling berkonflik.

Ringkasan

Artikel ini telah melihat secara rinci tentang membuat Kontrol Antarmuka Pengguna Kustom yang dapat digunakan kembali dalam aplikasi Xamarin.Mac. Kami melihat cara menggambar UI kontrol kustom, dua cara utama untuk merespons mouse dan input pengguna dan cara mengekspos kontrol baru ke Tindakan di Penyusun Antarmuka Xcode.

Last updated on 2017-03-14

Membuat Kontrol Kustom di Xamarin.Mac

Pengantar Kontrol Kustom

Membangun Kontrol Kustom

Melacak Status Kontrol

Menggambar Antarmuka Kontrol

Menanggapi Input Pengguna

Menangani Input Pengguna dengan Metode Penimpaan

Menangani Input Pengguna dengan Pengenal Gerakan

Menanggapi Peristiwa Perubahan Status

Menggunakan Kontrol Kustom

Ringkasan

Link Terkait

Sumber Daya Tambahan: