Farbe von Symbolen in iOS und WatchKit ändern: tintColor für Anfänger

Warum wollen Symbole ihre Farbe nicht ändern? Einführung in tintColor

Stellen Sie sich vor: Sie entwickeln eine App für iPhone oder Apple Watch. Der Designer hat einen schönen Satz schwarzer Symbole geliefert. Sie setzen sie in ein UIImageView, wenden tintColor an – und… nichts passiert. Das Symbol bleibt schwarz, wie es war. Kommt Ihnen das bekannt vor? Diese Frage ist eine der häufigsten auf Stack Overflow, und heute werden wir sie auf molekularer Ebene analysieren.

Das Problem ist, dass tintColor nur mit Bildern funktioniert, die sich im Modus Template Image befinden. Wenn Sie einfach eine Farbe für ein normales Bild (Original Image) festlegen, ignoriert das System Ihre Anfrage. Lassen Sie uns lernen, diesen Mechanismus zu steuern.

Was ist ein Template Image und wozu wird es benötigt?

In iOS und WatchKit werden alle Bilder in zwei Typen unterteilt:

• Original Image – ein normales Bild mit all seinen Farben. Es lässt sich nicht über tintColor einfärben.
• Template Image – ein Bild, bei dem nur der Alphakanal (Transparenz) als Farbe zählt. Alle sichtbaren Pixel werden „leer“ – sie sind bereit, jede von Ihnen festgelegte Farbe anzunehmen.

Wenn Sie tintColor auf ein Template Image anwenden, füllt das System alle undurchsichtigen Bereiche mit der angegebenen Farbe. Dies ist ideal für Symbole, Schaltflächen und UI-Elemente, die sich an das App-Design anpassen sollen.

Möglichkeiten zum Ändern der tintColor in iOS (Swift)

1. Der einfachste Weg: über den Interface Builder

Wenn Sie in Storyboard oder XIB arbeiten:

1. Wählen Sie Ihr UIImageView oder UIButton aus.
2. Suchen Sie im Attributinspektor das Feld Render Mode.
3. Setzen Sie es auf Template Image.
4. Jetzt funktioniert die Eigenschaft Tint im Inspektor.

2. Programmatischer Weg: Code in Swift

So wird es richtig gemacht:

// Bild ladenlet originalImage = UIImage(named: "myIcon")

// In Template umwandelnlet templateImage = originalImage?.withRenderingMode(.alwaysTemplate)

// Auf UIImageView anwendenimageView.image = templateImageimageView.tintColor = UIColor.systemBlue

Die Schlüsselmethode ist withRenderingMode(.alwaysTemplate). Sie teilt dem System mit: „Ignoriere die Originalfarben, ich färbe alles selbst ein.“

3. Farbe für UIButton ändern

Bei Schaltflächen ist der Vorgang ähnlich, aber es gibt eine Besonderheit:

button.setImage(UIImage(named: "heart")?.withRenderingMode(.alwaysTemplate), for: .normal)button.tintColor = UIColor.red

Beachten Sie: Wir wenden withRenderingMode direkt auf das Bild an, das wir für die Schaltfläche festlegen.

Besonderheiten von tintColor in WatchKit

Die Entwicklung für die Apple Watch hat ihre eigenen Einschränkungen. In WatchKit gibt es kein UIImageView – stattdessen wird WKInterfaceImage verwendet. Und hier funktioniert tintColor anders.

Der richtige Ansatz für WatchKit

// In InterfaceController.swift@IBOutlet weak var watchImage: WKInterfaceImage!

override func awake(withContext context: Any?) {    super.awake(withContext: context)        // Bild festlegen    watchImage.setImage(UIImage(named: "watchIcon"))        // Farbe anwenden    watchImage.setTintColor(UIColor.green)}

Wichtig: Die Methode heißt setTintColor(_:), nicht einfach tintColor. Und ja, das Bild muss im Format Template Image vorliegen. In WatchKit wird dies über das Attribut Render As im Asset-Katalog eingestellt.

Praktisches Beispiel: Erstellen eines anpassungsfähigen Symbols

Lassen Sie uns alles zusammenführen. Angenommen, wir haben eine App mit Umschaltung zwischen dunklem und hellem Design. Das Einstellungssymbol soll seine Farbe je nach Design ändern.

class SettingsView