Gambar di Xamarin.Mac

Artikel ini membahas cara bekerja dengan gambar dan ikon dalam aplikasi Xamarin.Mac. Ini menjelaskan pembuatan dan pemeliharaan gambar yang diperlukan untuk membuat ikon aplikasi Anda dan menggunakan gambar dalam kode C# dan Penyusun Antarmuka Xcode.

Gambaran Umum

Saat bekerja dengan C# dan .NET dalam aplikasi Xamarin.Mac, Anda memiliki akses ke alat Gambar dan Ikon yang sama dengan yang digunakan Objective-C pengembang dan Xcode .

Ada beberapa cara agar aset gambar digunakan di dalam aplikasi macOS (sebelumnya dikenal sebagai Mac OS X). Mulai dari hanya menampilkan gambar sebagai bagian dari UI aplikasi Anda, menetapkannya ke kontrol UI seperti Bilah Alat atau Item Daftar Sumber, hingga menyediakan Ikon, Xamarin.Mac memudahkan untuk menambahkan karya seni hebat ke aplikasi macOS Anda dengan cara berikut:

• Elemen UI - Gambar dapat ditampilkan sebagai latar belakang atau sebagai bagian dari aplikasi Anda dalam Tampilan Gambar (NSImageView).
• Tombol - Gambar dapat ditampilkan dalam tombol (NSButton).
• Sel Gambar - Sebagai bagian dari kontrol berbasis tabel (NSTableView atau NSOutlineView), gambar dapat digunakan dalam Sel Gambar (NSImageCell).
• Item Bilah Alat - Gambar dapat ditambahkan ke Toolbar (NSToolbar) sebagai Item Toolbar Gambar (NSToolbarItem).
• Ikon Daftar Sumber - Sebagai bagian dari Daftar Sumber (diformat NSOutlineViewkhusus ).
• Ikon Aplikasi - Serangkaian gambar dapat dikelompokkan bersama ke dalam satu .icns set dan digunakan sebagai ikon aplikasi Anda. Lihat dokumentasi Ikon Aplikasi kami untuk informasi selengkapnya.

Selain itu, macOS menyediakan sekumpulan gambar yang telah ditentukan sebelumnya yang dapat digunakan di seluruh aplikasi Anda.

Dalam artikel ini, kita akan membahas dasar-dasar bekerja dengan Gambar dan Ikon 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.

Menambahkan gambar ke proyek Xamarin.Mac

Saat menambahkan gambar untuk digunakan dalam aplikasi Xamarin.Mac, ada beberapa tempat dan cara pengembang dapat menyertakan file gambar ke sumber proyek:

• Pohon proyek utama [tidak digunakan lagi] - Gambar dapat ditambahkan langsung ke pohon proyek. Saat memanggil gambar yang disimpan di pohon proyek utama dari kode, tidak ada lokasi folder yang ditentukan. Misalnya: NSImage image = NSImage.ImageNamed("tags.png");.
• Folder sumber daya [tidak digunakan lagi] - Folder Sumber Daya khusus adalah untuk file apa pun yang akan menjadi bagian dari Bundel Aplikasi seperti Ikon, Layar Peluncuran atau Gambar umum (atau gambar atau file lain yang ingin ditambahkan pengembang). Saat memanggil gambar yang disimpan di folder Sumber Daya dari kode, sama seperti gambar yang disimpan di pohon proyek utama, tidak ada lokasi folder yang ditentukan. Misalnya: NSImage.ImageNamed("tags.png").
• Folder atau Subfolder Kustom [tidak digunakan lagi] - Pengembang dapat menambahkan folder kustom ke pohon sumber proyek dan menyimpan gambar di sana. Lokasi tempat file ditambahkan dapat disarangkan dalam subfolder untuk lebih membantu mengatur proyek. Misalnya, jika Pengembang menambahkan Card folder ke proyek dan sub folder Hearts ke folder tersebutHearts, maka simpan gambar Jack.png di folder, NSImage.ImageNamed("Card/Hearts/Jack.png") akan memuat gambar saat runtime.
• Set Gambar Katalog Aset [pilihan] - Ditambahkan di OS X El Capitan, Kumpulan Gambar Katalog Aset berisi semua versi atau representasi gambar yang diperlukan untuk mendukung berbagai perangkat dan faktor skala untuk aplikasi Anda. Alih-alih mengandalkan nama file aset gambar (@1x, @2x).

Menambahkan gambar ke kumpulan gambar katalog aset

Seperti yang dinyatakan di atas, Kumpulan Gambar Katalog Aset berisi semua versi atau representasi gambar yang diperlukan untuk mendukung berbagai perangkat dan faktor skala untuk aplikasi Anda. Alih-alih mengandalkan nama file aset gambar (lihat Resolusi Gambar Independen dan Nomenklatur Gambar di atas), Set Gambar menggunakan Editor Aset untuk menentukan gambar mana yang termasuk dalam perangkat dan/atau resolusi mana.

1. Di Solution Pad, klik dua kali file Assets.xcassets untuk membukanya untuk pengeditan:

   

2. Klik kanan pada Daftar Aset dan pilih Set Gambar Baru:

   

3. Pilih set gambar baru dan editor akan ditampilkan:

   

4. Dari sini kita dapat menyeret gambar untuk setiap perangkat dan resolusi yang berbeda yang diperlukan.

5. Klik dua kali Nama set gambar baru di Daftar Aset untuk mengeditnya:

   

Kelas Vektor khusus seperti yang telah ditambahkan ke Image Sets yang memungkinkan kami untuk menyertakan gambar vektor berformat PDF dalam casset, termasuk file bitmap individual pada resolusi yang berbeda. Dengan menggunakan metode ini, Anda menyediakan satu file vektor untuk resolusi @1x (diformat sebagai file PDF vektor) dan versi @2x dan @3x file akan dihasilkan pada waktu kompilasi dan disertakan dalam bundel aplikasi.

Misalnya, jika Anda menyertakan MonkeyIcon.pdf file sebagai vektor Katalog Aset dengan resolusi 150px x 150px, aset bitmap berikut akan disertakan dalam bundel aplikasi akhir saat dikompilasi:

1. MonkeyIcon@1x.png - Resolusi 150px x 150px.
2. MonkeyIcon@2x.png - Resolusi 300px x 300px.
3. MonkeyIcon@3x.png - Resolusi 450px x 450px.

Berikut ini harus dipertimbangkan saat menggunakan gambar vektor PDF di Katalog Aset:

• Ini bukan dukungan vektor penuh karena PDF akan dirasterisasi ke bitmap pada waktu kompilasi dan bitmap yang dikirim dalam aplikasi akhir.
• Anda tidak dapat menyesuaikan ukuran gambar setelah diatur di Katalog Aset. Jika Anda mencoba mengubah ukuran gambar (baik dalam kode atau dengan menggunakan Tata Letak Otomatis dan Kelas Ukuran) gambar akan terdistorsi seperti bitmap lainnya.

Saat menggunakan Image Set di Interface Builder Xcode, Anda cukup memilih nama set dari daftar dropdown di Pemeriksa Atribut:

Menambahkan koleksi aset baru

Saat bekerja dengan gambar di Katalog Aset mungkin ada kalanya Anda ingin membuat koleksi baru, alih-alih menambahkan semua gambar Anda ke koleksi Assets.xcassets . Misalnya, saat merancang sumber daya sesuai permintaan.

Untuk menambahkan Katalog Aset baru ke proyek Anda:

1. Klik kanan pada proyek di Pad Solusi dan pilih Tambahkan>File Baru...

2. Pilih Katalog Aset Mac>, masukkan Nama untuk koleksi dan klik tombol Baru:

   

Dari sini Anda dapat bekerja dengan koleksi dengan cara yang sama seperti koleksi Assets.xcassets default yang secara otomatis disertakan dalam proyek.

Menambahkan gambar ke sumber daya

Penting

Metode bekerja dengan gambar di app macOS ini tidak digunakan lagi oleh Apple. Anda harus menggunakan Kumpulan Gambar Katalog Aset untuk mengelola gambar aplikasi Anda sebagai gantinya.

Sebelum Anda dapat menggunakan file Gambar di aplikasi Xamarin.Mac Anda (baik dalam kode C# atau dari Pembangun Antarmuka) file tersebut perlu disertakan dalam folder Sumber Daya proyek sebagai Sumber Daya Bundel. Untuk menambahkan file ke proyek, lakukan hal berikut:

1. Klik kanan pada folder Sumber Daya di proyek Anda di Solution Pad dan pilih Tambahkan>File...:

   

2. Dari kotak dialog Tambahkan File , pilih file gambar yang akan ditambahkan ke proyek, pilih BundleResource untuk tindakan Ambil alih build dan klik tombol Buka :

   

3. Jika file belum ada di folder Sumber Daya, Anda akan ditanya apakah Anda ingin Menyalin, Memindahkan, atau Menautkan file. Pilih mana yang sesuai dengan kebutuhan Anda, biasanya yang akan berupa Salin:

   

4. File baru akan disertakan dalam proyek dan dibaca untuk digunakan:

   

5. Ulangi proses untuk file gambar apa pun yang diperlukan.

Anda dapat menggunakan file png, jpg, atau pdf apa pun sebagai gambar sumber di aplikasi Xamarin.Mac Anda. Di bagian berikutnya, kita akan melihat menambahkan versi Resolusi Tinggi dari Gambar dan Ikon kita untuk mendukung Mac berbasis Retina.

Penting

Jika Anda menambahkan Gambar ke folder Sumber Daya , Anda dapat membiarkan tindakan Ambil alih build diatur ke Default. Tindakan Build default untuk folder ini adalah BundleResource.

Menyediakan versi resolusi tinggi dari semua sumber daya grafis aplikasi

Setiap aset grafis yang Anda tambahkan ke aplikasi Xamarin.Mac (ikon, kontrol kustom, kursor kustom, karya seni kustom, dll.) harus memiliki versi resolusi tinggi selain versi resolusi standarnya. Ini diperlukan agar aplikasi Anda akan terlihat terbaik saat dijalankan pada komputer Mac yang dilengkapi Retina Display.

Mengadopsi konvensi penamaan @2x

Penting

Metode bekerja dengan gambar di app macOS ini tidak digunakan lagi oleh Apple. Anda harus menggunakan Kumpulan Gambar Katalog Aset untuk mengelola gambar aplikasi Anda sebagai gantinya.

Saat Anda membuat versi gambar standar dan resolusi tinggi, ikuti konvensi penamaan ini untuk pasangan gambar saat menyertakannya dalam proyek Xamarin.Mac Anda:

• ImageName.filename-extension Resolusi - Standar (Contoh: tags.png)
• Ekstensi Resolusi - ImageName@2x.filename Tinggi (Contoh: ) tags@2x.png

Saat ditambahkan ke proyek, proyek akan muncul sebagai berikut:

Saat gambar ditetapkan ke elemen UI di Interface Builder, Anda cukup memilih file di ImageName.format filename-extension (Contoh: tags.png). Sama untuk menggunakan gambar dalam kode C#, Anda akan memilih file di ImageName.format filename-extension.

Saat aplikasi Xamarin.Mac Anda dijalankan di Mac, ImageName.gambar format filename-extension akan digunakan pada Layar Resolusi Standar, ImageName@2x.filenamegambar -extension akan secara otomatis dipilih pada Retina Display bases Macs.

Menggunakan gambar di Penyusun Antarmuka

Sumber daya gambar apa pun yang telah Anda tambahkan ke folder Sumber Daya di proyek Xamarin.Mac Anda dan telah mengatur tindakan build ke BundleResource akan secara otomatis muncul di Interface Builder dan dapat dipilih sebagai bagian dari elemen UI (jika menangani gambar).

Untuk menggunakan gambar di penyusun antarmuka, lakukan hal berikut:

1. Tambahkan gambar ke folder Sumber Daya dengan Tindakan Build :BundleResource

   

2. Klik dua kali file Main.storyboard untuk membukanya untuk pengeditan di Penyusun Antarmuka:

   

3. Seret elemen UI yang mengambil gambar ke permukaan desain (misalnya, Item Toolbar Gambar):

   

4. Pilih Gambar yang Anda tambahkan ke folder Sumber Daya di menu dropdown Nama Gambar:

   

5. Gambar yang dipilih akan ditampilkan di permukaan desain:

   

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

Langkah-langkah di atas berfungsi untuk elemen UI apa pun yang memungkinkan properti gambar mereka diatur di Pemeriksa Atribut. Sekali lagi, jika Anda telah menyertakan versi @2x file gambar Anda, file tersebut akan secara otomatis digunakan pada Mac berbasis Retina Display.

Penting

Jika Gambar tidak tersedia di menu dropdown Nama Gambar, tutup proyek .storyboard Anda di Xcode dan buka kembali dari Visual Studio untuk Mac. Jika gambar masih tidak tersedia, pastikan Bahwa Tindakan Build-nya adalah BundleResource dan gambar telah ditambahkan ke folder Sumber Daya .

Menggunakan gambar dalam kode C#

Saat memuat gambar ke dalam memori menggunakan kode C# di aplikasi Xamarin.Mac Anda, gambar akan disimpan dalam NSImage objek. Jika file gambar telah disertakan dalam bundel aplikasi Xamarin.Mac (disertakan dalam sumber daya), gunakan kode berikut untuk memuat gambar:

NSImage image = NSImage.ImageNamed("tags.png");

Kode di atas menggunakan metode statis ImageNamed("...") kelas untuk memuat gambar yang diberikan ke dalam memori dari folder Sumber Daya, jika gambar tidak dapat ditemukan, null akan NSImage dikembalikan. Seperti Gambar yang ditetapkan di Penyusun Antarmuka, jika Anda telah menyertakan versi @2x file gambar Anda, gambar tersebut akan secara otomatis digunakan pada Mac berbasis Layar Retina.

Untuk memuat gambar di luar bundel aplikasi (dari sistem file Mac), gunakan kode berikut:

NSImage image = new NSImage("/Users/KMullins/Documents/photo.jpg")

Bekerja dengan gambar templat

Berdasarkan desain aplikasi macOS Anda, mungkin ada kalanya Anda perlu menyesuaikan ikon atau gambar di dalam Antarmuka Pengguna agar sesuai dengan perubahan skema warna (misalnya, berdasarkan preferensi pengguna).

Untuk mencapai efek ini, alihkan Mode Render Aset Gambar Anda ke Gambar Templat:

Dari Penyusun Antarmuka Xcode, tetapkan Aset Gambar ke kontrol UI:

Atau secara opsional atur sumber gambar dalam kode:

MyIcon.Image = NSImage.ImageNamed ("MessageIcon");

Tambahkan fungsi publik berikut ke Pengontrol Tampilan Anda:

public NSImage ImageTintedWithColor(NSImage sourceImage, NSColor tintColor)
    => NSImage.ImageWithSize(sourceImage.Size, false, rect => {
        // Draw the original source image
        sourceImage.DrawInRect(rect, CGRect.Empty, NSCompositingOperation.SourceOver, 1f);

        // Apply tint
        tintColor.Set();
        NSGraphics.RectFill(rect, NSCompositingOperation.SourceAtop);

        return true;
    });

Penting

Terutama dengan munculnya Mode Gelap di macOS Mojave, penting untuk menghindari LockFocus API saat merender ulang objek yang dirender NSImage khusus. Gambar tersebut menjadi statis dan tidak akan diperbarui secara otomatis untuk memperhitungkan perubahan kepadatan tampilan atau tampilan.

Dengan menggunakan mekanisme berbasis handler di atas, penyajian ulang untuk kondisi dinamis akan terjadi secara otomatis ketika NSImage dihosting, misalnya, dalam NSImageView.

Terakhir, untuk mewarnai Gambar Templat, panggil fungsi ini terhadap gambar untuk mewarnai:

MyIcon.Image = ImageTintedWithColor (MyIcon.Image, NSColor.Red);

Menggunakan gambar dengan tampilan tabel

Untuk menyertakan gambar sebagai bagian dari sel dalam NSTableView, Anda harus mengubah cara data dikembalikan oleh metode Tampilan NSTableViewDelegate'sGetViewForItem Tabel untuk menggunakan NSTableCellView alih-alih yang umum NSTextField. Contohnya:

public override NSView GetViewForItem (NSTableView tableView, NSTableColumn tableColumn, nint row)
{

    // This pattern allows you reuse existing views when they are no-longer in use.
    // If the returned view is null, you instance up a new view
    // If a non-null view is returned, you modify it enough to reflect the new data
    NSTableCellView view = (NSTableCellView)tableView.MakeView (tableColumn.Title, this);
    if (view == null) {
        view = new NSTableCellView ();
        if (tableColumn.Title == "Product") {
            view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
            view.AddSubview (view.ImageView);
            view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
        } else {
            view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
        }
        view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
        view.AddSubview (view.TextField);
        view.Identifier = tableColumn.Title;
        view.TextField.BackgroundColor = NSColor.Clear;
        view.TextField.Bordered = false;
        view.TextField.Selectable = false;
        view.TextField.Editable = true;

        view.TextField.EditingEnded += (sender, e) => {

            // Take action based on type
            switch(view.Identifier) {
            case "Product":
                DataSource.Products [(int)view.TextField.Tag].Title = view.TextField.StringValue;
                break;
            case "Details":
                DataSource.Products [(int)view.TextField.Tag].Description = view.TextField.StringValue;
                break;
            }
        };
    }

    // Tag view
    view.TextField.Tag = row;

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.ImageView.Image = NSImage.ImageNamed ("tags.png");
        view.TextField.StringValue = DataSource.Products [(int)row].Title;
        break;
    case "Details":
        view.TextField.StringValue = DataSource.Products [(int)row].Description;
        break;
    }

    return view;
}

Ada beberapa baris yang menarik di sini. Pertama, untuk kolom yang ingin kita sertakan gambar, kita membuat baru NSImageView dari ukuran dan lokasi yang diperlukan, kita juga membuat yang baru NSTextField dan menempatkan posisi defaultnya berdasarkan apakah kita menggunakan gambar atau tidak:

if (tableColumn.Title == "Product") {
    view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
    view.AddSubview (view.ImageView);
    view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
} else {
    view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
}

Kedua, kita perlu menyertakan Tampilan Gambar dan Bidang Teks baru di induk NSTableCellView:

view.AddSubview (view.ImageView);
...

view.AddSubview (view.TextField);
...

Terakhir, kita perlu memberi tahu Bidang Teks bahwa bidang tersebut dapat menyusut dan bertambah dengan Sel Tampilan Tabel:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Contoh output:

Untuk informasi selengkapnya tentang bekerja dengan Tampilan Tabel, silakan lihat dokumentasi Tampilan Tabel kami.

Menggunakan gambar dengan tampilan kerangka

Untuk menyertakan gambar sebagai bagian dari sel dalam NSOutlineView, Anda harus mengubah cara data dikembalikan oleh metode Tampilan NSTableViewDelegate'sGetView Kerangka untuk menggunakan NSTableCellView alih-alih yang khas NSTextField. Contohnya:

public override NSView GetView (NSOutlineView outlineView, NSTableColumn tableColumn, NSObject item) {
    // Cast item
    var product = item as Product;

    // This pattern allows you reuse existing views when they are no-longer in use.
    // If the returned view is null, you instance up a new view
    // If a non-null view is returned, you modify it enough to reflect the new data
    NSTableCellView view = (NSTableCellView)outlineView.MakeView (tableColumn.Title, this);
    if (view == null) {
        view = new NSTableCellView ();
        if (tableColumn.Title == "Product") {
            view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
            view.AddSubview (view.ImageView);
            view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
        } else {
            view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
        }
        view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;
        view.AddSubview (view.TextField);
        view.Identifier = tableColumn.Title;
        view.TextField.BackgroundColor = NSColor.Clear;
        view.TextField.Bordered = false;
        view.TextField.Selectable = false;
        view.TextField.Editable = !product.IsProductGroup;
    }

    // Tag view
    view.TextField.Tag = outlineView.RowForItem (item);

    // Allow for edit
    view.TextField.EditingEnded += (sender, e) => {

        // Grab product
        var prod = outlineView.ItemAtRow(view.Tag) as Product;

        // Take action based on type
        switch(view.Identifier) {
        case "Product":
            prod.Title = view.TextField.StringValue;
            break;
        case "Details":
            prod.Description = view.TextField.StringValue;
            break;
        }
    };

    // Setup view based on the column selected
    switch (tableColumn.Title) {
    case "Product":
        view.ImageView.Image = NSImage.ImageNamed (product.IsProductGroup ? "tags.png" : "tag.png");
        view.TextField.StringValue = product.Title;
        break;
    case "Details":
        view.TextField.StringValue = product.Description;
        break;
    }

    return view;
}

Ada beberapa baris yang menarik di sini. Pertama, untuk kolom yang ingin kita sertakan gambar, kita membuat baru NSImageView dari ukuran dan lokasi yang diperlukan, kita juga membuat yang baru NSTextField dan menempatkan posisi defaultnya berdasarkan apakah kita menggunakan gambar atau tidak:

if (tableColumn.Title == "Product") {
    view.ImageView = new NSImageView (new CGRect (0, 0, 16, 16));
    view.AddSubview (view.ImageView);
    view.TextField = new NSTextField (new CGRect (20, 0, 400, 16));
} else {
    view.TextField = new NSTextField (new CGRect (0, 0, 400, 16));
}

Kedua, kita perlu menyertakan Tampilan Gambar dan Bidang Teks baru di induk NSTableCellView:

view.AddSubview (view.ImageView);
...

view.AddSubview (view.TextField);
...

Terakhir, kita perlu memberi tahu Bidang Teks bahwa bidang tersebut dapat menyusut dan bertambah dengan Sel Tampilan Tabel:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Contoh output:

Untuk informasi selengkapnya tentang bekerja dengan Tampilan Kerangka, silakan lihat dokumentasi Tampilan Kerangka kami.

Ringkasan

Artikel ini telah melihat secara rinci tentang bekerja dengan Gambar dan Ikon dalam aplikasi Xamarin.Mac. Kami melihat berbagai jenis dan penggunaan Gambar, cara menggunakan Gambar dan Ikon di Penyusun Antarmuka Xcode dan cara bekerja dengan Gambar dan Ikon dalam kode C#.

Link Terkait

• Halo, Mac
• Tampilan tabel
• Tampilan kerangka
• Pedoman Antarmuka Manusia macOS X
• Tentang Resolusi Tinggi untuk OS X