Anzeigen eines Bilds in Xamarin.iOS

  • Artikel

In diesem Artikel wird das Einschließen eines Bildobjekts in eine Xamarin.iOS-App und das Anzeigen dieses Bilds mithilfe von C#-Code oder durch Zuweisen eines Bildobjekts zu einem Steuerelement in der iOS-Designer behandelt.

Hinzufügen und Organisieren von Bildern in einer Xamarin.iOS-App

Beim Hinzufügen eines Images zur Verwendung in einer Xamarin.iOS-App verwendet der Entwickler einen Medienobjektkatalog , um jedes iOS-Gerät und die für eine App erforderliche Auflösung zu unterstützen.

In iOS 7 hinzugefügt, enthalten Asset Catalogs Image Sets alle Versionen oder Darstellungen eines Images, die zur Unterstützung verschiedener Geräte und Skalierungsfaktoren für eine App erforderlich sind. Anstatt sich auf den Dateinamen der Bildressourcen zu verlassen, verwenden Bildsätze eine Json-Datei, um anzugeben, welches Bild zu welchem Gerät und/oder welcher Auflösung gehört. Dies ist die bevorzugte Methode zum Verwalten und Unterstützen von Images in iOS (ab iOS 9 oder höher).

Hinzufügen von Bildern zu einem Medienobjektkatalog-Imagesatz

Wie bereits erwähnt, enthalten Asset Catalogs Image Sets alle Versionen oder Darstellungen eines Images, die zur Unterstützung verschiedener Geräte und Skalierungsfaktoren für eine App erforderlich sind. Anstatt sich auf den Dateinamen der Bildressourcen zu verlassen, verwenden Bildsätze eine Json-Datei, um anzugeben, welches Bild zu welchem Gerät und/oder welcher Auflösung gehört.

Gehen Sie wie folgt vor, um einen neuen Imagesatz zu erstellen und ihr Bilder hinzuzufügen:

  1. Doppelklicken Sie im Projektmappen-Explorer auf die Assets.xcassets Datei, um sie zur Bearbeitung zu öffnen:

    Assets.xcassets im Projektmappen-Explorer

  2. Klicken Sie mit der rechten Maustaste auf die Ressourcenliste , und wählen Sie Neue Bildmenge aus:

    Hinzufügen eines neuen Imagesatzes

  3. Wählen Sie die neue Bildmenge aus, und der Editor wird angezeigt:

    Der Bildsatz-Editor

  4. Ziehen Sie hier Bilder für jedes der verschiedenen Geräte und die erforderlichen Auflösungen ein.

  5. Doppelklicken Sie in der Ressourcenliste auf den Namen des neuen Bildsatzes, um ihn zu bearbeiten: Bearbeiten des Namens des neuen Bildsatzes

Wenn Sie einen Imagesatz im iOS-Designer verwenden, wählen Sie einfach den Namen der Gruppe aus der Dropdownliste im Eigenschaften-Editor aus:

Auswählen des Namens einer Bildgruppe aus der Dropdownliste

Wenn Sie einen Imagesatz im Code verwenden, verweisen Sie anhand des Namens darauf, indem Sie die FromBundle -Methode der UIImage -Klasse aufrufen. Beispiel:

MonkeyImage.Image = UIImage.FromBundle ("PurpleMonkey");

Wichtig

Wenn die einem Imagesatz zugewiesenen Bilder nicht ordnungsgemäß angezeigt werden, stellen Sie sicher, dass der richtige Dateiname mit der FromBundle -Methode verwendet wird (image set und nicht der name des übergeordneten Medienobjektkatalogs ). Bei PNG-Bildern kann die .png Erweiterung weggelassen werden. Für andere Bildformate ist die Erweiterung erforderlich (z. B. PurpleMonkey.jpg).

Verwenden von Vektorbildern in Ressourcenkatalogen

Ab iOS 8 wurde eine spezielle Vector-Klasse zu Bildsätzen hinzugefügt, mit der Entwickler ein PDF-formatiertes Vektorbild in die Kassette einfügen können, anstatt einzelne Bitmapdateien mit den verschiedenen Auflösungen einzuschließen. Geben Sie mit dieser Methode eine einzelne Vektordatei für die @1x Auflösung an (formatiert als Vektor-PDF-Datei), und die @2x Versionen und @3x der Datei werden zur Kompilierzeit generiert und im Paket der Anwendung enthalten.

Wenn der Entwickler beispielsweise eine MonkeyIcon.pdf Datei als Vektor eines Medienobjektkatalogs mit einer Auflösung von 150px x 150px einschließt, werden die folgenden Bitmapressourcen beim Kompilieren in das endgültige App-Paket aufgenommen:

  • MonkeyIcon@1x.png - Auflösung von 150px x 150px.
  • MonkeyIcon@2x.png - Auflösung von 300px x 300px.
  • MonkeyIcon@3x.png - 450px x 450px Auflösung.

Bei der Verwendung von PDF-Vektorbildern in Ressourcenkatalogen sollte Folgendes berücksichtigt werden:

  • Dies ist keine vollständige Vektorunterstützung, da die PDF zur Kompilierzeit in eine Bitmap gerastert wird und die bitmaps in der endgültigen Anwendung ausgeliefert werden.
  • Die Größe des Bilds kann nicht angepasst werden, nachdem sie im Medienobjektkatalog festgelegt wurde. Wenn der Entwickler versucht, die Größe des Bilds zu ändern (entweder im Code oder mithilfe von Auto Layout und Größenklassen), wird das Bild wie jede andere Bitmap verzerrt.
  • Ressourcenkataloge sind nur mit iOS 7 und höher kompatibel. Wenn eine App iOS 6 oder niedriger unterstützen muss, können sie keine Assetkataloge verwenden.

Arbeiten mit Vorlagenbildern

Basierend auf dem Entwurf einer iOS-App kann es vorkommen, dass der Entwickler ein Symbol oder Bild innerhalb der Benutzeroberfläche anpassen muss, damit es einer Änderung des Farbschemas entspricht (z. B. basierend auf Benutzereinstellungen).

Um diesen Effekt auf einfache Weise zu erzielen, wechseln Sie im Rendermodus des Bildobjekts in Vorlagenbild:

Weisen Sie in der iOS-Designer das Bildobjekt einem Ui-Steuerelement zu, und legen Sie dann den Farbton fest, um das Bild einzufärben:

Optional können Bildobjekt und Farbton direkt im Code festgelegt werden:

MyIcon.Image = UIImage.FromBundle ("MessageIcon");
MyIcon.TintColor = UIColor.Red;

Gehen Sie wie folgt vor, um ein Vorlagenimage vollständig aus Code zu verwenden:

if (MyIcon.Image != null) {
    var mutableImage = MyIcon.Image.ImageWithRenderingMode (UIImageRenderingMode.AlwaysTemplate);
    MyIcon.Image = mutableImage;
    MyIcon.TintColor = UIColor.Red;
}

Da die RenderMode -Eigenschaft von UIImage schreibgeschützter ist, verwenden Sie die ImageWithRenderingMode -Methode, um eine neue instance des Bilds mit der gewünschten Rendermoduseinstellung zu erstellen.

Es gibt drei mögliche Einstellungen für UIImage.RenderMode über die UIImageRenderingMode Enumeration:

  • AlwaysOriginal – Erzwingt, dass das Bild ohne Änderungen als ursprüngliche Quellbilddatei gerendert wird.
  • AlwaysTemplate – Erzwingt, dass das Bild als Vorlagenbild gerendert wird, indem die Pixel mit der angegebenen Tint Farbe gefärbt werden.
  • Automatic – Das Bild wird entweder basierend auf der Umgebung, in der es verwendet wird, als Vorlage oder als Original gerendert. Wenn das Bild beispielsweise in einem UIToolBarverwendet wird, UINavigationBarUITabBar oder UISegmentControl wird es als Vorlage behandelt.

Hinzufügen neuer Ressourcensammlungen

Beim Arbeiten mit Bildern in Objektkatalogen kann es vorkommen, dass eine neue Sammlung erforderlich ist, anstatt der Sammlung alle Bilder der App hinzuzufügen Assets.xcassets . Beispielsweise beim Entwerfen von Bedarfsgesteuerten Ressourcen.

So fügen Sie dem Projekt einen neuen Ressourcenkatalog hinzu:

  1. Klicken Sie im Projektmappen-Explorer mit der rechten Maustaste auf den Projektnamen, und wählen SieNeue Dateihinzufügen>... aus.

  2. Wählen Sie iOS-Medienobjektkatalog> aus, geben Sie einen Namen für die Sammlung ein, und klicken Sie auf die Schaltfläche Neu:

    Erstellen eines neuen Medienobjektkatalogs

Von hier aus kann die Auflistung auf die gleiche Weise wie die automatisch im Projekt enthaltene Standardauflistung Assets.xcassets verwendet werden.

Verwenden von Bildern mit Steuerelementen

Zusätzlich zur Verwendung von Bildern zur Unterstützung einer App verwendet iOS auch Bilder mit App-Steuerelementtypen wie Registerkartenleisten, Symbolleisten, Navigationsleisten, Tabellen und Schaltflächen. Eine einfache Möglichkeit, ein Bild auf einem Steuerelement anzuzeigen, besteht darin, der -Eigenschaft des Steuerelements Image eine UIImage instance zuzuweisen.

FromBundle

Der FromBundle Methodenaufruf ist ein synchroner (blockierenden) Aufruf, der über eine Reihe von Bildlade- und Verwaltungsfunktionen verfügt, z. B. Zwischenspeicherungsunterstützung und automatische Behandlung von Bilddateien für verschiedene Auflösungen.

Im folgenden Beispiel wird gezeigt, wie das Bild eines UITabBarItem auf einem UITabBarfestgelegt wird:

TabBarItem.Image = UIImage.FromBundle ("MyImage");

Angenommen, dies MyImage ist der Name eines Bildobjekts, das einem Ressourcenkatalog oben hinzugefügt wurde. Geben Sie beim Arbeiten von Objektkatalogbildern einfach den Namen des Bildsatzes in der FromBundle Methode für PNG-formatierte Bilder an:

TabBarItem.Image = UIImage.FromBundle ("MyImage");

Fügen Sie für jedes andere Bildformat die Erweiterung mit dem Namen ein. Beispiel:

TabBarItem.Image = UIImage.FromBundle ("MyImage.jpg");

Weitere Informationen zu Symbolen und Bildern finden Sie in der Apple-Dokumentation unter Richtlinien zur Erstellung von benutzerdefinierten Symbolen und Bildern.

Anzeigen eines Bilds in einem Storyboard

Nachdem ein Bild einem Xamarin.iOS-Projekt mithilfe eines Objektkatalogs hinzugefügt wurde, kann es problemlos in einem Storyboard mit einem UIImageView in der iOS-Designer angezeigt werden. Beispielsweise, wenn das folgende Image-Asset hinzugefügt wurde:

Ein Image-Beispielobjekt wurde hinzugefügt.

Gehen Sie wie folgt vor, um sie auf einem Storyboard anzuzeigen:

  1. Doppelklicken Sie auf die Main.storyboard Datei im Projektmappen-Explorer, um sie zur Bearbeitung im iOS-Designer zu öffnen.

  2. Wählen Sie in der Toolbox eine Bildansicht aus:

    Auswählen einer Bildansicht aus der Toolbox

  3. Ziehen Sie die Bildansicht auf die Entwurfsoberfläche, und positionieren Und formatieren Sie sie nach Bedarf:

    Eine neue Bildansicht auf der Entwurfsoberfläche

  4. Wählen Sie im Abschnitt Widget der Eigenschaft Explorer das gewünschte Image-Objekt aus, das angezeigt werden soll:

    Wählen Sie das gewünschte Image-Objekt aus, das angezeigt werden soll.

  5. Verwenden Sie im Abschnitt Ansicht den Modus , um zu steuern, wie die Größe des Bilds geändert wird, wenn die Größe der Bildansicht geändert wird.

  6. Klicken Sie bei ausgewählter Bildansicht erneut darauf, um Einschränkungen hinzuzufügen:

    Hinzufügen von Einschränkungen

  7. Ziehen Sie den Ziehpunkt "T" an jedem Rand der Bildansicht auf die entsprechende Seite des Bildschirms, um das Bild an die Seiten anzuheften. Auf diese Weise wird die Bildansicht verkleinert und vergrößert, wenn die Bildschirmgröße geändert wird.

  8. Speichern Sie die Änderungen im Storyboard.

Anzeigen eines Bilds im Code

Genau wie beim Anzeigen eines Bilds in einem Storyboard kann es nach dem Hinzufügen eines Bilds zu einem Xamarin.iOS-Projekt mithilfe eines Objektkatalogs problemlos mithilfe von C#-Code angezeigt werden.

Betrachten Sie das folgende Beispiel:

// Create an image view that will fill the
// parent image view and set the image from
// an Image Asset

var imageView = new UIImageView (View.Frame);
imageView.Image = UIImage.FromBundle ("Kemah");

// Add the Image View to the parent view
View.AddSubview (imageView);

Dieser Code erstellt eine neue UIImageView und gibt ihr eine anfängliche Größe und Position. Anschließend wird das Bild aus einem Image-Asset geladen, das dem Projekt hinzugefügt wurde, und fügt das UIImageView dem übergeordneten UIView Objekt hinzu, um es anzuzeigen.