Bagikan melalui


Pengantar Storyboards di Xamarin.Mac

Artikel ini menyediakan pengantar untuk bekerja dengan Storyboards di aplikasi Xamarin.Mac. Ini mencakup pembuatan dan pemeliharaan UI aplikasi menggunakan papan cerita dan Penyusun Antarmuka Xcode.

Papan cerita memungkinkan Anda mengembangkan Antarmuka Pengguna untuk aplikasi Xamarin.Mac Anda yang tidak hanya menyertakan definisi dan kontrol jendela, tetapi juga berisi tautan antara jendela yang berbeda (melalui baris) dan melihat status.

Sampel UI di Xcode

Artikel ini akan memberikan pengantar untuk menggunakan Storyboards untuk menentukan Antarmuka pengguna aplikasi Xamarin.Mac.

Apa itu Storyboards?

Dengan menggunakan Storyboard, semua UI aplikasi Xamarin.Mac dapat didefinisikan dalam satu lokasi dengan semua navigasi antara elemen individual dan antarmuka penggunanya. Papan cerita untuk Xamarin.Mac, bekerja dengan cara yang sangat mirip dengan Storyboards untuk Xamarin.iOS. Namun, mereka berisi sekumpulan Jenis Segue yang berbeda karena idiom antarmuka yang berbeda.

Bekerja dengan Adegan

Seperti yang dinyatakan di atas, Storyboard mendefinisikan semua UI untuk aplikasi tertentu yang dipecah menjadi gambaran umum fungsional dari Pengontrol Tampilannya. Dalam Penyusun Antarmuka Xcode, masing-masing pengontrol ini hidup di Adegannya sendiri.

Contoh pengontrol tampilan

Setiap Adegan mewakili Pasangan Pengontrol Tampilan dan Tampilan tertentu dengan sekumpulan baris (disebut Segues) yang menghubungkan setiap Adegan di UI, sehingga menunjukkan hubungan mereka. Beberapa Segues menentukan bagaimana satu Pengontrol Tampilan berisi satu atau beberapa Tampilan anak atau Lihat Pengontrol. Segue lainnya, tentukan transisi antara Pengontrol Tampilan (seperti menampilkan popover atau kotak dialog).

Contoh segue

Hal terpenting yang perlu diperhatikan adalah bahwa setiap Segue mewakili aliran beberapa bentuk data antara elemen UI aplikasi yang diberikan.

Bekerja dengan Pengontrol Tampilan

Lihat Pengontrol menentukan hubungan antara Tampilan informasi tertentu dalam app Mac dan model data yang menyediakan informasi tersebut. Setiap adegan tingkat atas di Storyboard mewakili satu Pengontrol Tampilan dalam kode aplikasi Xamarin.Mac.

Contoh pengontrol tampilan slip

Dengan cara ini, setiap Pengontrol Tampilan adalah pasangan yang mandiri dan dapat digunakan kembali dari representasi visual (Tampilan) informasi dan logika untuk menyajikan dan mengontrol informasi tersebut.

Dalam Adegan tertentu, Anda dapat melakukan semua hal yang biasanya telah ditangani oleh file individual .xib :

  • Tempatkan subview dan kontrol (seperti tombol dan kotak teks).
  • Tentukan posisi elemen dan batasan tata letak otomatis.
  • Tindakan dan Outlet Kawat untuk mengekspos elemen UI ke kode.

Bekerja dengan Segues

Seperti yang dinyatakan di atas, Segues menyediakan hubungan antara semua Adegan yang menentukan UI aplikasi Anda. Jika Anda terbiasa bekerja di Storyboard di iOS, Anda tahu bahwa Segues untuk iOS biasanya menentukan transisi antara tampilan layar penuh. Ini berbeda dari macOS, ketika Segues biasanya mendefinisikan "penahanan" (di mana satu Adegan adalah anak dari Adegan induk).

Di macOS, sebagian besar aplikasi cenderung mengelompokkan tampilannya bersama-sama dalam jendela yang sama menggunakan elemen UI seperti Tampilan Terpisah dan Tab. Tidak seperti iOS, di mana tampilan perlu ditransisikan di dan di luar layar, karena ruang tampilan fisik yang terbatas.

Mengingat kecenderungan macOS terhadap penahanan, ada situasi di mana Presentation Segues digunakan, seperti Windows Modal, Tampilan Lembar, dan Popover.

Saat menggunakan Presentation Segues, Anda dapat mengambil alih PrepareForSegue metode Pengontrol Tampilan induk untuk presentasi untuk menginisialisasi dan variabel dan menyediakan data apa pun ke Pengontrol Tampilan yang disajikan.

Waktu Desain dan Eksekusi

Pada waktu Desain (saat tata letak UI di Penyusun Antarmuka Xcode), setiap elemen UI aplikasi dipecah menjadi item konstituennya:

  • Adegan - Yang terdiri dari:
    • Lihat Pengontrol - Yang menentukan hubungan antara Tampilan dan data yang mendukungnya.
    • Tampilan dan Subviews - Elemen aktual yang membentuk antarmuka pengguna.
    • Containment Segues - Yang menentukan hubungan induk-anak antar Adegan.
  • Presentasi Segues - Yang menentukan mode presentasi individual.

Dengan menentukan setiap elemen dengan cara ini, ini memungkinkan pemuatan malas dari setiap elemen hanya karena diperlukan selama runtime. Di macOS, seluruh proses dirancang untuk memungkinkan pengembang membuat Antarmuka Pengguna yang kompleks dan fleksibel yang memerlukan minimum kode dukungan untuk membuatnya berfungsi, sekaligus seefisien mungkin dengan sumber daya sistem.

Mulai Cepat Papan Cerita

Dalam panduan Mulai Cepat Storyboard, kita akan membuat aplikasi Xamarin.Mac sederhana yang memperkenalkan konsep utama bekerja dengan papan cerita untuk membuat Antarmuka Pengguna. Aplikasi sampel akan terdiri dari Tampilan Spilt yang berisi Area Konten dan Area Inspektur dan akan menyajikan jendela Dialog Preferensi sederhana. Kita akan menggunakan Segues untuk mengikat semua elemen Antarmuka Pengguna bersama-sama.

Bekerja dengan Storyboards

Bagian ini mencakup detail mendalam tentang Bekerja dengan Storyboards di aplikasi Xamarin.Mac. Kami melihat secara mendalam Adegan dan bagaimana adegan tersebut terdiri dari Tampilan Pengontrol dan Tampilan. Kemudian, kita akan melihat bagaimana Adegan diikat bersama dengan Segues. Terakhir, kita akan melihat bekerja dengan jenis Segue kustom.

Ringkasan

Artikel ini telah melihat sekilas bekerja dengan Storyboards di aplikasi Xamarin.Mac. Kami melihat cara membuat aplikasi baru menggunakan papan cerita dan cara menentukan antarmuka pengguna. Kami juga melihat cara menavigasi antara jendela yang berbeda dan melihat status menggunakan segue.