Obrázky v Xamarin.Macu

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 C# i v jazyce Xcode Interface Builder.

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, ve které vývojář pracuje a Objective-CObjective-C

Existuje několik způsobů, jak se v aplikaci pro macOS (dříve označované jako Mac OS X) používají prostředky obrázků. Od pouhého zobrazení obrázku jako součásti uživatelského rozhraní aplikace až po jeho přiřazení k ovládacímu prvku uživatelského rozhraní, jako je panel nástrojů nebo položka zdrojového seznamu, až po poskytnutí ikon, xamarin.Mac usnadňuje přidání skvělých děl do aplikací macOS následujícími způsoby:

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

Kromě toho macOS poskytuje sadu předdefinovaných imagí, které je možné používat v celé aplikaci.

Příklad spuštění aplikace Příklad

V tomto článku se budeme seznamovat se základy práce s obrázky a ikonami v aplikaci Xamarin.Mac. Důrazně doporučujeme, abyste si nejprve prošli článek Hello, Mac, konkrétně oddíly Úvod do Xcode a Interface Builder a Výstupy a Akce, protože se zabývá klíčovými koncepty a technikami, které budeme v tomto článku používat.

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 může vývojář zahrnout soubor obrázku do zdroje projektu:

  • Strom hlavního projektu [zastaralý] – Obrázky je možné přidat přímo do stromu projektů. Při volání obrázků uložených v hlavním stromu projektu z kódu není určeno žádné umístění složky. Příklad: NSImage image = NSImage.ImageNamed("tags.png");.
  • Složka Resources (Prostředky) [zastaralá] – Speciální složka Resources (Prostředky) je pro všechny soubory, které se stanou součástí sady prostředků aplikace, jako je ikona, spouštěcí obrazovka nebo obecné obrázky (nebo jakýkoli jiný obrázek nebo soubor, který chce vývojář přidat). Při volání obrázků uložených ve složce Resources z kódu, stejně jako obrázky uložené v hlavním stromu projektu, není zadáno žádné umístění složky. Příklad: NSImage.ImageNamed("tags.png").
  • Vlastní složka nebo podsložka [zastaralé] – Vývojář může do zdrojového stromu projektů přidat vlastní složku a uložit tam obrázky. Umístění, kam se soubor přidá, může být vnořené v podsložce, aby bylo možné projekt dále uspořádat. Pokud například vývojář přidal složku do projektu a do této složky podsložku , pak do této složky uloží imageJack.png, načte se obrázek za CardHeartsCardHeartsNSImage.ImageNamed("Card/Hearts/Jack.png") běhu.
  • Asset Catalog Image Sets [preferované] – Do OS X El Capitan byly přidány image katalogů assetů obsahující 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 spoléhají na název souboru prostředků obrázku (@1x, @2x).

Přidání obrázků do sady obrázků katalogu assetů

Jak je uvedeno výše, imageové sady katalogů assetů 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, aby se spoléhaly na název souboru prostředků obrázku (viz obrázek nezávislý na rozlišení a názvosloví obrázků výše), sady obrázků používají Editor prostředků k určení, který obrázek patří ke kterému zařízení nebo rozlišení.

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

    Výběr assets.xcassets

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

    Přidání nové sady obrázků

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

    Výběr nové sady obrázků

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

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

    Úprava názvu sady obrázků Úpravanázvu sady

Speciální třída Vector přidaná do sad obrázků, která nám umožňuje zahrnout do cassetu vektorový obrázek ve formátu PDF místo zahrnutí 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 verze souboru @2x a @3x se vygenerují v době kompilace a zahrnou se do sady prostředků aplikace.

Rozhraní editoru sady obrázků Rozhraníeditoru sady

Pokud například jako vektor katalogu assetů zahrníte soubor s rozlišením MonkeyIcon.pdf 150 pixelů × 150 pixelů, budou do konečné sady aplikací při kompilaci zahrnuty následující rastrové obrázky:

  1. MonkeyIcon@1x.png – rozlišení 150 pixelů × 150 pixelů.
  2. MonkeyIcon@2x.png – rozlišení 300 pixelů × 300 pixelů.
  3. MonkeyIcon@3x.png – rozlišení 450 pixelů × 450 pixelů.

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

  • Toto není plná podpora vektorů, protože pdf bude rastrový obrázek v době kompilace a rastrové obrázky dodané v konečné aplikaci.
  • Po nastavení obrázku v katalogu assetů už velikost obrázku není možné upravit. Pokud se pokusíte změnit velikost obrázku (buď v kódu, nebo pomocí automatického rozložení a tříd velikostí), obrázek bude zkreslený stejně jako jakýkoli jiný rastrový obrázek.

Při použití sady obrázků v nástroji Xcode Interface Builder můžete jednoduše vybrat název sady z rozevíracího seznamu v nástroji Attribute Inspector:

Výběr sady obrázků v aplikaci Xcode Interface Builder obrázků v souboru Interface Builder

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

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

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

  1. Klikněte pravým tlačítkem na projekt v okně Oblast řešenívyberte Přidatnový soubor...

  2. Vyberte KatalogprostředkůMac, zadejte Název kolekce a klikněte na tlačítko Nový:

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

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

Přidání imagí k prostředkům

Důležité

Tato metoda práce s obrázky v aplikaci pro macOS je společností Apple zastaralá. Ke správci imagí aplikace byste měli použít sady imagí katalogu assetů.

Než budete moci použít soubor obrázku v aplikaci Xamarin.Mac (buď v kódu C#, nebo z Interface Builder), je potřeba ho zahrnout do složky Resources projektu jako prostředek sady prostředků. Pokud chcete přidat soubor do projektu, proveďte následující:

  1. Klikněte pravým tlačítkem na složku Resources (Prostředky) ve vašem projektu v Oblast řešení a vyberte AddAdd Files... (Přidat soubory...):

    Přidání souboru

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

    Výběr souborů, které chcete přidat:

  3. Pokud soubory ve složce Prostředky ještě nejsou, budete vyzváni, jestli chcete soubory zkopírovat, přesunout nebo propojit. Vyberte, který soubor vyhovuje vašim potřebám, obvykle bude Kopírovat:

    Výběr akce přidání

  4. Nové soubory se zahrnou do projektu a načtou se pro použití:

    Nové soubory obrázků přidané do Oblast řešeníNové soubory obrázků přidané do

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

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

Důležité

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

Poskytovat verze všech grafických prostředků aplikace ve vysokém rozlišení

Jakýkoli grafický asset, který přidáte do aplikace Xamarin.Mac (ikony, vlastní ovládací prvky, vlastní kurzory, vlastní kresby atd.) musí mít kromě standardních verzí i verze s vysokým rozlišením. To se vyžaduje, aby vaše aplikace vypadala co nejlépe při spuštění na počítači Mac se systémem Mac vybaveným displejem Retina.

Přijetí konvence @2x názvů

Důležité

Tato metoda práce s obrázky v aplikaci pro macOS je společností Apple zastaralá. Ke správci imagí aplikace byste měli použít sady imagí katalogu assetů.

Když vytváříte standardní verze image a image ve vysokém rozlišení, při jejich zahrnutí do projektu Xamarin.Mac postupujte podle těchto konvencí pro vytváření názvů pro pár obrázků:

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

Při přidání do projektu by se měly zobrazit takto:

Soubory obrázků v oblast řešení

Když je obrázek přiřazen k prvku uživatelského rozhraní v Interface Builder stačí soubor vybrat v ImageName. formát přípony filename (příklad: tags.png). Totéž jako při použití obrázku v kódu jazyka C# můžete soubor vybrat v ImageName. formát přípony názvu souboru .

Když je aplikace Xamarin. Mac spuštěná na Macu, ImageName. Obrázek formátu Přípona názvu souboru bude použit při zobrazení se standardním rozlišením, bitová kopie -rozšíření bude automaticky vybrána na Retina zobrazení základny Mac.

Používání imagí v Interface Builder

Jakýkoli prostředek obrázku, který jste přidali do složky Resources v projektu Xamarin. Mac a nastavili akci sestavení na BundleResource , se automaticky zobrazí v Interface Builder a dá se vybrat jako součást prvku uživatelského rozhraní (pokud zpracovává image).

Chcete-li použít obrázek v nástroji Tvůrce rozhraní, postupujte následovně:

  1. Přidejte obrázek do složky Resources (prostředky ) s akcí sestavení pro :

    Prostředek obrázku v oblast řešení

  2. Dvojím kliknutím na soubor Main. scénáře ho otevřete pro úpravy v Interface Builder:

    Úprava hlavního scénáře

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

    Úprava položky na panelu nástrojů

  4. Vyberte obrázek, který jste přidali do složky Resources v rozevíracím seznamu název obrázku :

    Výběr obrázku pro položku panelu nástrojů

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

    Obrázek zobrazený v editoru panelunástrojů

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

Výše uvedené kroky fungují pro všechny prvky uživatelského rozhraní, které umožňují nastavit vlastnost obrázku v inspektoru atributů. Pokud jste zahrnuli @2x verzi souboru bitové kopie, bude se automaticky používat na počítačích Mac pro zobrazení založené na Retina.

Důležité

pokud obrázek není k dispozici v rozevíracím seznamu název obrázku , zavřete projekt. ve scénáři v Xcode a znovu jej otevřete z Visual Studio pro Mac. Pokud bitová kopie stále není k dispozici, ujistěte se, že její Akce sestavení je 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 bude obrázek uložen v NSImage objektu. Pokud byl soubor obrázku součástí sady Xamarin. Mac Application (zahrnuté v prostředcích), použijte následující kód k načtení obrázku:

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

Výše uvedený kód používá statickou ImageNamed("...") metodu NSImage třídy pro načtení daného obrázku do paměti ze složky ImageNamed("...") , pokud se image nenajde, null vrátí se. Pokud jste zahrnuli @2x verzi souboru bitové kopie, stejně jako image přiřazené v Interface Builder, automaticky se použije na Retina displej na počítačích Mac.

Pokud chcete načíst obrázky mimo sadu prostředků aplikace (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 šablony

Na základě návrhu aplikace macOS může nastat situace, kdy potřebujete přizpůsobit ikonu nebo obrázek v uživatelském rozhraní tak, aby odpovídaly změně barevného schématu (například na základě předvoleb uživatele).

Pro dosažení tohoto efektu přepněte režim vykreslování vašeho prostředku obrázku na image šablony:

Nastavení obrázku šablony

Z Interface Builder Xcode přiřaďte prostředek image k ovládacímu prvku uživatelského rozhraní:

Výběr obrázku v Xcode Interface Builder

Případně můžete také nastavit zdroj obrázku v kódu:

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

Do kontroleru zobrazení přidejte 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 s nástupem tmavého režimu v macOS Mojave je důležité se vyhnout LockFocus rozhraní API při reating objektů vykreslených pomocí NSImage . Tyto image se stanou statický a nebudou se automaticky aktualizovat, aby se daly zobrazovat změny hustoty zobrazení nebo zobrazení.

Použitím mechanismu založeného na obslužné rutině výše se provede opakované vykreslování pro dynamické podmínky, když NSImage je hostovaný, například v NSImageView .

Nakonec pro odstínování obrázku šablony volejte tuto funkci proti imagi na zabarvovat:

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

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

Chcete-li vložit obrázek jako součást buňky v rámci NSTableView , budete muset změnit způsob, jakým metoda zobrazení tabulky vrátí data, NSTableViewDelegate'sGetViewForItem aby používala NSTableCellView místo typického NSTextField . Napří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 pár řádků zájmu. Nejprve pro sloupce, které chceme zahrnout obrázek, vytvoříme novou NSImageView z požadované velikosti a umístění, vytvoříme také nové umístění NSTextField 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 prvku přidat nové zobrazení obrázku a textové pole NSTableCellView :

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

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

Nakonec musíme sdělit textové pole, které může zmenšit a zvětšit pomocí buňky zobrazení tabulky:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Příklad výstupu:

Příklad zobrazení obrázku v aplikaci

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

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

Chcete-li vložit obrázek jako součást buňky v rámci NSOutlineView , budete muset změnit způsob, jakým metoda zobrazení osnovy vrací data NSTableViewDelegate'sGetView pro použití NSTableCellView namísto typického NSTextField . Napří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 pár řádků zájmu. Nejprve pro sloupce, které chceme zahrnout obrázek, vytvoříme novou NSImageView z požadované velikosti a umístění, vytvoříme také nové umístění NSTextField 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 prvku přidat nové zobrazení obrázku a textové pole NSTableCellView :

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

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

Nakonec musíme sdělit textové pole, které může zmenšit a zvětšit pomocí buňky zobrazení tabulky:

view.TextField.AutoresizingMask = NSViewResizingMask.WidthSizable;

Příklad výstupu:

Příklad obrázku, který se zobrazuje v zobrazení osnovy

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

Souhrn

V tomto článku se podrobně podíváme na práci s obrázky a ikonami v aplikaci Xamarin. Mac. Zjistili jsme různé typy a použití imagí, jak používat obrázky a ikony v Interface Builder Xcode a jak pracovat s obrázky a ikonami v kódu C#.