Toolbar di Xamarin.Mac

Artikel ini menjelaskan bekerja dengan toolbar dalam aplikasi Xamarin.Mac. Ini mencakup pembuatan dan pemeliharaan toolbar di Xcode dan Interface Builder, mengeksposnya ke kode, dan bekerja dengannya secara terprogram.

Pengembang Xamarin.Mac yang bekerja dengan Visual Studio untuk Mac memiliki akses ke kontrol UI yang sama yang tersedia untuk pengembang macOS yang bekerja dengan Xcode, termasuk kontrol toolbar. Karena Xamarin.Mac terintegrasi langsung dengan Xcode, Dimungkinkan untuk menggunakan Penyusun Antarmuka Xcode untuk membuat dan memelihara item toolbar. Item toolbar ini juga dapat dibuat di C#.

Toolbar di macOS ditambahkan ke bagian atas jendela dan menyediakan akses mudah ke perintah yang terkait dengan fungsionalitasnya. Bilah alat dapat disembunyikan, ditampilkan, atau dikustomisasi oleh pengguna aplikasi, dan mereka dapat menyajikan item toolbar dengan berbagai cara.

Artikel ini membahas dasar-dasar bekerja dengan toolbar dan item toolbar dalam aplikasi Xamarin.Mac.

Sebelum melanjutkan, baca artikel Halo, Mac — khususnya bagian Pengenalan Xcode dan Penyusun Antarmuka dan Outlet dan Tindakan — karena mencakup konsep dan teknik utama yang akan digunakan di seluruh panduan ini.

Lihat juga kelas/metode Mengekspos C# ke Objective-C bagian dokumen Xamarin.Mac Internals. Ini menjelaskan Register atribut dan Export yang digunakan untuk menghubungkan kelas C# ke Objective-C kelas.

Pengantar toolbar

Jendela apa pun di aplikasi macOS dapat menyertakan toolbar:

Toolbar menyediakan cara mudah bagi pengguna aplikasi Anda untuk dengan cepat mengakses fitur penting atau yang umum digunakan. Misalnya, aplikasi pengeditan dokumen mungkin menyediakan item bilah alat untuk mengatur warna teks, mengubah font, atau mencetak dokumen saat ini.

Bilah alat bisa menampilkan item dengan tiga cara:

1. Ikon dan Teks

   

2. Ikon Saja

   

3. Teks Saja

   

Beralih di antara mode ini dengan mengklik kanan toolbar dan memilih mode tampilan dari menu kontekstual:

Gunakan menu yang sama untuk menampilkan toolbar pada ukuran yang lebih kecil:

Menu juga memungkinkan penyesuaian toolbar:

Saat menyiapkan toolbar di Penyusun Antarmuka Xcode, pengembang dapat menyediakan item toolbar tambahan yang bukan bagian dari konfigurasi defaultnya. Pengguna aplikasi kemudian dapat menyesuaikan toolbar, menambahkan dan menghapus item yang telah ditentukan sebelumnya ini seperlunya. Tentu saja, toolbar dapat diatur ulang ke konfigurasi defaultnya.

Toolbar secara otomatis tersambung ke menu Tampilan , yang memungkinkan pengguna menyembunyikannya, menampilkannya, dan menyesuaikannya:

Lihat dokumentasi Fungsionalitas Menu Bawaan untuk detail selengkapnya.

Selain itu, jika toolbar dikonfigurasi dengan benar di Interface Builder, aplikasi akan secara otomatis mempertahankan kustomisasi toolbar di beberapa peluncuran aplikasi.

Bagian berikutnya dari panduan ini menjelaskan cara membuat dan memelihara toolbar dengan Penyusun Antarmuka Xcode dan cara bekerja dengannya dalam kode.

Mengatur pengontrol jendela utama kustom

Untuk mengekspos elemen UI ke kode C# melalui outlet dan tindakan, aplikasi Xamarin.Mac harus menggunakan pengontrol jendela kustom:

1. Buka storyboard aplikasi di Penyusun Antarmuka Xcode.

2. Pilih pengontrol jendela pada permukaan desain.

3. Beralih ke Inspektur Identitas dan masukkan "WindowController" sebagai Nama Kelas:

   

4. Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan.

5. File WindowController.cs akan ditambahkan ke proyek Anda di Solution Pad di Visual Studio untuk Mac:

   

6. Buka kembali papan cerita di Penyusun Antarmuka Xcode.

7. File WindowController.h akan tersedia untuk digunakan:

   

Membuat dan memelihara toolbar di Xcode

Toolbar dibuat dan dikelola dengan Penyusun Antarmuka Xcode. Untuk menambahkan toolbar ke aplikasi, edit papan cerita utama aplikasi (dalam hal ini Main.storyboard) dengan mengklik dua kali di Solution Pad:

Di Pemeriksa Pustaka, masukkan "alat" di Kotak Pencarian untuk mempermudah melihat semua item toolbar yang tersedia:

Seret toolbar ke jendela di Editor Antarmuka. Dengan toolbar dipilih, konfigurasikan perilakunya dengan mengatur properti di Pemeriksa Atribut:

Properti berikut ini tersedia:

1. Tampilan - Mengontrol apakah bilah alat menampilkan ikon, teks, atau keduanya
2. Terlihat di Luncurkan - Jika dipilih, toolbar terlihat secara default.
3. Dapat disesuaikan - Jika dipilih, pengguna dapat mengedit dan menyesuaikan toolbar.
4. Pemisah - Jika dipilih, garis horizontal tipis memisahkan toolbar dari konten jendela.
5. Ukuran - Mengatur ukuran toolbar
6. Simpan Otomatis - Jika dipilih, aplikasi akan mempertahankan perubahan konfigurasi toolbar pengguna di seluruh peluncuran aplikasi.

Pilih opsi Simpan Otomatis dan biarkan semua properti lain di pengaturan defaultnya.

Setelah membuka toolbar di Hierarki Antarmuka, munculkan dialog kustomisasi dengan memilih item toolbar:

Gunakan dialog ini untuk mengatur properti untuk item yang sudah menjadi bagian dari bilah alat, untuk merancang bilah alat default untuk aplikasi, dan menyediakan item toolbar tambahan bagi pengguna untuk dipilih saat menyesuaikan bilah alat. Untuk menambahkan item ke toolbar, seret item dari Pemeriksa Pustaka:

Item bilah alat berikut ini dapat ditambahkan:

• Item Bilah Alat Gambar - Item toolbar dengan gambar kustom sebagai ikon.

• Item Bilah Alat Ruang Fleksibel - Ruang fleksibel yang digunakan untuk membenarkan item toolbar berikutnya. Misalnya, satu atau beberapa item toolbar diikuti oleh item toolbar spasi fleksibel dan item toolbar lain akan menyematkan item terakhir ke sisi kanan toolbar.

• Item Bilah Alat Spasi - Ruang tetap antar item pada toolbar

• Item Toolbar Pemisah - Pemisah yang terlihat antara dua item toolbar atau lebih, untuk pengelompokan

• Kustomisasi Item Bilah Alat - Memungkinkan pengguna mengkustomisasi bilah alat

• Cetak Item Bilah Alat - Memungkinkan pengguna mencetak dokumen yang terbuka

• Perlihatkan Item Bilah Alat Warna - Menampilkan pemilih warna sistem standar:

  

• Perlihatkan Item Bilah Alat Font - Menampilkan dialog font sistem standar:

  

Penting

Seperti yang akan terlihat nanti, banyak kontrol antarmuka pengguna Kakao standar seperti bidang pencarian, kontrol tersegmentasi, dan pengguncur horizontal juga dapat ditambahkan ke toolbar.

Menambahkan item ke bilah alat

Untuk menambahkan item ke toolbar, pilih toolbar di Hierarki Antarmuka dan klik salah satu itemnya, yang menyebabkan dialog penyesuaian muncul. Selanjutnya, seret item baru dari Pemeriksa Pustaka ke area Item Bilah Alat yang Diizinkan:

Untuk memastikan bahwa item baru adalah bagian dari toolbar default, seret item tersebut ke area Item Bilah Alat Default:

Untuk menyusun ulang item toolbar default, seret ke kiri atau kanan.

Selanjutnya, gunakan Pemeriksa Atribut untuk mengatur properti default untuk item:

Properti berikut ini tersedia:

• Nama Gambar - Gambar yang akan digunakan sebagai ikon untuk item
• Label - Teks yang akan ditampilkan untuk item di toolbar
• Label Palet - Teks yang akan ditampilkan untuk item di area Item Bilah Alat yang Diizinkan
• Tag - Pengidentifikasi unik opsional yang membantu mengidentifikasi item dalam kode.
• Pengidentifikasi - Menentukan jenis item toolbar. Nilai kustom dapat digunakan untuk memilih item toolbar dalam kode.
• Dapat dipilih - Jika dicentang, item akan bertindak seperti tombol aktif/mati.

Penting

Tambahkan item ke area Item Bilah Alat yang Diizinkan tetapi bukan bilah alat default untuk menyediakan opsi kustomisasi bagi pengguna.

Menambahkan kontrol UI lain ke toolbar

Beberapa elemen antarmuka pengguna Kakao seperti bidang pencarian dan kontrol tersegmentasi juga dapat ditambahkan ke toolbar.

Untuk mencoba ini, buka toolbar di Hierarki Antarmuka dan pilih item toolbar untuk membuka dialog kustomisasi. Seret Bidang Pencarian dari Pemeriksa Pustaka ke area Item Bilah Alat yang Diizinkan:

Dari sini, gunakan Interface Builder untuk mengonfigurasi bidang pencarian dan mengeksposnya ke kode melalui tindakan atau outlet.

Dukungan item toolbar bawaan

Beberapa elemen Antarmuka Pengguna Kakao berinteraksi dengan item toolbar standar secara default. Misalnya, seret Tampilan Teks ke jendela aplikasi dan posisikan untuk mengisi area konten:

Simpan dokumen, kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode, jalankan aplikasi, masukkan beberapa teks, pilih, dan klik item toolbar Warna. Perhatikan bahwa tampilan teks secara otomatis berfungsi dengan pemilih warna:

Menggunakan gambar dengan item toolbar

Menggunakan Item Toolbar Gambar, gambar bitmap apa pun yang ditambahkan ke folder Sumber Daya (dan diberi tindakan build Sumber Daya Bundel) dapat ditampilkan pada toolbar sebagai ikon:

1. Di Visual Studio untuk Mac, di Pad Solusi, klik kanan folder Sumber Daya dan pilih Tambahkan>File.

2. Dari kotak dialog Tambahkan File , navigasikan ke gambar yang diinginkan, pilih dan klik tombol Buka :

   

3. Pilih Salin, centang Gunakan tindakan yang sama untuk semua file yang dipilih, dan klik OK:

   

4. Di Solution Pad, klik dua kali MainWindow.xib untuk membukanya di Xcode.

5. Pilih toolbar di Hierarki Antarmuka dan klik salah satu itemnya untuk membuka dialog kustomisasi.

6. Seret Item Toolbar Gambar dari Pemeriksa Pustaka ke area Item Bilah Alat yang Diizinkan bilah alat:

   

7. Di Pemeriksa Atribut, pilih gambar yang baru saja ditambahkan di Visual Studio untuk Mac:

   

8. Atur Label ke "Sampah" dan Label Palet ke "Hapus Dokumen":

   

9. Seret Item Toolbar Pemisah dari Pemeriksa Pustaka ke area Item Bilah Alat yang Diizinkan bilah alat:

   

10. Seret item pemisah dan item "Sampah" ke area Item Bilah Alat Default dan atur urutan item toolbar dari kiri ke kanan sebagai berikut (Warna, Font, Pemisah, Sampah, Ruang Fleksibel, Cetak):

    

11. Simpan perubahan dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Jalankan aplikasi untuk memverifikasi bahwa toolbar baru ditampilkan secara default:

Mengekspos item toolbar dengan outlet dan tindakan

Untuk mengakses toolbar atau item toolbar dalam kode, item harus dilampirkan ke outlet atau tindakan:

1. Di Pad Solusi, klik dua kali Main.storyboard untuk membukanya di Xcode.

2. Pastikan bahwa kelas kustom "WindowController" telah ditetapkan ke pengontrol jendela utama di Pemeriksa Identitas:

   

3. Selanjutnya, pilih item toolbar di Hierarki Antarmuka:

   

4. Buka Tampilan Asisten, pilih file WindowController.h, dan seret kontrol dari item toolbar ke file WindowController.h.

5. Atur jenis Koneksi ion ke Tindakan, masukkan "trashDocument" untuk Nama, dan klik tombol Koneksi:

   

6. Mengekspos Tampilan Teks sebagai outlet yang disebut "documentEditor" dalam file ViewController.h :

   

7. Simpan perubahan Anda dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode.

Di Visual Studio untuk Mac, edit file ViewController.cs dan tambahkan kode berikut:

public void EraseDocument() {
    documentEditor.Value = "";
}

Selanjutnya, edit file WindowController.cs dan tambahkan kode berikut ke bagian WindowController bawah kelas:

[Export ("trashDocument:")]
void TrashDocument (NSObject sender) {

    var controller = ContentViewController as ViewController;
    controller.EraseDocument ();
}

Saat menjalankan aplikasi, item toolbar Sampah akan aktif:

Perhatikan bahwa item toolbar Sampah sekarang dapat digunakan untuk menghapus teks.

Menonaktifkan item bilah alat

Untuk menonaktifkan item pada toolbar, buat kelas kustom NSToolbarItem dan ambil alih Validate metode . Kemudian, di Interface Builder, tetapkan jenis kustom ke item yang ingin Anda aktifkan/nonaktifkan.

Untuk membuat kelas kustomNSToolbarItem, klik kanan pada proyek dan pilih Tambahkan>File Baru.... Pilih Kelas Kosong Umum>, masukkan "ActivatableItem" untuk Nama, dan klik tombol Baru:

Selanjutnya, edit file ActivatableItem.cs untuk dibaca sebagai berikut:

using System;

using Foundation;
using AppKit;

namespace MacToolbar
{
    [Register("ActivatableItem")]
    public class ActivatableItem : NSToolbarItem
    {
        public bool Active { get; set;} = true;

        public ActivatableItem ()
        {
        }

        public ActivatableItem (IntPtr handle) : base (handle)
        {
        }

        public ActivatableItem (NSObjectFlag  t) : base (t)
        {
        }

        public ActivatableItem (string title) : base (title)
        {
        }

        public override void Validate ()
        {
            base.Validate ();
            Enabled = Active;
        }
    }
}

Klik dua kali Main.storyboard untuk membukanya di Xcode. Pilih item toolbar Sampah yang dibuat di atas dan ubah kelasnya menjadi "ActivatableItem" di Pemeriksa Identitas:

Buat outlet yang dipanggil trashItem untuk item toolbar Sampah . Simpan perubahan dan kembali ke Visual Studio untuk Mac untuk disinkronkan dengan Xcode. Terakhir, buka MainWindow.cs dan perbarui AwakeFromNib metode untuk dibaca sebagai berikut:

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

    // Disable trash
    trashItem.Active = false;
}

Jalankan aplikasi dan perhatikan bahwa item Sampah sekarang dinonaktifkan di toolbar:

Ringkasan

Artikel ini telah melihat secara rinci tentang bekerja dengan toolbar dan item toolbar dalam aplikasi Xamarin.Mac. Ini menjelaskan cara membuat dan memelihara toolbar di Penyusun Antarmuka Xcode, bagaimana beberapa kontrol UI secara otomatis bekerja dengan item toolbar, cara bekerja dengan toolbar dalam kode C#, dan cara mengaktifkan dan menonaktifkan item toolbar.

Link Terkait

• Halo, Mac
• Panduan Antarmuka Manusia untuk Toolbar
• Pengantar Toolbar