Im vorherigen Tutorial haben wir gelernt, Textfields und Buttons zu verwenden. Wir haben den eingegebenen Text im Textfield abgerufen und den Text beim Anklicken des Buttons einem Label zugewiesen. In diesem Tutorial erfahrt Ihr, wie wir unserer App Elemente (Bilder, Farben etc.) hinzufügen und anzeigen können.
Der Assets Catalog
Wenn wir in iOS Bilder oder Farben zu unserer App hinzufügen möchten, wird empfohlen, den Assets Catalog zu verwenden. Dieser enthält die App-Icons, die Bilder und andere grafische Elemente, die von der App benötigt werden, sowie die von App-Designern definierten Farben.
Ihr findet den Assets Catalog im Projektdateiexplorer mit dem Namen "Assets.xcassets".
Das Image Set
Ein iOS-Bild kann auf verschiedenen Geräten mit unterschiedlichen Bildschirmgrößen und Auflösungen angezeigt werden. Dies bedeutet, dass ein einfaches PNG- oder JPG-Bild nicht auf allen Geräten gleich aussieht. Aus diesem Grund kann ein Image-Set individuelle Größen besitzen, welches dann für die unterschiedlichen Gerätegrößen skaliert. Ebenfalls ist es möglich, eine einzelne Vektor-Datei (PDF) zu benutzten. Je nach Ansatz (Vektor oder Image-Set) setzt die App automatisch die richtige Größe, ohne an Qualität zu verlieren.
Individuelle Bilder-Skalierung:
Führe folgende Schritte aus, um ein Bild mit individueller Skalierung hinzuzufügen:
Wähle im Inspektor für Projektdateien die Datei "Assets.xcassets" aus.
Klicke in der unteren linken Ecke des Assets Catalog auf "+" und wähle "New Image Set".
Ein neues Image-Set wird erstellt. Mit einem Doppelklick kannst du dieses umbenennen. Ändere den Namen zu "star".
Lade die Datei herunter und entpacke diese, um die Sternbilder zu erhalten.
Lege die Datei star.png per drag and drop im 1. Feld im Image-Set ab. Das Bild mit dem Suffix @2x sollte innerhalb des 2. Feldes abgelegt werden und @3x im 3. Feld.
Dein Star-Asset ist jetzt fertig und kann verwendet werden. Das Bild ohne Suffix wird automatisch von den Bildschirmen mit kleiner Auflösung verwendet, während das @2x-Bild von mittelgroßen Bildschirmen und das @3x-Bild von großen Bildschirmen mit hoher Auflösung verwendet wird.
Einzel Bild-Skalierung:
Es ist auch möglich, eine Vektorbilddatei zu verwenden, die für alle Bildschirmgrößen verwendet werden kann. Diese Dateien können die Größe ändern, ohne pixelig zu werden oder an Qualität zu verlieren. Vektorbilder sind normalerweise PDF-Dateien. Führe folgende Schritte aus, um ein Image-Set mit einer einzelnen Skalierung hinzuzufügen:
Klicke in der unteren linken Ecke des Assets Catalog auf "+" und wähle "New Image Set"
Ein neues Image-Set wird erstellt. Mit einem Doppelklick kannst du diese wieder umzubenennen. Nenne das Image-Set " bear"
Wähle in der "Inspector Bar" den "Attributes Inspector" aus
Klicke auf die Scales options und wähle "Single Scale"
Lade das Vector-Image herunter und lege es im Quadrat mit dem Text "All" ab
Das Color Set
Nach dem Hinzufügen der Bilder können wir auch eine benutzerdefinierte Farbe hinzufügen, die wir später als Hintergrundfarbe für unseren Bildschirm verwenden werden. Dafür führen wir folgenden Schritte aus:
Klicke in der unteren linken Ecke des Assets Catalog auf "+" und wähle "New Color Set".
Ein neues Color-Set wird erzeugt. Mit einem Doppelklick kannst du es wieder umzubenennen. Wähle den Namen "beige"
Klicke auf das Image Square.
Wähle in der "Inspector Bar" den "Attributes Inspector" aus.
Wähle unter "Input method" 8-Bit (0-255) aus.
Stelle den "Red" Wert auf 245, den "Green" Wert auf 245 und den "Blue" Wert auf 220
Positionieren des ImageView
Wir platzieren unser Bild am unteren Rand unseres Bildschirms, horizontal zentriert. Dabei gehen wir wie folgt vor:
Klicke auf das ImageView. Drücke und halte die Steuertaste der Tastatur (ctrl ^) gedrückt und klicke auf die linke Maustaste. Wenn du jetzt die Maus außerhalb des ImageView bewegst, erscheint eine blaue Linie. Ziehe diese auf den großen weißen Screens und lasse los.
Es öffnet sich eine Liste mit möglichen Constraints. Wähle "Bottom Space to Safe Area".
Gehe auf das soeben erstellte Constraint in der "Inspector Bar". Wähle den “Attributes Inspector” aus.
Setze "Constant" auf 16
Erzeuge erneut die blaue Linie und wähle jetzt "Center Horizontally in Safe Area"
Erzeuge erneut die blaue Linie, bewege aber die Maus von links nach rechts und lasse die Maus innerhalb des ImageView wieder los. Wähle "Width", das setzt eine feste Breite für das ImageView
Wiederhole den vorherigen Schritt. Aber diesmal von unten nach oben und wähle "Height"
Die Hintergrundfarbe vom Main View verändern
Nun werden wir unsere benutzerdefinierte Farbe als Hintergrundfarbe für unsere Main View verwenden. Gehe dazu wie folgt vor:
Wähle in der View Hierarchie das Main View aus
Klicke auf Background und scrolle nach unten, um die bereits definierte Farbe “Beige” zu finden.
Ein Bild programmatisch dem ImageView zuweisen
Wir können bereits den vom Benutzer eingegebenen Text im TexField abrufen und damit den Text im Label verändern (Tutorial 3). Jetzt fügen wir Code hinzu, der prüft, ob der eingegebene Text mit dem Namen eines unserer Bilder übereinstimmt. Wenn ja, zeigen wir das entsprechende Bild, andernfalls zeigen wir kein Bild an. Dazu gehen wir wie folgt vor:
Deklariere das ImageView im ViewController
@IBOutlet weak var imageView: UIImageView!Verlinke die Variable mit dem ImageView Objekt im storyboard
Bearbeite die IBAction Funktion buttonPressed (Tutorial 3) und füge folgenden Code hinzu:
if text == "star" {
imageView.image = UIImage(named: "star")
} else if text == "bear" {
imageView.image = UIImage(named: "bear")
} else {
imageView.image = nil
} Der Code könnte auf den ersten Blick etwas kompliziert aussehen, ist jedoch eigentlich ganz einfach. Der eingegebene Text im TextField wird überprüft. Wenn es mit dem Wort "star" übereinstimmt, wird das Bild "star" gewählt, welches wir unserem Assets Catalog hinzugefügt haben. Das Bild wird dann dem entsprechendem ImageView zugewiesen. Stimmt der Text nicht mit “star” überein, geht das Programm in die zweite if-Schleife und prüft, ob der Text dem Wort “bear” übereinstimmt. Wenn ja, wird das Bild "bear" gesetzt. Wenn nicht, geht das Programm in die else-Schleife. Hier wird der Fall ausgeführt, wenn keiner der vorherigen Abfragen erfolgreich waren. Das Bild wird jetzt auf “nil” (nichts) gesetzt. Das bedeutet, dass kein Bild vorhanden ist.
Die if-Anweisung ist in der Softwareprogrammierung sehr wichtig, da sie es uns ermöglicht, Abfragen zu starten und je nach Bedingungen unterschiedliche Reaktionen bzw. Programmabschnitte durchzuführen. Die Syntax lautet:
if expression {
instructions
}“Expression” (Ausdruck) ist ein Boolescher Wert, was bedeutet, dass er entweder wahr oder falsch sein kann. Nur wenn der Ausdruck als wahr ausgewertet wird, wird das Programm in den geschweifte Klammern { } ausgeführt.
Durch Hinzufügen einer else if-Anweisung können wir eine Alternative definieren, die auf einem anderen Ausdruck basiert. Die else-Anweisung wird ausgeführt, wenn alle if / else if Ausdrücke als falsch ausgewertet wurden.
Führe nun die App aus, tippen Sie auf das Textfield und gebe das Wort “bear”, “star” oder einen anderen Text ein, um die ImageView-Aktualisierungen anzuzeigen. Im nächsten Tutorial erfährst Du, wie du zu einem anderen Bildschirm navigieren und einige Daten an diesen übergeben kannst. Du kannst die Projektdateien wieder hier herunterladen.
Verpasse kein Tutorial mehr! Like dafür einfach unsere Facebook Seite ✅
Also: Bleib dran!
Viel Spaß beim Coden.
Euer Code Pirate Team
Du liest: iOS Programmierung Tutorial 4 - Application Assets