Зміна кольору панелі навігації в Swift


240

Я використовую перегляд "Вибір", щоб дозволити користувачеві вибрати кольорову тему для всього додатка.

Я планую змінити колір панелі навігації, фону та, можливо, панелі вкладок (якщо це можливо).

Я досліджував, як це зробити, але не можу знайти жодних прикладів Swift. Чи може хто-небудь, будь ласка, надати мені приклад коду, який я повинен використовувати для зміни кольору панелі навігації та кольору тексту панелі навігації?

Зображення Picker налаштовано, я просто шукаю код для зміни кольорів інтерфейсу.

Відповіді:


526

Панель навігації:

navigationController?.navigationBar.barTintColor = UIColor.green

Замініть greenColor будь-яким потрібним UIColor, ви також можете використовувати RGB, якщо хочете.

Текст навігаційної панелі:

navigationController?.navigationBar.titleTextAttributes = [.foregroundColor: UIColor.orange]

Замініть orangeColor будь-яким кольором, який вам подобається.

Панель вкладок:

tabBarController?.tabBar.barTintColor = UIColor.brown

Текст рядка вкладки:

tabBarController?.tabBar.tintColor = UIColor.yellow

На останніх двох замініть коричневий колір і жовтий колір кольором на ваш вибір.


Дуже дякую! Мені не було далеко з тим, що я намагався, але не все було в правильному порядку.
користувач3746428

Я не впевнений. Якщо ви використовуєте push-segue на відміну від модального, це має бути та сама панель навігації, але я не зовсім впевнений. Вибачте.
трубач201

2
Після оновлення до новіших бета-версій Xcode встановлення кольору заголовка тексту більше не працює. titleTextAttributes недоступний у Swift. Будь-які ідеї?
користувач3746428

1
Чи можете ви відкрити нове запитання і, можливо, посилання на нього? Чат - не найкраще місце для подібного.
трубач2011

3
Я виявив, що це змушує мене використовувати NSForegroundColorAttributeName як ім'я атрибута, але в іншому випадку працює чудово.
Джейк Холл

90

Ось декілька найпростіших налаштувань зовнішності, за допомогою яких можна застосувати додаток:

UINavigationBar.appearance().backgroundColor = UIColor.greenColor()
UIBarButtonItem.appearance().tintColor = UIColor.magentaColor()
//Since iOS 7.0 UITextAttributeTextColor was replaced by NSForegroundColorAttributeName
UINavigationBar.appearance().titleTextAttributes = [UITextAttributeTextColor: UIColor.blueColor()]
UITabBar.appearance().backgroundColor = UIColor.yellowColor();

Більше про UIAppearanceAPI в Swift ви можете прочитати тут: https://developer.apple.com/documentation/uikit/uiappearance


То як би я скористався цим, щоб змінити колір навігаційної панелі для всього додатка? На даний момент у мене просто є: self.navigationController.navigationBar.barTintColor = UIColor.newBlueColor (), і, звичайно, це просто змінює колір навігаційної панелі контролера перегляду, що знаходиться в коді. Як я можу використовувати його для зміни всіх навігаційних панелей? Я спробував використовувати: UINavigationBar.appearance (). BackgroundColor = UIColor.newBlueColor (), але, схоже, нічого не робить.
користувач3746428

4
Щоб відобразити фрагменти в додатку entier, вставте наведений нижче метод додатка функцій AppDelegate.swift (додаток: UIApplication, didFinishLaunchingWithOptions запуск Опції: [NSObject: AnyObject]?) -> Bool {// Місце вище коду}
Badrinath

7
Використовуйте barTintColor замість backgroundColor. UINavigationBar.appearance (). BarTintColor = UIColor.greenColor ()
Майкл Петерсон

@Keenle Я трохи заплутався ... Чому зміна кольору фону UINavigationBar через API зовнішнього вигляду повністю не змінює свій колір? Я спробував встановити колір тла синім, і це дало мені дивний відтінок фіолетово-синього ...
fja

59

Оновлено для Swift 3, 4, 4.2, 5+

// setup navBar.....
UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]
UINavigationBar.appearance().isTranslucent = false

Швидкий 4

UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false

Швидкий 4.2, 5+

UINavigationBar.appearance().barTintColor = .black
UINavigationBar.appearance().tintColor = .white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false

Також можна перевірити тут: https://github.com/hasnine/iOSUtilitiesSource


Swift 4.2: NSAttributedString.Key.foregroundColor
Kasra Babaei

встановлення кольору відтінку до білого, а не бартінтколор показує початковий колір. Чудово!
NickCoder

@NickCoder це цінує. :) також перевірити мою губку
Джаміль Хаснін Тамім

52
UINavigationBar.appearance().barTintColor = UIColor(red: 46.0/255.0, green: 14.0/255.0, blue: 74.0/255.0, alpha: 1.0)
UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().titleTextAttributes = [NSForegroundColorAttributeName : UIColor.whiteColor()]

Просто вставте цей рядок didFinishLaunchingWithOptionsу свій код.


Я спробував це з RGB, і це не працює, де б я його не клав.
Натан Маккаскле

@NathanMcKaskle Перевірте свій RGB, він повинен бути у форматі "xx / 250.0f".
Мохіт Томар

Використовувався в didFinishLaunchingWithOptions і працював чудово. Всередині viewDidLoad не працює ідеально.
Тухід

26

У AppDelegate це глобально змінило формат NavBar і видалило нижню лінію / межу (що є проблемою для більшості людей), щоб дати вам те, що я думаю, що ви та інші шукаєте:

 func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {

    UINavigationBar.appearance().setBackgroundImage(UIImage(), forBarPosition: UIBarPosition.Any, barMetrics: UIBarMetrics.Default)
    UINavigationBar.appearance().shadowImage = UIImage()
    UINavigationBar.appearance().tintColor = UIColor.whiteColor()
    UINavigationBar.appearance().barTintColor = Style.SELECTED_COLOR
    UINavigationBar.appearance().translucent = false
    UINavigationBar.appearance().clipsToBounds = false
    UINavigationBar.appearance().backgroundColor = Style.SELECTED_COLOR
    UINavigationBar.appearance().titleTextAttributes = [NSFontAttributeName : (UIFont(name: "FONT NAME", size: 18))!, NSForegroundColorAttributeName: UIColor.whiteColor()] }

Тоді ви можете встановити файл Constants.swift , який містить структуру стилів із кольорами та шрифтами тощо. Потім ви можете додати tableView / pickerView до будь-якого ViewController та використовувати масив "availableThemes", щоб користувач міг змінити themeColor.

Найкраще в цьому - ви можете використовувати одне посилання у всій програмі для кожного кольору, і воно буде оновлено на основі вибраної користувачем "Теми", і без жодної вона не застосовується до теми1 ():

import Foundation
import UIKit

struct Style {


static let availableThemes = ["Theme 1","Theme 2","Theme 3"]

static func loadTheme(){
    let defaults = NSUserDefaults.standardUserDefaults()
    if let name = defaults.stringForKey("Theme"){
        // Select the Theme
        if name == availableThemes[0]   { theme1()  }
        if name == availableThemes[1]   { theme2()  }
        if name == availableThemes[2]   { theme3()  }
    }else{
        defaults.setObject(availableThemes[0], forKey: "Theme")
        theme1()
    }
}

 // Colors specific to theme - can include multiple colours here for each one
static func theme1(){
   static var SELECTED_COLOR = UIColor(red:70/255, green: 38/255, blue: 92/255, alpha: 1) }

static func theme2(){
    static var SELECTED_COLOR = UIColor(red:255/255, green: 255/255, blue: 255/255, alpha: 1) }

static func theme3(){
    static var SELECTED_COLOR = UIColor(red:90/255, green: 50/255, blue: 120/255, alpha: 1) } ...

2
Спасибі, ваша відповідь справді допомогла мені принаймні для мене, я використав першу її частину, і це було приголомшливо і дуже корисно
Ameer Fares

1
Дякую тобі, чоловіче, я спробував тут кожну відповідь, і жодна з них не працювала, окрім твоєї: D
Ronak Shah

19

Для цього на аркуші розкадрів (Інспектор побудови інтерфейсу)

За допомогою IBDesignableми можемо додати більше варіантів для Інспектора Інтерфейсу Builder UINavigationControllerі налаштувати їх на розкадровці. Спочатку додайте наступний код до свого проекту.

@IBDesignable extension UINavigationController {
    @IBInspectable var barTintColor: UIColor? {
        set {
            guard let uiColor = newValue else { return }
            navigationBar.barTintColor = uiColor
        }
        get {
            guard let color = navigationBar.barTintColor else { return nil }
            return color
        }
    }
}

Потім просто встановіть атрибути для навігаційного контролера на розкадровці.

введіть тут опис зображення

Цей підхід також може бути використаний для керування кольором тексту навігаційної панелі з табло:

@IBInspectable var barTextColor: UIColor? {
  set {
    guard let uiColor = newValue else {return}
    navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: uiColor]
  }
  get {
    guard let textAttributes = navigationBar.titleTextAttributes else { return nil }
    return textAttributes[NSAttributedStringKey.foregroundColor] as? UIColor
  }
}

18

Швидкий 4:

Ідеально працює код для зміни зовнішнього вигляду панелі навігації на рівні програми.

введіть тут опис зображення

// MARK: Navigation Bar Customisation

// To change background colour.
UINavigationBar.appearance().barTintColor = .init(red: 23.0/255, green: 197.0/255, blue: 157.0/255, alpha: 1.0)

// To change colour of tappable items.
UINavigationBar.appearance().tintColor = .white

// To apply textAttributes to title i.e. colour, font etc.
UINavigationBar.appearance().titleTextAttributes = [.foregroundColor : UIColor.white,
                                                    .font : UIFont.init(name: "AvenirNext-DemiBold", size: 22.0)!]
// To control navigation bar's translucency.
UINavigationBar.appearance().isTranslucent = false

Щасливе кодування!



15

SWIFT 4 - Плавний перехід (найкраще рішення):

Якщо ви повертаєтесь з навігаційного контролера і вам потрібно встановити різний колір на навігаційному контролері, який ви натиснули з нього, що хочете використовувати

override func willMove(toParentViewController parent: UIViewController?) {
    navigationController?.navigationBar.barTintColor = .white
    navigationController?.navigationBar.tintColor = Constants.AppColor
}

замість того, щоб ставити його у viewWillAppear, щоб перехід був чистішим.

SWIFT 4.2

override func willMove(toParent parent: UIViewController?) {
    navigationController?.navigationBar.barTintColor = UIColor.black
    navigationController?.navigationBar.tintColor = UIColor.black
}

11

У Swift 4

Ви можете змінити колір панелі навігації. Просто використовуйте цей фрагмент коду нижчеviewDidLoad()

Колір панелі навігації

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

Колір тексту рядка навігації

self.navigationController?.navigationBar.titleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.purple]

Для навігаційної панелі великого заголовка iOS 11 потрібно використовувати largeTitleTextAttributesвластивість

self.navigationController?.navigationBar.largeTitleTextAttributes = [NSAttributedStringKey.foregroundColor: UIColor.purple]

9

appearance()Функція не завжди працює для мене. Тому я вважаю за краще створити об’єкт NC та змінити його атрибути.

var navBarColor = navigationController!.navigationBar
navBarColor.barTintColor =
    UIColor(red:  255/255.0, green: 0/255.0, blue: 0/255.0, alpha: 100.0/100.0)
navBarColor.titleTextAttributes =
    [NSForegroundColorAttributeName: UIColor.whiteColor()]

Також якщо ви хочете додати зображення замість просто тексту, це також працює

var imageView = UIImageView(frame: CGRect(x: 0, y: 0, width: 70, height: 70))
imageView.contentMode = .ScaleAspectFit

var image = UIImage(named: "logo")
imageView.image = image
navigationItem.titleView = imageView

таким чином я зміг змінити колір self.navigationController? .navigationBar.topItem? .title. Дякую тобі.
Oguzhan

8

Використовуйте API зовнішнього вигляду та колір barTintColor.

UINavigationBar.appearance().barTintColor = UIColor.greenColor()

4

iOS 8 (швидкий)

let font: UIFont = UIFont(name: "fontName", size: 17)   
let color = UIColor.backColor()
self.navigationController?.navigationBar.topItem?.backBarButtonItem?.setTitleTextAttributes([NSFontAttributeName: font,NSForegroundColorAttributeName: color], forState: .Normal)

4

Якщо ви налаштували контролер навігації, ви можете використовувати фрагмент коду вище. Тож у моєму випадку я використовував наступні фрагменти коду.

Swift 3.0, версія XCode 8.1

navigationController.navigationBar.barTintColor = UIColor.green

Текст навігаційної панелі:

navigationController.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.orange]

Це дуже корисні розмови.


4

Swift 4, iOS 12 та оновлення Xcode 10

Просто покладіть всередину одну лінію viewDidLoad()

navigationController?.navigationBar.barTintColor = UIColor.red

3

У Swift 2

Щоб змінити колір в панелі навігації,

navigationController?.navigationBar.barTintColor = UIColor.whiteColor()

Для зміни кольору в навігаційній панелі елемента,

navigationController?.navigationBar.tintColor = UIColor.blueColor()

або

navigationController!.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.blueColor()]

3

Швидкий 3

UINavigationBar.appearance().barTintColor = UIColor(colorLiteralRed: 51/255, green: 90/255, blue: 149/255, alpha: 1)

Це встановить ваш колір панелі навігації, як колір бар у Facebook :)


3

Сумісний Xcode 9 Swift 3 та Swift 4

Краще рішення для цього - зробити клас для загальних планок навігації

У мене є 5 контролерів і кожен заголовок контролера змінюється на помаранчевий колір. Оскільки кожен контролер має 5 навігаційних контролерів, тому мені довелося змінити кожен колір або з інспектора, або з коду.

Тому я створив клас замість того, щоб змінювати кожну панель навігації з коду, я просто призначив цей клас, і він працював на всіх 5 можливостях використання коду контролера. Вам просто потрібно призначити цей клас Кожному контролеру і це.

import UIKit

   class NabigationBar: UINavigationBar {
      required init?(coder aDecoder: NSCoder) {
       super.init(coder: aDecoder)
    commonFeatures()
 }

   func commonFeatures() {

    self.backgroundColor = UIColor.white;
      UINavigationBar.appearance().titleTextAttributes =     [NSAttributedStringKey.foregroundColor:ColorConstants.orangeTextColor]

 }


  }

2

iOS 10 Swift 3.0

Якщо ви не заперечуєте над тим, щоб скористатися швидкими рамками, тоді нам UINeraida, щоб змінити фон навігації як UIColorабо, HexColorабо UIImageзмінити текст кнопки повернення навігації програмно, змінити повний колір тексту наземного тексту.

Для UINavigationBar

    neraida.navigation.background.color.hexColor("54ad00", isTranslucent: false, viewController: self)
    
    //Change navigation title, backbutton colour
    
    neraida.navigation.foreground.color.uiColor(UIColor.white, viewController: self)
    
    //Change navigation back button title programmatically
    
    neraida.navigation.foreground.backButtonTitle("Custom Title", ViewController: self)
    
    //Apply Background Image to the UINavigationBar
    
    neraida.navigation.background.image("background", edge: (0,0,0,0), barMetrics: .default, isTranslucent: false, viewController: self)

2

Швидкий 3

Простий один вкладиш, який ви можете використовувати в ViewDidLoad()

//Change Color
    self.navigationController?.navigationBar.barTintColor = UIColor.red
//Change Text Color
    self.navigationController?.navigationBar.titleTextAttributes = [NSForegroundColorAttributeName: UIColor.white]

2

Ця версія також видаляє 1px лінію тіні під навігаційною панеллю:

Швидкий 5: Помістіть це у своєму AppDelegate didFinishLaunchingWithOptions

UINavigationBar.appearance().barTintColor = UIColor.black
UINavigationBar.appearance().tintColor = UIColor.white
UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: UIColor.white]
UINavigationBar.appearance().isTranslucent = false
UINavigationBar.appearance().setBackgroundImage(UIImage(), for: .any, barMetrics: .default)
UINavigationBar.appearance().shadowImage = UIImage()

1

Мені довелося це робити

UINavigationBar.appearance().tintColor = UIColor.whiteColor()
UINavigationBar.appearance().barStyle = .Black
UINavigationBar.appearance().backgroundColor = UIColor.blueColor()

інакше колір фону не зміниться


1

Спочатку встановіть властивість isTranslucent властивості NaviBar на false, щоб отримати бажаний колір. Потім змініть колір навігаційного бар таким чином:

@IBOutlet var NavigationBar: UINavigationBar!

NavigationBar.isTranslucent = false
NavigationBar.barTintColor = UIColor (red: 117/255, green: 23/255, blue: 49/255, alpha: 1.0)

1

Обов’язково встановіть стан кнопки на .normal

extension UINavigationBar {

    func makeContent(color: UIColor) {
        let attributes: [NSAttributedString.Key: Any]? = [.foregroundColor: color]

        self.titleTextAttributes = attributes
        self.topItem?.leftBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
        self.topItem?.rightBarButtonItem?.setTitleTextAttributes(attributes, for: .normal)
    }
}

PS iOS 12, Xcode 10.1


1
Дякую. Я годинами шукав це topItemрішення. Розчаровує кількість змін, які Apple продовжує робити, як застосовуються стилі до навігації.
App Dev Guy

1

просто зателефонуйте у це розширення та передайте колір, він автоматично змінить колір навігації

extension UINavigationController {

     func setNavigationBarColor(color : UIColor){
            self.navigationBar.barTintColor = color
        }
    }

у завантаженні перегляду або в перегляді з'явиться дзвінок

self.navigationController? .setNavigationBarColor (колір: <# T ## UIColor #>)


1

Спробуйте це в AppDelegate:

//MARK:- ~~~~~~~~~~setupApplicationUIAppearance Method
func setupApplicationUIAppearance() {

    UIApplication.shared.statusBarView?.backgroundColor = UIColor.clear

    var preferredStatusBarStyle: UIStatusBarStyle {
        return .lightContent
    }

    UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    UINavigationBar.appearance().barTintColor =  UIColor.white
    UINavigationBar.appearance().isTranslucent = false

    let attributes: [NSAttributedString.Key: AnyObject]

    if DeviceType.IS_IPAD{
        attributes = [
            NSAttributedString.Key.foregroundColor: UIColor.white,
            NSAttributedString.Key.font: UIFont(name: "HelveticaNeue", size: 30)
            ] as [NSAttributedString.Key : AnyObject]
    }else{
        attributes = [
            NSAttributedString.Key.foregroundColor: UIColor.white
        ]
    }
    UINavigationBar.appearance().titleTextAttributes = attributes
}

iOS 13

func setupNavigationBar() {
    //        if #available(iOS 13, *) {
    //            let window = UIApplication.shared.windows.filter {$0.isKeyWindow}.first
    //            let statusBar = UIView(frame: window?.windowScene?.statusBarManager?.statusBarFrame ?? CGRect.zero)
    //            statusBar.backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1) //UIColor.init(hexString: "#002856")
    //            //statusBar.tintColor = UIColor.init(hexString: "#002856")
    //            window?.addSubview(statusBar)
    //            UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    //            UINavigationBar.appearance().barTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    //            UINavigationBar.appearance().isTranslucent = false
    //            UINavigationBar.appearance().backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
    //            UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
    //        }
    //        else
    //        {
    UIApplication.shared.statusBarView?.backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
    UINavigationBar.appearance().tintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    UINavigationBar.appearance().barTintColor = #colorLiteral(red: 1, green: 1, blue: 1, alpha: 1)
    UINavigationBar.appearance().isTranslucent = false
    UINavigationBar.appearance().backgroundColor = #colorLiteral(red: 0.2784313725, green: 0.4549019608, blue: 0.5921568627, alpha: 1)
    UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor : UIColor.white]
    //        }
}

Розширення

extension UIApplication {

var statusBarView: UIView? {
    if responds(to: Selector(("statusBar"))) {
        return value(forKey: "statusBar") as? UIView
    }
    return nil
}}

1

Я пишу це для тих, хто все ще має проблеми з рішеннями.

Я використовую Xcode версії 11.4 (11E146). Той, хто працює для мене:

navigationController?.navigationBar.barTintColor = UIColor.white
navigationController?.navigationBar.tintColor = UIColor.black

АЛЕ !, якщо ви встановите barTintColor в дошці розкадрів будь-яке інше значення, ніж «за замовчуванням», ці 2 рядки коду не матимуть ніякого ефекту.

Отже, будьте обережні і поверніться до barTintColor за замовчуванням у Storyboard. О, яблуко ...


Все ж проблема, незважаючи на зміну відтінку кольору за замовчуванням :(
marika.daboja

@ marika.daboja Всі ваші контролери навігації в розкадровці встановлені за кольором за замовчуванням?
Томаш Кордова

Привіт, у мене є лише 1 навігаційний контролер (плюс 2 контролера таблиці). Колір відтінку смуги навігаційного контролера встановлений у стандартному режимі. Код Я повинен оновити цей колір, здається, не впливає на нього.
marika.daboja

@ marika.daboja переконайтеся, що навігаціяController не є нульовою. І що ви ставите цей рядок коду у viewDidLoad ()
Томаш Кордова

0

Додайте ці рядки до своєї функції AppDelegate всередині функції didFinishLaunchingWithOptions:

цей рядок призначений для фону панелі навігації.

UINavigationBar.appearance().barTintColor = .orange

ця лінія є, якщо ваш параметр не є «Транслюцентом до фальшивого», він відображатиме білий колір на навігації.

UINavigationBar.appearance().tintColor = .white

цей рядок призначений для ваших текстів та піктограм на панелі навігації

UINavigationBar.appearance().titleTextAttributes = [NSAttributedString.Key.foregroundColor: Styles.textFirstColor]

цей рядок дозволяє нам перейти на ваш панель навігації.

UINavigationBar.appearance().isTranslucent = false
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.