Xamarin.Mac'te görüntüler

Bu makale bir Xamarin.Mac uygulamasında görüntüler ve simgelerle çalışmayı kapsar. Uygulama simgesini oluşturmak ve hem C# kodundaki hem de Xcode'un simgesinde görüntüleri kullanmak için gereken görüntülerin oluşturulmasını ve korunmasını Interface Builder.

Genel Bakış

Bir Xamarin.Mac uygulamasında C# ve .NET ile çalışırken, ve Xcode'da çalışan bir geliştiricinin sahip olduğu Görüntü ve Simge araçlarına Objective-C erişebilirsiniz. Objective-C

Görüntü varlıklarının bir macOS (eski adı Mac OS X) uygulaması içinde Mac OS X vardır. Bir görüntüyü yalnızca uygulama arabiriminin bir parçası olarak görüntülemekten, Araç Çubuğu veya Kaynak Listesi Öğesi gibi bir kullanıcı arabirimi denetimine atamaktan Simgeler sağlamaktan Xamarin.Mac'e aşağıdaki yollarla macOS uygulamalarınıza harika resimler eklemenizi kolaylaştırır:

• Kullanıcı arabirimi öğeleri - Görüntüler arka plan olarak veya görüntü görünümünde ( ) uygulamanın bir parçası olarak görüntülenebilir.
• Düğme - Görüntüler düğmelerde ( ) görüntülenebilir.
• Görüntü Hücresi - Tablo tabanlı denetimin ( veya ) bir parçası olarak görüntüler bir Görüntü NSOutlineView Hücresinde ( ) NSImageCell kullanılabilir.
• Araç Çubuğu Öğesi - Görüntüler Bir Araç Çubuğuna ( ) Görüntü Araç Çubuğu Öğesi ( ) olarak NSToolbarItem eklenebilir.
• Kaynak Listesi Simgesi - Bir Kaynak Listesinin parçası olarak (özel olarak biçimlendirilmiş).
• Uygulama Simgesi - Bir dizi görüntü bir kümede birlikte grup haline kullanılabilir ve uygulamanın simgesi olarak kullanılabilir. Daha fazla bilgi için Uygulama Simgesi belgelerimize bakın.

Ayrıca, macOS uygulamanız genelinde kullanılabilen önceden tanımlanmış bir görüntü kümesi sağlar.

Bu makalede, bir Xamarin.Mac uygulamasında Görüntüler ve Simgelerle çalışmayla ilgili temel bilgiler yer almaktadır. Öncelikle Hello, Mac makalesi, özellikle de Xcode'a giriş ve Interface Builder ve Çıkışlar ve Eylemler bölümlerine bakarak bu makalede kullanacaklarımız temel kavramları ve teknikleri gözden geçirin.

Xamarin.Mac projesine görüntü ekleme

Xamarin.Mac uygulamasında kullanmak üzere görüntü eklerken, geliştiricinin projenin kaynağına görüntü dosyası eklemenin çeşitli yolları vardır:

• Ana proje ağacı [kullanım dışı] - Görüntüler doğrudan proje ağacına eklenebilir. Koddan ana proje ağacında depolanan görüntüleri çağırarak klasör konumu belirtilmez. Örneğin: NSImage image = NSImage.ImageNamed("tags.png");.
• Resources klasörü [kullanım dışı] - Özel Kaynaklar klasörü; Simge, Başlatma Ekranı veya genel Görüntüler (veya geliştiricinin eklemek istediği başka bir görüntü veya dosya) gibi Uygulama Paketi'nin parçası olacak herhangi bir dosya için kullanılabilir. Ana proje ağacında depolanan görüntüler gibi koddan Kaynaklar klasöründe depolanan görüntüleri çağırarak klasör konumu belirtilmez. Örneğin: NSImage.ImageNamed("tags.png").
• Özel Klasör veya Alt Klasör [kullanım dışı] - Geliştirici, projelerin kaynak ağacına özel bir klasör ekleyebilir ve görüntüleri orada depolar. Projenin düzenlenmesine yardımcı olmak için dosyanın ekli olduğu konum bir alt klasöre iç içe yer alan bir konum olabilir. Örneğin, Geliştirici projeye bir klasör ve bu klasöre bir alt klasörü eklediyseniz, bu klasöre birJack.pngdepolar, çalışma zamanında CardHearts görüntüyü CardHeartsNSImage.ImageNamed("Card/Hearts/Jack.png") yükler.
• Varlık Kataloğu Görüntü Kümeleri [tercih edilen] - OS X El Capitan'a eklendi, Varlık Katalogları Görüntü Kümeleri, bir görüntünün uygulamanıza yönelik çeşitli cihazları ve ölçek faktörlerini desteklemek için gereken tüm sürümlerini veya gösterimlerini içerir. Görüntü varlıkları dosya adını (@1x ,@2x).

Varlık kataloğu görüntü kümesine görüntü ekleme

Yukarıda belirtildiği gibi, bir Varlık Katalogları Görüntü Kümeleri, bir görüntünün çeşitli cihazları ve uygulamanıza yönelik ölçek faktörlerini desteklemek için gereken tüm sürümlerini veya gösterimlerini içerir. Görüntü Kümeleri, görüntü varlıkları dosya adını kullanmak yerine (yukarıdaki Çözümleme Bağımsız Görüntüleri ve Görüntü Adı'na bakın), Hangi görüntünün hangi cihaza ve/veya çözüme ait olduğunu belirtmek için Varlık Düzenleyicisi'ni kullanır.

1. Dosya Çözüm Bölmesiassets.xcassets dosyasına çift tıklar ve dosyayı düzenlemek için açın:

   öğesini

2. Varlıklar Listesine sağ tıklayın ve Yeni GörüntüKümesi'ne tıklayın:

   

3. Yeni görüntü kümesi'ni seçin; düzenleyici görüntülenir:

   

4. Buradan, gereken farklı cihazların ve çözünürlüklerin her biri için görüntüleri sürükleyebilirsiniz.

5. Yeni görüntü kümesi adını düzenlemek için VarlıklarListesi'ne çift tıklayın:

   

Farklı çözünürlüklerde tek bit eşlem dosyaları dahil olmak üzere casset'e PDF biçimli vektör görüntüsü eklememizi sağlayan Görüntü Kümeleri'ne eklenmiştir. Bu yöntemi kullanarak, @1x çözümlemesi için (vektör PDF dosyası olarak biçimlendirilmiş) tek bir vektör dosyası sağlarsanız, dosyanın @2x ve @3x sürümleri derleme zamanında oluşturulur ve uygulamanın paketine dahil edilir.

kümesi düzenleyici

Örneğin, MonkeyIcon.pdf 150 piksel x 150 piksel çözünürlüğüne sahip bir Varlık Kataloğu vektörü olarak bir dosya eklersanız, derlenmiş son uygulama paketine aşağıdaki bit eşlem varlıkları dahil edilir:

1. MonkeyIcon@1x.png - 150px x 150px çözünürlük.
2. MonkeyIcon@2x.png - 300px x 300px çözünürlük.
3. MonkeyIcon@3x.png - 450px x 450px çözünürlük.

Varlık Kataloglarında PDF vektör görüntüleri kullanırken aşağıdakiler göz önünde bulundurulmalıdır:

• PDF derleme zamanında bir bit eşlem ile taramak ve son uygulamada gönderilen bit eşlemler için taramak için bu tam vektör desteği değildir.
• Görüntünün boyutunu Varlık Kataloğu'nda ayar bulunduktan sonra ayaramazsınız. Görüntüyü yeniden boyutlandırmaya çalışırken (kodda veya Otomatik Düzen ve Boyut Sınıfları kullanarak) görüntü diğer bit eşlemler gibi çarpıtılır.

Xcode'un çalışma Interface Builder Görüntü Kümesi kullanırken, Öznitelik Denetçisi'nin açılan listesinden kümenin adını seçmeniz gerekir:

çalışma Interface Builder

Yeni varlık koleksiyonları ekleme

Varlık Kataloglarında görüntülerle çalışırken, tüm görüntülerinizi Assets.xcassets koleksiyonuna eklemek yerine yeni bir koleksiyon oluşturmak istediğiniz zamanlar olabilir. Örneğin, isteğe bağlı kaynaklar tasarlarken.

Projenize yeni bir Varlık Kataloğu eklemek için:

1. Yeni Dosya Ekle... seçeneğini Çözüm Bölmesi projeyesağ tıklayın

2. Mac VarlıkKataloğu'useçin, koleksiyon için bir Ad girin ve Yeni düğmesine tıklayın:

   

Buradan koleksiyonla, projeye otomatik olarak dahil edilen varsayılan Assets.xcassets koleksiyonuyla aynı şekilde çalışabilirsiniz.

Kaynaklara görüntü ekleme

Xamarin.Mac uygulamanıza görüntü dosyası kullanamadan önce (C# kodunda veya Interface Builder'dan) projenin Resources klasörüne Paket Kaynağı olarak dahil edilecektir. Projeye dosya eklemek için şunları yapın:

1. Projenizin Kaynak klasörüne sağ tıklayın ve Çözüm Bölmesi Ekle... öğesiniseçin:

   

2. Dosya Ekle iletişim kutusunda projeye eklemek istediğiniz görüntü dosyalarını seçin, Derlemeyi geçersiz kıl eylemi için öğesini seçin ve Aç düğmesine tıklayın:

   

3. Dosyalar kaynaklar klasöründe yoksa, dosyaları Kopyalamak, Taşımak veya Bağlamak istiyormusunuz? sorabilirsiniz. İhtiyaçlarınızı en uygun olanı seçin; bu genellikle Copy olur:

   

4. Yeni dosyalar projeye dahil edilir ve kullanım için okunur:

   

5. Gerekli tüm görüntü dosyaları için işlemi tekrarlayın.

Xamarin.Mac uygulamanıza herhangi bir png, jpg veya pdf dosyasını kaynak görüntü olarak kullanabilirsiniz. Bir sonraki bölümde, Images ve Icons'larımızın Yüksek Çözünürlüklü sürümlerinin, Temel Mac'leri desteklemek için ekleniyor olması gerekir.

Tüm uygulama grafik kaynaklarının yüksek çözünürlüklü sürümlerini sağlama

Xamarin.Mac uygulamasına (simgeler, özel denetimler, özel imleçler, özel resimler vb.) ekley istediğiniz grafik varlığı , standart çözüm sürümlerine ek olarak yüksek çözünürlüklü sürümlere sahip olması gerekir. Bu gereklidir; böylece, uygulamanız, bir Computer Display ile donatılmış Mac bilgisayarda çalıştırıldıklarda en iyi şekilde gösterilir.

@2x adlandırma kuralını benimseme

Bir görüntünün standart ve yüksek çözünürlüklü sürümlerini oluşturduklarında, Xamarin.Mac projenize dahil etmek üzere görüntü çifti için bu adlandırma kuralını izleyin:

• Standart ÇözümlemeImageName.filename-extension (Örnek: tags.png)
• Çözünürlüklü -extension (Örnek: tags@2x.png )

Bir projeye eklenmiştir, bunlar aşağıdaki gibi görünür:

Bir görüntü Interface Builder bir kullanıcı arabirimi öğesine atandığında, dosyayı GörüntüAdı' nda seçmeniz yeterlidir.dosya adı uzantısı biçimi (örnek: tags.png). C# kodunda bir görüntü kullanmak için de, dosyayı GörüntüAdı' nda seçersiniz.dosya adı uzantısı biçimi.

Xamarin. Mac uygulaması, bir Mac üzerinde çalıştırıldığında, ImageName.dosya adı uzantısı biçim resmi standart çözünürlük ekranlarda kullanılacak, -extension resmi Retina Görüntüleme temelleri Mac 'te otomatik olarak alınacaktır.

Interface Builder görüntüleri kullanma

Herhangi bir görüntü kaynağı, Xamarin. Mac projenizde Resources klasörüne eklemiş olduğunuz ve derleme eyleminin Paketleresource olarak ayarlanması, Interface Builder ' de otomatik olarak görünür ve bir kullanıcı arabirimi öğesinin bir parçası olarak seçilebilir (görüntüleri işlediğinde).

Arabirim Oluşturucu 'da bir görüntü kullanmak için aşağıdakileri yapın:

1. Kaynak klasörüne bir Yapı eylemi ile bir görüntü ekleyin :

   

2. Interface Builder içinde düzenlenmek üzere açmak için ana. görsel taslak dosyasına çift tıklayın:

   Ana görsel ana

3. Resim alan bir kullanıcı arabirimi öğesini tasarım yüzeyine sürükleyin (örneğin, bir görüntü araç çubuğu öğesi):

   Araç bir Düzenle

4. Görüntü adı açılan menüsünde kaynaklar klasörüne eklediğiniz görüntüyü seçin:

   Bir araç çubuğu öğesi bir

5. Seçilen görüntü tasarım yüzeyinde görüntülenir:

   Araç çubuğu düzenleyicisinde görüntülenmekte araç çubuğu gösteriliyor

6. değişikliklerinizi kaydedin ve xcode ile eşitlemek için Mac için Visual Studio geri dönün.

Yukarıdaki adımlar, resim özelliğinin öznitelik denetçisindeayarlanmalarına izin veren HERHANGI bir UI öğesi için çalışır. Ayrıca, görüntü dosyanızın @2x bir sürümünü eklediyseniz, otomatik olarak retina görüntü tabanlı Mac 'ler üzerinde kullanılacaktır.

C# kodunda görüntüleri kullanma

Xamarin. Mac uygulamanızda C# kodu kullanılarak belleğe bir görüntü yüklenirken, görüntü bir nesne içinde depolanır NSImage . Görüntü dosyası Xamarin. Mac uygulama paketi 'ne dahilse (kaynaklara dahildir), görüntüyü yüklemek için aşağıdaki kodu kullanın:

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

Yukarıdaki kod, ImageNamed("...")NSImage belirtilen görüntüyü ImageNamed("...") klasöründen belleğe yüklemek için sınıfının statik yöntemini kullanır, görüntü bulunamazsa null döndürülür. Interface Builder atanan görüntüler gibi, görüntü dosyanızın @2x bir sürümünü eklediyseniz, otomatik olarak retina görüntü tabanlı Mac 'ler üzerinde kullanılacaktır.

Görüntüleri uygulamanın paketinin dışında (Mac dosya sisteminden) yüklemek için aşağıdaki kodu kullanın:

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

Şablon görüntüleriyle çalışma

MacOS uygulamanızın tasarımına bağlı olarak, Kullanıcı arabiriminin içindeki bir simgeyi veya görüntüyü, renk düzenindeki bir değişikliğe (örneğin, kullanıcı tercihlerine bağlı olarak) eşlemek için özelleştirmeniz gereken zamanlar olabilir.

Bu etkiyi elde etmek için görüntü varlığınızın Işleme modunuşablon görüntüsünedeğiştirin:

Şablon görüntüsünü ayarlama şablon ayarlama

Xcode Interface Builder, görüntü varlığını bir UI denetimine atayın:

Xcode 'da görüntü seçmek Interface Builder Xcode 'un bir görüntüsünü

Ya da isteğe bağlı olarak koddaki görüntü kaynağını ayarla:

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

Aşağıdaki ortak işlevi görünüm denetleyicinize ekleyin:

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;
    });

Son olarak, bir şablon görüntüsünü renk tonuna etmek için bu işlevi resme göre Renklendir:

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

Tablo görünümleriyle görüntüleri kullanma

Bir görüntüyü içindeki hücrenin bir parçası olarak eklemek için NSTableView , verilerin Tablo görünümünün NSTableViewDelegate'sGetViewForItem yöntemi tarafından, normal yerine bir kullanmak için nasıl döndürüleceğini değiştirmeniz gerekir NSTableCellViewNSTextField . Örnek:

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;
}

Burada birkaç satırlık ilgi vardır. İlk olarak, bir görüntü eklemek istediğimiz sütunlarda, NSImageView gerekli boyut ve konumun yeni bir bölümünü oluşturuyoruz, yeni bir görüntü mi oluşturuyoruz, yoksa NSTextField bir görüntü kullanıp kullandığımızda, varsayılan konumunu da yerleştirtik.

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));
}

İkinci olarak, yeni görüntü görünümü ve metin alanını üst öğeye eklemesi gerekir NSTableCellView :

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

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

Son olarak, metin alanına tablo görünümü hücresiyle daraltıp büyüyebileceği bir söyleyebilmemiz gerekir:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Örnek çıktı:

Uygulamada görüntü görüntüleme örneği bir

Tablo görünümleriyle çalışma hakkında daha fazla bilgi için lütfen tablo görünümlerimize bakın.

Ana hat görünümleriyle görüntüleri kullanma

Bir görüntüyü içindeki hücrenin bir parçası olarak eklemek için NSOutlineView , verilerin ana hat görünümünün NSTableViewDelegate'sGetView yöntemi tarafından, normal yerine kullanmak üzere nasıl döndürüleceğini değiştirmeniz gerekir NSTableCellViewNSTextField . Örnek:

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;
}

Burada birkaç satırlık ilgi vardır. İlk olarak, bir görüntü eklemek istediğimiz sütunlarda, NSImageView gerekli boyut ve konumun yeni bir bölümünü oluşturuyoruz, yeni bir görüntü mi oluşturuyoruz, yoksa NSTextField bir görüntü kullanıp kullandığımızda, varsayılan konumunu da yerleştirtik.

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));
}

İkinci olarak, yeni görüntü görünümü ve metin alanını üst öğeye eklemesi gerekir NSTableCellView :

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

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

Son olarak, metin alanına tablo görünümü hücresiyle daraltıp büyüyebileceği bir söyleyebilmemiz gerekir:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Örnek çıktı:

Ana olarak, bir örneği görüntülenir

Ana hat görünümleriyle çalışma hakkında daha fazla bilgi için lütfen bkz. ana hat görünümlerimize bakın.

Özet

Bu makalede, Xamarin. Mac uygulamasındaki görüntülerle ve simgelerle çalışma hakkında ayrıntılı bir bakış ele alınmıştır. Görüntülerin farklı türlerini ve kullanımlarını, Xcode 'un Interface Builder resim ve simgelerin nasıl kullanılacağını ve C# kodundaki görüntülerle ve simgelerle çalışmayı gördük.

İlişkili Bağlantılar

• MacImages (örnek)
• Hello, Mac
• Tablo görünümleri
• Ana hat görünümleri
• macOS X ınsan arabirimi yönergeleri
• OS X için yüksek çözünürlüklü