Obrázky v Xamarin.Mac

Tento článek popisuje práci s obrázky a ikonami v aplikaci Xamarin.Mac. Popisuje vytváření a údržbu imagí potřebných k vytvoření ikony aplikace a použití obrázků v kódu jazyka C# i v Tvůrci rozhraní Xcode.

Přehled

Při práci s C# a .NET v aplikaci Xamarin.Mac máte přístup ke stejným nástrojům image a ikon, které vývojář pracuje a Objective-CXcode dělá.

Prostředky obrázků se používají v aplikaci macOS (dříve označované jako Mac OS X). Když jednoduše zobrazíte obrázek jako součást uživatelského rozhraní vaší aplikace, přiřadíte ho ovládacímu prvku uživatelského rozhraní, jako je panel nástrojů nebo položka zdrojového seznamu, abyste mohli poskytovat ikony, Xamarin.Mac usnadňuje přidávání skvělých uměleckých děl do aplikací macOS následujícími způsoby:

  • Prvky uživatelského rozhraní – Obrázky se dají zobrazit jako pozadí nebo jako součást aplikace v zobrazení obrázku (NSImageView).
  • Tlačítko – Obrázky se dají zobrazit v tlačítkách (NSButton).
  • Buňka obrázku – jako součást ovládacího prvku založeného na tabulce (NSTableView nebo NSOutlineView) lze obrázky použít v buňce obrázku (NSImageCell).
  • Položka panelu nástrojů – obrázky lze přidat na panel nástrojů (NSToolbar) jako položku panelu nástrojů obrázku (NSToolbarItem).
  • Ikona zdrojového seznamu – jako součást zdrojového seznamu (speciálně formátovaný NSOutlineView).
  • Ikona aplikace – řada obrázků se dá seskupit do .icns sady a použít ji jako ikonu vaší aplikace. Další informace najdete v naší dokumentaci k ikoně aplikace .

MacOS navíc poskytuje sadu předdefinovaných imagí, které je možné použít v celé aplikaci.

An example run of the app

V tomto článku se podíváme na základy práce s obrázky a ikonami v aplikaci Xamarin.Mac. Důrazně doporučujeme nejprve projít si článek Hello, Mac , konkrétně úvod do Xcode a Interface Builder aOutlets and Actions oddíly, protože se zabývá klíčovými koncepty a technikami, které budeme používat v tomto článku.

Přidání obrázků do projektu Xamarin.Mac

Při přidávání obrázku pro použití v aplikaci Xamarin.Mac existuje několik míst a způsobů, jak vývojář může do zdroje projektu zahrnout soubor obrázku:

  • Hlavní strom projektu [zastaralé] – Obrázky je možné přidat přímo do stromu projektů. Při volání obrázků uložených ve stromu hlavního projektu z kódu není zadáno žádné umístění složky. Příklad: NSImage image = NSImage.ImageNamed("tags.png");.
  • Složka Prostředků [zastaralé] – Speciální složka Resources je určená pro jakýkoli soubor, který se stane součástí sady aplikací, jako je ikona, spouštěcí obrazovka nebo obecné obrázky (nebo jakýkoli jiný obrázek nebo soubor, který vývojář chce přidat). Při volání obrázků uložených ve složce Zdroje z kódu se stejně jako obrázky uložené ve stromu hlavního projektu nezadáte žádné umístění složky. Příklad: NSImage.ImageNamed("tags.png").
  • Vlastní složka nebo podsložka [zastaralé] – Vývojář může přidat vlastní složku do zdrojového stromu projektů a uložit obrázky tam. Umístění, kam je soubor přidán, je možné vnořit do podsložky, aby bylo možné projekt dále uspořádat. Pokud například vývojář přidal Card do projektu složku a podsložku Hearts této složky, uložte do této složky obrázek Jack.png do Hearts složky, NSImage.ImageNamed("Card/Hearts/Jack.png") načtěte image za běhu.
  • Sady imagí katalogu assetů [upřednostňované] – Přidané do sady imagí OS X El Capitan obsahují všechny verze nebo reprezentace image, které jsou nezbytné k podpoře různých zařízení a faktorů škálování pro vaši aplikaci. Místo toho, abyste se spoléhat na název souboru prostředků image (@1x, @2x).

Přidání obrázků do sady imagí katalogu prostředků

Jak je uvedeno výše, sady imagí katalogu prostředků obsahují všechny verze nebo reprezentace image, které jsou nezbytné pro podporu různých zařízení a faktorů škálování pro vaši aplikaci. Místo toho, abyste se museli spoléhat na název souboru prostředků obrázku (viz výše Uvedená klasifikace nezávislých obrázků a obrázků), sady obrázků používají Editor prostředků k určení, do kterého zařízení a/nebo rozlišení patří.

  1. Na panelu řešení poklikejte na soubor Assets.xcassets a otevřete ho pro úpravy:

    Selecting the Assets.xcassets

  2. Klikněte pravým tlačítkem na seznam prostředků a vyberte Nová sada obrázků:

    Adding a new image set

  3. Vyberte novou sadu obrázků a editor se zobrazí:

    Selecting the new image set

  4. Odsud můžeme přetáhnout obrázky pro každou z různých zařízení a požadovaných rozlišení.

  5. Poklikejte na název nové sady obrázků v seznamu prostředků a upravte ji:

    Editing the image set name

Speciální vektorová třída, jak bylo přidáno do sad obrázků , která nám umožňuje zahrnout pdf formátovaný vektorový obrázek do casset místo toho, včetně jednotlivých rastrových souborů v různých rozlišeních. Pomocí této metody zadáte jeden vektorový soubor pro rozlišení @1x (formátovaný jako vektorový soubor PDF) a @2x a @3x verze souboru budou generovány v době kompilace a zahrnuty do sady aplikace.

The image set editor interface

Pokud například zahrnete MonkeyIcon.pdf soubor jako vektor katalogu prostředků s rozlišením 150px x 150px, při kompilaci se do konečné sady aplikací zahrne následující rastrové prostředky:

  1. MonkeyIcon@1x.png - rozlišení 150px x 150px.
  2. MonkeyIcon@2x.png - rozlišení 300px x 300px.
  3. MonkeyIcon@3x.png - rozlišení 450px x 450px.

Při používání vektorových obrázků PDF v katalogu assetů byste měli vzít v úvahu následující skutečnosti:

  • To není úplná podpora vektoru, protože PDF bude rastrový rastrový obrázek v době kompilace a rastrové obrázky odeslané v konečné aplikaci.
  • Po nastavení v katalogu prostředků nelze upravit velikost obrázku. Pokud se pokusíte změnit velikost obrázku (buď v kódu, nebo pomocí automatických tříd rozložení a velikostí), bude obrázek zkreslený stejně jako jakýkoli jiný rastrový obrázek.

Při použití sady obrázků v Tvůrci rozhraní Xcode můžete jednoduše vybrat název sady z rozevíracího seznamu v inspektoru atributů:

Selecting an image set in Xcode's Interface Builder

Přidání nových kolekcí prostředků

Při práci s obrázky v katalogu assetů může být čas, kdy chcete vytvořit novou kolekci místo přidání všech obrázků do kolekce Assets.xcassets . Například při návrhu prostředků na vyžádání.

Přidání nového katalogu assetů do projektu:

  1. Klikněte pravým tlačítkem myši na projekt v oblasti řešení a vyberte AddNew>File...

  2. Vyberte Katalog MacAsset>, zadejte název kolekce a klikněte na tlačítko Nový:

    Adding a new Asset Catalog

Odsud můžete s kolekcí pracovat stejným způsobem jako výchozí kolekce Assets.xcassets automaticky zahrnuté v projektu.

Přidání obrázků do prostředků

Důležité

Tato metoda práce s obrázky v aplikaci macOS byla společností Apple zastaralá. Sady imagí katalogu assetů byste měli použít k nadřízeným imagím vaší aplikace.

Než budete moct v aplikaci Xamarin.Mac (v kódu jazyka C# nebo v Tvůrci rozhraní) použít soubor Image, musí být součástí složky Zdroje projektu jako zdroj sady prostředků. Pokud chcete přidat soubor do projektu, postupujte takto:

  1. Klikněte pravým tlačítkem myši na složku Zdroje v projektu na panelu řešení a vyberte AddAdd>Files...:

    Adding a file

  2. V dialogovém okně Přidat soubory vyberte soubory obrázků, které chcete přidat do projektu, vyberte BundleResourceakci Přepsat sestavení a klikněte na tlačítko Otevřít :

    Selecting the files to add

  3. Pokud soubory ještě nejsou ve složce Zdroje , zobrazí se dotaz, jestli chcete soubory zkopírovat, přesunout nebo propojit . Vyberte, která z vašich potřeb vyhovuje, obvykle to bude Kopírovat:

    Selecting the add action

  4. Nové soubory budou zahrnuty v projektu a budou se číst pro použití:

    The new image files added to the Solution Pad

  5. Opakujte proces pro všechny požadované soubory obrázků.

V aplikaci Xamarin.Mac můžete použít libovolný soubor png, jpg nebo pdf jako zdrojový obrázek. V další části se podíváme na přidání verzí obrázků a ikon s vysokým rozlišením pro podporu sítnicových počítačů Mac.

Důležité

Pokud přidáváte obrázky do složky Prostředky , můžete ponechat akci Přepsat sestavení nastavenou na Výchozí. Výchozí akce sestavení pro tuto složku je BundleResource.

Poskytuje vysoce překladové verze všech grafických prostředků aplikací.

Jakýkoli grafický prostředek, který přidáte do aplikace Xamarin.Mac (ikony, vlastní ovládací prvky, vlastní kurzory, vlastní kresby atd.), musí mít kromě verzí standardního rozlišení i verze s vysokým rozlišením. To je nutné, aby vaše aplikace vypadala nejlépe při spuštění na počítači Mac vybaveným displejem Sítnice.

Přijetí zásad vytváření názvů @2x

Důležité

Tato metoda práce s obrázky v aplikaci macOS byla společností Apple zastaralá. Sady imagí katalogu assetů byste měli použít k nadřízeným imagím vaší aplikace.

Při vytváření standardních a vysoce překladových verzí obrázku postupujte podle této konvence pojmenování pro dvojici obrázků, když je zahrnete do projektu Xamarin.Mac:

  • Standardní rozlišení - ImageName.filename-extension (Příklad: tags.png)
  • Vysoké rozlišení - ImageName@2x.filename-extension (Příklad: tags@2x.png)

Při přidání do projektu se zobrazí takto:

The image files in the Solution Pad

Když je obrázek přiřazen k prvku uživatelského rozhraní v Tvůrci rozhraní, jednoduše vyberete soubor v ImageName. formát přípony souboru (příklad: tags.png). Totéž pro použití obrázku v kódu jazyka C# vyberete soubor v imageName. formát přípony souboru.

Když aplikaci Xamarin.Mac spustíte na Macu, imageName. Obrázek formátu přípony souboru se použije na standardních displejích rozlišení, ImageName@2x.filenameobrázek -extension se automaticky vybere na sítnicových základech displeje Mac.

Používání imagí v Tvůrci rozhraní

Jakýkoli zdroj obrázku, který jste přidali do složky Zdroje v projektu Xamarin.Mac a nastavili akci sestavení na BundleResource , se automaticky zobrazí v Tvůrci rozhraní a můžete ho vybrat jako součást elementu uživatelského rozhraní (pokud zpracovává obrázky).

Pokud chcete použít image v tvůrci rozhraní, postupujte takto:

  1. Přidejte obrázek do složky Prostředky pomocí akceBundleResourcesestavení:

    An image resource in the Solution Pad

  2. Poklikejte na soubor Main.storyboard a otevřete ho pro úpravy v Tvůrci rozhraní:

    Editing the main storyboard

  3. Přetáhněte prvek uživatelského rozhraní, který přebírá obrázky na návrhovou plochu (například položka panelu nástrojů obrázku):

    Editing a toolbar item

  4. V rozevíracím seznamu Název obrázku vyberte obrázek, který jste přidali do složky Zdroje:

    Selecting an image for a toolbar item

  5. Vybraný obrázek se zobrazí na návrhové ploše:

    The image being displayed in the Toolbar editor

  6. Uložte změny a vraťte se do Visual Studio pro Mac pro synchronizaci s Xcode.

Výše uvedené kroky fungují pro libovolný prvek uživatelského rozhraní, který umožňuje nastavení vlastnosti image v Inspektoru atributů. Opět platí, že pokud jste zahrnuli @2x verzi souboru obrázku, automaticky se použije na Macech se systémem sítnice Display.

Důležité

Pokud obrázek není v rozevíracím seznamu Název obrázku dostupný, zavřete projekt .storyboard v Xcode a znovu ho otevřete z Visual Studio pro Mac. Pokud image stále není dostupná, ujistěte se, že je BundleResource její akce sestavení a že image byla přidána do složky Resources.

Použití obrázků v kódu jazyka C#

Při načítání obrázku do paměti pomocí kódu jazyka C# v aplikaci Xamarin.Mac se obrázek uloží do objektu NSImage . Pokud je soubor obrázku zahrnutý v sadě aplikací Xamarin.Mac (zahrnutý v prostředcích), načtěte image pomocí následujícího kódu:

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

Výše uvedený kód používá statickou ImageNamed("...") metodu NSImage třídy k načtení daného obrázku do paměti ze složky Resources , pokud nelze najít image, null bude vrácena. Podobně jako obrázky přiřazené v Tvůrci rozhraní, pokud jste zahrnuli @2x verzi souboru obrázku, bude se automaticky používat na Macech se systémem sítnice Display.

Pokud chcete načíst obrázky mimo sadu aplikací (ze systému souborů Mac), použijte následující kód:

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

Práce s obrázky šablon

V závislosti na návrhu aplikace pro macOS můžou nastat časy, kdy potřebujete přizpůsobit ikonu nebo obrázek uvnitř uživatelského rozhraní tak, aby odpovídaly změně barevného schématu (například na základě uživatelských předvoleb).

Pokud chcete dosáhnout tohoto efektu, přepněte režim vykreslování prostředku obrázku na obrázek šablony:

Setting a template image

V Tvůrci rozhraní Xcode přiřaďte asset obrázku k ovládacímu prvku uživatelského rozhraní:

Selecting an image in Xcode's Interface Builder

Nebo volitelně nastavte zdroj obrázku v kódu:

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

Přidejte do kontroleru zobrazení následující veřejnou funkci:

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

Důležité

Zejména při nástupu tmavého režimu v macOS Mojave je důležité se LockFocus vyhnout rozhraní API při reazování vlastních vykreslovaných NSImage objektů. Tyto obrázky se stanou statické a nebudou automaticky aktualizovány tak, aby se zohlednily změny vzhledu nebo hustoty zobrazení.

Když použijete mechanismus založený na obslužné rutině výše, opětovné vykreslování dynamických podmínek proběhne automaticky, když NSImage je hostováno, například v .NSImageView

Nakonec, chcete-li vybarvit obrázek šablony, zavolejte tuto funkci proti obrázku, která se má obarvit:

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

Použití obrázků se zobrazeními tabulek

Pokud chcete do buňky zahrnout obrázek jako součást buňkyNSTableView, musíte změnit způsob vrácení dat metodou zobrazeníGetViewForItemNSTableViewDelegate'stabulky tak, aby se místo typického objektu používala NSTableCellViewNSTextField. Příklad:

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

Tady je několik zajímavých řádků. Nejprve pro sloupce, které chceme zahrnout obrázek, vytvoříme novou NSImageView požadovanou velikost a umístění, vytvoříme také novou NSTextField a umístíme její výchozí pozici na základě toho, jestli používáme obrázek:

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

Za druhé musíme do nadřazeného objektu NSTableCellViewzahrnout nové zobrazení obrázku a textové pole:

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

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

Nakonec musíme textovému poli říct, že se může zmenšit a zvětšit pomocí buňky zobrazení tabulky:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Příklad výstupu:

An example of displaying an image in an app

Další informace o práci se zobrazeními tabulek najdete v naší dokumentaci k zobrazením tabulek .

Použití obrázků se zobrazeními osnovy

Chcete-li zahrnout obrázek jako součást buňky do NSOutlineViewbuňky , budete muset změnit způsob, jakým jsou data vrácena metodou ZobrazeníGetViewNSTableViewDelegate'sosnovy, aby místo NSTableCellView typické NSTextField. Příklad:

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

Tady je několik zajímavých řádků. Nejprve pro sloupce, které chceme zahrnout obrázek, vytvoříme novou NSImageView požadovanou velikost a umístění, vytvoříme také novou NSTextField a umístíme její výchozí pozici na základě toho, jestli používáme obrázek:

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

Za druhé musíme do nadřazeného objektu NSTableCellViewzahrnout nové zobrazení obrázku a textové pole:

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

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

Nakonec musíme textovému poli říct, že se může zmenšit a zvětšit pomocí buňky zobrazení tabulky:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Příklad výstupu:

An example of an image being displayed in an Outline View

Další informace o práci se zobrazeními osnovy najdete v naší dokumentaci k zobrazením osnovy .

Souhrn

Tento článek se podrobně podíval na práci s obrázky a ikonami v aplikaci Xamarin.Mac. Viděli jsme různé typy a použití obrázků, jak používat obrázky a ikony v Tvůrci rozhraní Xcode a jak pracovat s obrázky a ikonami v kódu jazyka C#.