Desain antarmuka pengguna .storyboard/.xib-less di Xamarin.Mac

Artikel ini membahas pembuatan antarmuka pengguna aplikasi Xamarin.Mac langsung dari kode C#, tanpa file .storyboard, file .xib, atau Penyusun Antarmuka.

Gambaran Umum

Saat bekerja dengan C# dan .NET dalam aplikasi Xamarin.Mac, Anda memiliki akses ke elemen dan alat antarmuka pengguna yang sama dengan yang digunakan Objective-C pengembang dan Xcode . Biasanya, saat membuat aplikasi Xamarin.Mac, Anda akan menggunakan Interface Builder Xcode dengan file .storyboard atau .xib untuk membuat dan memelihara antarmuka pengguna aplikasi Anda.

Anda juga memiliki opsi untuk membuat beberapa atau semua UI aplikasi Xamarin.Mac Anda langsung dalam kode C#. Dalam artikel ini, kita akan membahas dasar-dasar pembuatan antarmuka pengguna dan elemen UI dalam kode C#.

Mengalihkan jendela untuk menggunakan kode

Saat Anda membuat aplikasi Xamarin.Mac Cocoa baru, Anda mendapatkan jendela kosong standar secara default. Jendela ini didefinisikan dalam file Main.storyboard (atau secara tradisional MainWindow.xib) yang secara otomatis disertakan dalam proyek. Ini juga mencakup file ViewController.cs yang mengelola tampilan utama aplikasi (atau sekali lagi secara tradisional MainWindow.cs dan file MainWindowController.cs ).

Untuk beralih ke jendela Xibless untuk aplikasi, lakukan hal berikut:

1. Buka aplikasi yang ingin Anda hentikan penggunaan .storyboard atau file .xib untuk menentukan antarmuka pengguna di Visual Studio untuk Mac.

2. Di Pad Solusi, klik kanan pada file Main.storyboard atau MainWindow.xib dan pilih Hapus:

   

3. Dari Dialog Hapus, klik tombol Hapus untuk menghapus .storyboard atau .xib sepenuhnya dari proyek:

   

Sekarang kita harus memodifikasi file MainWindow.cs untuk menentukan tata letak jendela dan memodifikasi file ViewController.cs atau MainWindowController.cs untuk membuat instans kelas karena MainWindow kita tidak lagi menggunakan file .storyboard atau .xib.

Aplikasi Xamarin.Mac modern yang menggunakan Storyboards untuk antarmuka penggunanya mungkin tidak secara otomatis menyertakan file MainWindow.cs, ViewController.cs, atau MainWindowController.cs. Sesuai kebutuhan, cukup tambahkan Kelas C# Kosong baru ke proyek (Tambahkan>File Baru...>Kelas Kosong Umum>) dan beri nama yang sama dengan file yang hilang.

Menentukan jendela dalam kode

Selanjutnya, edit file MainWindow.cs dan buat terlihat seperti berikut ini:

using System;
using Foundation;
using AppKit;
using CoreGraphics;

namespace MacXibless
{
    public partial class MainWindow : NSWindow
    {
        #region Private Variables
        private int NumberOfTimesClicked = 0;
        #endregion

        #region Computed Properties
        public NSButton ClickMeButton { get; set;}
        public NSTextField ClickMeLabel { get ; set;}
        #endregion

        #region Constructors
        public MainWindow (IntPtr handle) : base (handle)
        {
        }

        [Export ("initWithCoder:")]
        public MainWindow (NSCoder coder) : base (coder)
        {
        }

        public MainWindow(CGRect contentRect, NSWindowStyle aStyle, NSBackingStore bufferingType, bool deferCreation): base (contentRect, aStyle,bufferingType,deferCreation) {
            // Define the user interface of the window here
            Title = "Window From Code";

            // Create the content view for the window and make it fill the window
            ContentView = new NSView (Frame);

            // Add UI elements to window
            ClickMeButton = new NSButton (new CGRect (10, Frame.Height-70, 100, 30)){
                AutoresizingMask = NSViewResizingMask.MinYMargin
            };
            ContentView.AddSubview (ClickMeButton);

            ClickMeLabel = new NSTextField (new CGRect (120, Frame.Height - 65, Frame.Width - 130, 20)) {
                BackgroundColor = NSColor.Clear,
                TextColor = NSColor.Black,
                Editable = false,
                Bezeled = false,
                AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin,
                StringValue = "Button has not been clicked yet."
            };
            ContentView.AddSubview (ClickMeLabel);
        }
        #endregion

        #region Override Methods
        public override void AwakeFromNib ()
        {
            base.AwakeFromNib ();

            // Wireup events
            ClickMeButton.Activated += (sender, e) => {
                // Update count
                ClickMeLabel.StringValue = (++NumberOfTimesClicked == 1) ? "Button clicked one time." : string.Format("Button clicked {0} times.",NumberOfTimesClicked);
            };
        }
        #endregion

    }
}

Mari kita bahas beberapa elemen kunci.

Pertama, kami menambahkan beberapa Properti Komputasi yang akan bertindak seperti outlet (seolah-olah jendela dibuat dalam file .storyboard atau .xib):

public NSButton ClickMeButton { get; set;}
public NSTextField ClickMeLabel { get ; set;}

Ini akan memberi kita akses ke elemen UI yang akan kita tampilkan di jendela. Karena jendela tidak dilambungkan dari file .storyboard atau .xib, kita perlu cara untuk membuat instansnya (seperti yang akan kita lihat nanti di MainWindowController kelas). Itulah yang dilakukan metode konstruktor baru ini:

public MainWindow(CGRect contentRect, NSWindowStyle aStyle, NSBackingStore bufferingType, bool deferCreation): base (contentRect, aStyle,bufferingType,deferCreation) {
    ...
}

Di sinilah kita akan merancang tata letak jendela dan menempatkan elemen UI apa pun yang diperlukan untuk membuat antarmuka pengguna yang diperlukan. Sebelum kita dapat menambahkan elemen UI apa pun ke jendela, perlu Tampilan Konten untuk berisi elemen:

ContentView = new NSView (Frame);

Ini membuat Tampilan Konten yang akan mengisi jendela. Sekarang kita menambahkan elemen UI pertama kita, sebuah NSButton, ke jendela:

ClickMeButton = new NSButton (new CGRect (10, Frame.Height-70, 100, 30)){
    AutoresizingMask = NSViewResizingMask.MinYMargin
};
ContentView.AddSubview (ClickMeButton);

Hal pertama yang perlu diperhatikan di sini adalah bahwa, tidak seperti iOS, macOS menggunakan notasi matematika untuk menentukan sistem koordinat jendelanya. Jadi titik asal berada di sudut kiri bawah jendela, dengan nilai meningkat ke kanan dan menuju sudut kanan atas jendela. Ketika kita membuat yang baru NSButton, kita memperhitungkan ini saat kita menentukan posisi dan ukurannya di layar.

Properti AutoresizingMask = NSViewResizingMask.MinYMargin memberi tahu tombol bahwa kita ingin tetap berada di lokasi yang sama dari bagian atas jendela ketika jendela diubah ukurannya secara vertikal. Sekali lagi, ini diperlukan karena (0,0) berada di kiri bawah jendela.

Terakhir, ContentView.AddSubview (ClickMeButton) metode menambahkan NSButton ke Tampilan Konten sehingga akan ditampilkan di layar saat aplikasi dijalankan dan jendela ditampilkan.

Selanjutnya label ditambahkan ke jendela yang akan menampilkan berapa kali NSButton label telah diklik:

ClickMeLabel = new NSTextField (new CGRect (120, Frame.Height - 65, Frame.Width - 130, 20)) {
    BackgroundColor = NSColor.Clear,
    TextColor = NSColor.Black,
    Editable = false,
    Bezeled = false,
    AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin,
    StringValue = "Button has not been clicked yet."
};
ContentView.AddSubview (ClickMeLabel);

Karena macOS tidak memiliki elemen UI Label tertentu, kami telah menambahkan gaya khusus yang tidak dapat NSTextField diedit untuk bertindak sebagai Label. Sama seperti tombol sebelumnya, ukuran dan lokasi memperhitungkan bahwa (0,0) berada di kiri bawah jendela. Properti AutoresizingMask = NSViewResizingMask.WidthSizable | NSViewResizingMask.MinYMargin menggunakan operator atau untuk menggabungkan dua NSViewResizingMask fitur. Ini akan membuat label tetap berada di lokasi yang sama dari bagian atas jendela ketika jendela diubah ukurannya secara vertikal dan menyusut dan bertambah lebar saat jendela diubah ukurannya secara horizontal.

Sekali lagi, ContentView.AddSubview (ClickMeLabel) metode menambahkan NSTextField ke Tampilan Konten sehingga akan ditampilkan di layar saat aplikasi dijalankan dan jendela terbuka.

Menyesuaikan pengontrol jendela

Karena desain MainWindow tidak lagi dimuat dari file .storyboard atau .xib, kita harus membuat beberapa penyesuaian pada pengontrol jendela. Edit file MainWindowController.cs dan buat terlihat seperti berikut ini:

using System;

using Foundation;
using AppKit;
using CoreGraphics;

namespace MacXibless
{
    public partial class MainWindowController : NSWindowController
    {
        public MainWindowController (IntPtr handle) : base (handle)
        {
        }

        [Export ("initWithCoder:")]
        public MainWindowController (NSCoder coder) : base (coder)
        {
        }

        public MainWindowController () : base ("MainWindow")
        {
            // Construct the window from code here
            CGRect contentRect = new CGRect (0, 0, 1000, 500);
            base.Window = new MainWindow(contentRect, (NSWindowStyle.Titled | NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable), NSBackingStore.Buffered, false);

            // Simulate Awaking from Nib
            Window.AwakeFromNib ();
        }

        public override void AwakeFromNib ()
        {
            base.AwakeFromNib ();
        }

        public new MainWindow Window {
            get { return (MainWindow)base.Window; }
        }
    }
}

Mari kita bahas elemen utama modifikasi ini.

Pertama, kami menentukan instans MainWindow baru kelas dan menetapkannya ke properti pengontrol Window jendela dasar:

CGRect contentRect = new CGRect (0, 0, 1000, 500);
base.Window = new MainWindow(contentRect, (NSWindowStyle.Titled | NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable), NSBackingStore.Buffered, false);

Kami menentukan lokasi jendela layar dengan CGRect. Sama seperti sistem koordinat jendela, layar mendefinisikan (0,0) sebagai sudut kiri bawah. Selanjutnya, kita menentukan gaya jendela dengan menggunakan operator Or untuk menggabungkan dua fitur atau lebih NSWindowStyle :

... (NSWindowStyle.Titled | NSWindowStyle.Closable | NSWindowStyle.Miniaturizable | NSWindowStyle.Resizable) ...

Fitur berikut NSWindowStyle tersedia:

• Borderless - Jendela tidak akan memiliki batas.
• Berjudul - Jendela akan memiliki bilah judul.
• Dapat ditutup - Jendela memiliki Tombol Tutup dan dapat ditutup.
• Miniaturizable - Jendela memiliki Tombol Miniaturize dan dapat diminimalkan.
• Dapat diubah ukurannya - Jendela akan memiliki Tombol Mengubah Ukuran dan dapat diubah ukurannya.
• Utilitas - Jendela adalah jendela gaya Utilitas (panel).
• DocModal - Jika jendela adalah Panel, itu akan menjadi Modal Dokumen alih-alih Modal Sistem.
• NonactivatingPanel - Jika jendela adalah Panel, jendela tersebut tidak akan dibuat sebagai jendela utama.
• TexturedBackground - Jendela akan memiliki latar belakang bertekskus.
• Tidak diskalakan - Jendela tidak akan diskalakan.
• UnifiedTitleAndToolbar - Judul jendela dan area toolbar akan digabungkan.
• Hud - Jendela akan ditampilkan sebagai Panel tampilan heads-up.
• FullScreenWindow - Jendela dapat memasuki mode layar penuh.
• FullSizeContentView - Tampilan konten jendela berada di belakang judul dan Area toolbar.

Dua properti terakhir menentukan Jenis Buffering untuk jendela dan jika gambar jendela akan ditangguhkan. Untuk informasi selengkapnya tentang NSWindows, silakan lihat Dokumentasi Pengenalan Apple ke Windows .

Akhirnya, karena jendela tidak disebarkan dari file .storyboard atau .xib, kita perlu mensimulasikannya di MainWindowController.cs kita dengan memanggil metode windowsAwakeFromNib:

Window.AwakeFromNib ();

Ini akan memungkinkan Anda untuk membuat kode terhadap jendela seperti jendela standar yang dimuat dari file .storyboard atau .xib.

Menampilkan jendela

Dengan file .storyboard atau .xib dihapus dan file MainWindow.cs dan MainWindowController.cs dimodifikasi, Anda akan menggunakan jendela sama seperti jendela normal yang telah dibuat di Penyusun Antarmuka Xcode dengan file .xib.

Berikut ini akan membuat instans baru jendela dan pengontrolnya dan menampilkan jendela di layar:

private MainWindowController mainWindowController;
...

mainWindowController = new MainWindowController ();
mainWindowController.Window.MakeKeyAndOrderFront (this);

Pada titik ini, jika aplikasi dijalankan dan tombol diklik beberapa kali, berikut ini akan ditampilkan:

Menambahkan jendela kode saja

Jika kita ingin menambahkan kode saja, jendela xibless ke aplikasi Xamarin.Mac yang ada, klik kanan proyek di Solution Pad dan pilih Tambahkan>File Baru... Dalam dialog File Baru pilih Jendela Kakao Xamarin.Mac>dengan Pengontrol, seperti yang diilustrasikan di bawah ini:

Sama seperti sebelumnya, kita akan menghapus file .storyboard atau .xib default dari proyek (dalam hal ini SecondWindow.xib) dan mengikuti langkah-langkah di bagian Beralih Jendela untuk menggunakan Kode di atas untuk mencakup definisi jendela ke kode.

Menambahkan elemen UI ke jendela dalam kode

Apakah jendela dibuat dalam kode atau dimuat dari file .storyboard atau .xib, mungkin ada kalanya kita ingin menambahkan elemen UI ke jendela dari kode. Contohnya:

var ClickMeButton = new NSButton (new CGRect (10, 10, 100, 30)){
    AutoresizingMask = NSViewResizingMask.MinYMargin
};
MyWindow.ContentView.AddSubview (ClickMeButton);

Kode di atas membuat baru NSButton dan menambahkannya ke MyWindow instans jendela untuk ditampilkan. Pada dasarnya setiap elemen UI yang dapat didefinisikan dalam Penyusun Antarmuka Xcode dalam file .storyboard atau .xib dapat dibuat dalam kode dan ditampilkan di jendela.

Menentukan bilah menu dalam kode

Karena keterbatasan saat ini di Xamarin.Mac, tidak disarankan agar Anda membuat kode Menu Bar aplikasi Xamarin.Mac Anda––NSMenuBardalam tetapi terus menggunakan file Main.storyboard atau MainMenu.xib untuk menentukannya. Meskipun demikian, Anda dapat menambahkan dan menghapus Menu dan Item Menu dalam kode C#.

Misalnya, edit file AppDelegate.cs dan buat DidFinishLaunching metode terlihat seperti berikut:

public override void DidFinishLaunching (NSNotification notification)
{
    mainWindowController = new MainWindowController ();
    mainWindowController.Window.MakeKeyAndOrderFront (this);

    // Create a Status Bar Menu
    NSStatusBar statusBar = NSStatusBar.SystemStatusBar;

    var item = statusBar.CreateStatusItem (NSStatusItemLength.Variable);
    item.Title = "Phrases";
    item.HighlightMode = true;
    item.Menu = new NSMenu ("Phrases");

    var address = new NSMenuItem ("Address");
    address.Activated += (sender, e) => {
        Console.WriteLine("Address Selected");
    };
    item.Menu.AddItem (address);

    var date = new NSMenuItem ("Date");
    date.Activated += (sender, e) => {
        Console.WriteLine("Date Selected");
    };
    item.Menu.AddItem (date);

    var greeting = new NSMenuItem ("Greeting");
    greeting.Activated += (sender, e) => {
        Console.WriteLine("Greetings Selected");
    };
    item.Menu.AddItem (greeting);

    var signature = new NSMenuItem ("Signature");
    signature.Activated += (sender, e) => {
        Console.WriteLine("Signature Selected");
    };
    item.Menu.AddItem (signature);
}

Di atas membuat menu Bilah Status dari kode dan menampilkannya saat aplikasi diluncurkan. Untuk informasi selengkapnya tentang bekerja dengan Menu, silakan lihat dokumentasi Menu kami.

Ringkasan

Artikel ini telah melihat secara terperinci dalam membuat antarmuka pengguna aplikasi Xamarin.Mac dalam kode C# dibandingkan dengan menggunakan Interface Builder Xcode dengan file .storyboard atau .xib.

Link Terkait

• Windows
• Menu
• Pedoman Antarmuka Manusia macOS
• Pengantar Windows