IOS- Anpassen der Navigationbar mit Swift: Unterschied zwischen den Versionen

Aus maxTechCorner
Deko (Diskussion | Beiträge)
Keine Bearbeitungszusammenfassung
imported>TechCorner-Redaktion
Softwareentwicklung: Überarbeitung
 
Zeile 1: Zeile 1:
=== '''Symptom''' ===
== Symptom ==
Das Anpassen der iOS Navigationbar über das Storyboard ist nicht immer ganz einfach. Ich zeige Ihnen einen Weg, wie Sie diese programmatisch anpassen können.  
Das Anpassen der iOS-Navigation-Bar über das Storyboard ist nicht immer einfach. Dieser Artikel zeigt, wie sich Schrift, Hintergrund- und Tint-Farbe programmatisch (Swift) anpassen lassen.


==='''Ursache und Lösung'''===
[[Datei:IOS_NavigationBar.png|thumb|none|500px|Angepasste iOS-Navigation-Bar]]
• Anpassen des Fonts<br />
• Anpassen der Hintergrundfarbe<br />
• Anpassen des Farbtons der Navigationbar Items, z.B. Back Button<br />
[[File:IOS_NavigationBar.png|thumb|none|500px|IOS_NavigationBar.png]]<br />


'''Ändern des Fonts'''<br />
Die Anpassungen gehören in die Methode <code>viewDidLoad</code> (View noch nicht sichtbar).
Die Veränderungen sollten Sie in der ViewDidLoad Methode machen. Die View wurde noch nicht geladen und ist noch nicht sichtbar. Das ist genau der richtige Zeitpunkt, um die Anpassungen vorzunehmen. Die iOS Navigationbar sprechen Sie folgender Maßen an:<br />
<pre>self.navigationController?.navigationBar.titleTextAttributes</pre>
titleTextAttributes erwartet ein Array mit Font Attributen, z.B. '''[ NSFontAttributeName: UIFont(name: „Zapfino“, size: 16.0)!]'''<br />
Der komplette Code sieht so aus:<br />
<pre>self.navigationController?.navigationBar.titleTextAttributes = [ NSFontAttributeName: UIFont(name: „Zapfino“, size: 16.0)!]</pre>
Der Font sollte nun in Zapfino angezeigt werden.<br /><br />


'''Ändern der Hintergrundfarbe'''<br />
'''Schrift ändern:'''
Die Hintergrundfarbe sprechen Sie so an:<br />
<syntaxhighlight lang="swift">
<pre>self.navigationController?.navigationBar.barTintColor</pre>
self.navigationController?.navigationBar.titleTextAttributes = [ NSFontAttributeName: UIFont(name: "Zapfino", size: 16.0)! ]
Wie barTintColor schon vermuten lässt, wird hier ein UIColor Objekt erwartet, z.B. UIColor.orangeColor(). Der vollständige Code sieht so aus:
</syntaxhighlight>
Den Farbton sprechen Sie so an:
'''Hintergrundfarbe (barTintColor):'''
<pre>self.navigationController?.navigationBar.tintColor</pre>
<syntaxhighlight lang="swift">
Wie barTintColor, benötigt auch tintColor ein UIColor Objekt, wie z.B. UICo-lor.whiteColor(). Der vollständige Code sieht so aus:
self.navigationController?.navigationBar.barTintColor = UIColor.orange
<pre>self.navigationController?.navigationBar.barTintColor = UIColor.orangeColor()</pre>
</syntaxhighlight>
Ihre Navigationbar sollte nun Orange eingefärbt worden sein.<br /><br />
'''Farbton der Items (tintColor), z. B. Back-Button:'''
'''Ändern des Farbtons'''<br />
<syntaxhighlight lang="swift">
Den Farbton sprechen Sie so an:<br />
self.navigationController?.navigationBar.tintColor = UIColor.white
<pre>self.navigationController?.navigationBar.tintColor</pre>
</syntaxhighlight>
Wie barTintColor so benötigt auch tintColor ein UIColor Objekt, wie z.B. UICo-lor.whiteColor(). Der vollständige Code sieht so aus:<br />
[[Datei:Vollständiger_Code_in_Xcode.png|thumb|none|600px|Vollständiger Code in Xcode]]
<pre>self.navigationController?.navigationBar.tintColor = UIColor.whiteColor()</pre>
{{Hinweis|Die API hat sich mit neueren Swift-/iOS-Versionen geändert (z. B. <code>UIColor.orangeColor()</code> <code>UIColor.orange</code>, ab iOS 13/15 <code>UINavigationBarAppearance</code>). Die Vorgehensweise bleibt vergleichbar.}}
Ihre Navigationbar Items sollten nun eingefärbt sein.<br />
<br />
Hier noch einmal der ganze Code in XCode:
[[File:Vollständiger_Code_in_Xcode.png|thumb|none|600px|Vollständiger_Code_in_Xcode.png]]


=== '''Weitere Informationen''' ===
== Unterstützung von m.a.x. it ==
Mehr Informationen zu unseren Softwarelösungen und Services finden Sie auf<br />
Bei plattformübergreifender App- und Software­entwicklung unterstützt Sie m.a.x. it mit [https://www.max-it.de/development/individuelle-softwareentwicklung/ individueller Softwareentwicklung].
[https://www.max-it.de/techcorner/IOS-Anpassen www.max-it.de/Softwarelösungen]


=== '''Links und Quellen''' ===
{{Uebermax}}
[https://developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/Bars.html www.developer.apple.com/library/safari/documentation/UserExperience/Conceptual/MobileHIG/Bars.html]
[[Kategorie:Softwareentwicklung]]


=== '''Kontakt''' ===
Wenn Sie Fragen oder Anmerkungen zu diesem Artikel haben, melden Sie sich bitte bei uns:<br />
[http://mailto:techcorner@max-it.de techcorner@max-it.de].<br />
'''Über m.a.x. Informationstechnologie AG:''' <br />
Als etabliertes Münchner Systemhaus zeichnen wir uns seit 1989 als verlässlicher IT-Partner mittelständischer und großer Unternehmen aus. Unser Portfolio reicht von IT- Services über individuelle Softwareentwicklung bis hin zur ERP-Beratung.
=== '''Tags''' ===
iOS, swift, navigationbar, xcode
[[Kategorie: Softwareentwicklung]]

Aktuelle Version vom 15. September 2026, 00:00 Uhr

Symptom

Das Anpassen der iOS-Navigation-Bar über das Storyboard ist nicht immer einfach. Dieser Artikel zeigt, wie sich Schrift, Hintergrund- und Tint-Farbe programmatisch (Swift) anpassen lassen.

Angepasste iOS-Navigation-Bar

Die Anpassungen gehören in die Methode viewDidLoad (View noch nicht sichtbar).

Schrift ändern:

self.navigationController?.navigationBar.titleTextAttributes = [ NSFontAttributeName: UIFont(name: "Zapfino", size: 16.0)! ]

Hintergrundfarbe (barTintColor):

self.navigationController?.navigationBar.barTintColor = UIColor.orange

Farbton der Items (tintColor), z. B. Back-Button:

self.navigationController?.navigationBar.tintColor = UIColor.white
Vollständiger Code in Xcode
HinweisDie API hat sich mit neueren Swift-/iOS-Versionen geändert (z. B. UIColor.orangeColor()UIColor.orange, ab iOS 13/15 UINavigationBarAppearance). Die Vorgehensweise bleibt vergleichbar.

Unterstützung von m.a.x. it

Bei plattformübergreifender App- und Software­entwicklung unterstützt Sie m.a.x. it mit individueller Softwareentwicklung.


Über m.a.x. it Die m.a.x. Informationstechnologie AG ist seit über 30 Jahren IT-Partner mittelständischer und großer Unternehmen in München und bietet maßgeschneiderte Lösungen und Services in den Bereichen Cloud, Cybersecurity, Netzwerk, Windows, Linux und Softwareentwicklung. Sie haben eine Frage zu diesem Artikel oder brauchen Unterstützung? Kontakt aufnehmen