Thay đổi màu thanh điều hướng trong Swift

Tôi đang sử dụng Chế độ xem chọn để cho phép người dùng chọn chủ đề màu cho toàn bộ ứng dụng.

Tôi đang lên kế hoạch thay đổi màu sắc của thanh điều hướng, nền và có thể là thanh tab (nếu có thể).

Tôi đã nghiên cứu cách làm điều này nhưng không thể tìm thấy bất kỳ ví dụ Swift nào. Bất cứ ai có thể xin vui lòng cho tôi một ví dụ về mã tôi sẽ cần sử dụng để thay đổi màu thanh điều hướng và màu văn bản thanh điều hướng?

Chế độ xem Picker được thiết lập, tôi chỉ tìm mã để thay đổi màu UI.

Thanh điều hướng:

navigationController?.navigationBar.barTintColor = UIColor.green

Thay thế greenColor bằng bất cứ thứ gì bạn muốn, bạn cũng có thể sử dụng RGB nếu muốn.

Thanh điều hướng Văn bản:

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

Thay thế màu cam với bất kỳ màu nào bạn thích.

Thanh tab:

tabBarController?.tabBar.barTintColor = UIColor.brown

Thanh Tab Văn bản:

tabBarController?.tabBar.tintColor = UIColor.yellow

Trên hai màu cuối cùng, thay thế brownColor và yellowColor bằng màu bạn chọn.

Dưới đây là một số tùy chỉnh ngoại hình rất cơ bản mà bạn có thể áp dụng rộng rãi cho ứng dụng:

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();

Tìm hiểu thêm về UIAppearanceAPI trong Swift bạn có thể đọc tại đây: https://developer.apple.com/documentation/uikit/uiappparent

Đã cập nhật cho 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

Swift 4

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

Swift 4.2, 5+

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

Cũng có thể kiểm tra tại đây: https://github.com/hasnine/iOSUtilitiesSource

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()]

Chỉ cần dán dòng này didFinishLaunchingWithOptionstrong mã của bạn.

Trong AppDelegate , điều này đã thay đổi toàn cầu định dạng của NavBar và xóa đường biên / đường biên dưới cùng (vốn là vấn đề của hầu hết mọi người) để cung cấp cho bạn những gì tôi nghĩ rằng bạn và những người khác đang tìm kiếm:

 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()] }

Sau đó, bạn có thể thiết lập tệp Constants.swift và chứa trong đó là cấu trúc Kiểu với màu sắc và phông chữ, v.v. Sau đó, bạn có thể thêm bảngView / pickerView vào bất kỳ ViewContoder nào và sử dụng mảng "AvailableTheme" để cho phép người dùng thay đổi themeColor.

Điều tuyệt vời ở đây là bạn có thể sử dụng một tham chiếu trong toàn bộ ứng dụng của mình cho từng màu và nó sẽ cập nhật dựa trên "Chủ đề" đã chọn của người dùng và không có một tham chiếu nào cho theme1 ():

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) } ...

Để thực hiện việc này trên bảng phân cảnh (Trình tạo giao diện)

Với sự giúp đỡ của IBDesignable, chúng tôi có thể thêm nhiều tùy chọn hơn vào Trình tạo giao diện Trình tạo UINavigationControllervà chỉnh sửa chúng trên bảng phân cảnh. Đầu tiên, thêm mã sau vào dự án của bạn.

@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
        }
    }
}

Sau đó, chỉ cần đặt các thuộc tính cho bộ điều khiển điều hướng trên bảng phân cảnh.

Cách tiếp cận này cũng có thể được sử dụng để quản lý màu của văn bản thanh điều hướng từ bảng phân cảnh:

@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
  }
}

Swift 4:

Mã làm việc hoàn hảo để thay đổi giao diện thanh điều hướng ở cấp ứng dụng.

// 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

Chúc mừng mã hóa!

UINavigationBar.appearance().barTintColor

đã làm cho tôi

SWift 4 - Chuyển tiếp mượt mà (giải pháp tốt nhất):

Nếu bạn đang di chuyển trở lại từ bộ điều khiển điều hướng và bạn phải đặt màu khác nhau trên bộ điều khiển điều hướng bạn đã đẩy từ bạn muốn sử dụng

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

thay vì đặt nó trong viewWillAppear để quá trình chuyển đổi sạch hơn.

Chuyển đổi 4.2

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

Trong Swift 4

Bạn có thể thay đổi màu sắc của thanh điều hướng. Chỉ cần sử dụng đoạn mã dưới đây trongviewDidLoad()

Thanh điều hướng màu

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

Thanh điều hướng Màu văn bản

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

Đối với Thanh điều hướng tiêu đề lớn iOS 11 , bạn cần sử dụng thuộc largeTitleTextAttributestính

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

Các appearance()chức năng không phải luôn luôn làm việc cho tôi. Vì vậy, tôi thích tạo một đối tượng NC và thay đổi các thuộc tính của nó.

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()]

Ngoài ra nếu bạn muốn thêm một hình ảnh thay vì chỉ văn bản, nó cũng hoạt động

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

Sử dụng API xuất hiện và màu barTintColor.

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

iOS 8 (nhanh chóng)

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

Nếu bạn có bộ điều khiển điều hướng tùy chỉnh, bạn có thể sử dụng đoạn mã trên. Vì vậy, trong trường hợp của tôi, tôi đã sử dụng như các đoạn mã sau đây.

Phiên bản Swift 3.0, XCode 8.1

navigationController.navigationBar.barTintColor = UIColor.green

Thanh điều hướng Văn bản:

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

Đó là những cuộc nói chuyện rất hữu ích.

Cập nhật Swift 4, iOS 12 và Xcode 10

Chỉ cần đặt một dòng bên trong viewDidLoad()

navigationController?.navigationBar.barTintColor = UIColor.red

Trong Swift 2

Để thay đổi màu trong thanh điều hướng,

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

Để thay đổi màu trong thanh điều hướng mục,

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

hoặc là

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

Swift 3

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

Điều này sẽ đặt màu thanh điều hướng của bạn như màu thanh Facebook :)

Tương thích Swift 3 và Swift 4 Xcode 9

Một giải pháp tốt hơn cho việc này để tạo một Class cho các thanh điều hướng chung

Tôi có 5 Bộ điều khiển và mỗi tiêu đề của bộ điều khiển được đổi thành màu cam. Vì mỗi bộ điều khiển có 5 bộ điều khiển điều hướng nên tôi phải thay đổi mỗi một màu từ thanh tra hoặc từ mã.

Vì vậy, tôi đã tạo một lớp thay vì thay đổi mỗi một thanh Điều hướng từ mã tôi chỉ gán lớp này và nó hoạt động trên tất cả 5 bộ điều khiển Khả năng tái sử dụng mã. Bạn chỉ cần gán lớp này cho Mỗi bộ điều khiển và đó là nó.

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]

 }


  }

iOS 10 Swift 3.0

Nếu bạn không sử dụng các khung nhanh thì chúng tôi UINeraida sẽ thay đổi nền điều hướng dưới dạng UIColorhoặc HexColorhoặc UIImagethay đổi văn bản nút điều hướng quay lại theo chương trình, thay đổi màu văn bản hoàn chỉnh.

Dành cho 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)

Swift 3

Đơn giản một lớp lót mà bạn có thể sử dụng trong ViewDidLoad()

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

Phiên bản này cũng loại bỏ dòng bóng 1px dưới thanh điều hướng:

Swift 5: Đặt cái này vào AppDelegate didFinishLaunchingWithOptions của bạn

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()

tôi phải làm

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

nếu không thì màu nền sẽ không thay đổi

Đầu tiên, đặt thuộc tính isTranslucent của navigationBar thành false để có được màu mong muốn. Sau đó thay đổi màu navigationBar như thế này:

@IBOutlet var NavigationBar: UINavigationBar!

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

Đảm bảo đặt Trạng thái nút cho .n 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

chỉ cần gọi phần mở rộng này và chuyển màu, nó sẽ tự động thay đổi màu của thanh điều hướng

extension UINavigationController {

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

trong chế độ xem didload hoặc trong viewwill xuất hiện cuộc gọi

self.navestionControll? .setNavulationBarColor (màu: <# T ## UIColor #>)

Hãy thử điều này trong 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]
    //        }
}

Tiện ích mở rộng

extension UIApplication {

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

Tôi đang viết bài này cho những người vẫn còn vấn đề với các giải pháp ở đây.

Tôi đang sử dụng Xcode Phiên bản 11.4 (11E146). Người làm việc cho tôi là:

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

NHƯNG!, Nếu bạn đặt barTintColor trong bảng phân cảnh thành bất kỳ giá trị nào khác ngoài "mặc định" thì 2 dòng mã này sẽ không có hiệu lực.

Vì vậy, hãy cẩn thận và đặt trở lại barTintColor mặc định trong Storyboard. Ôi ...

Thêm các dòng này vào AppDelegate của bạn bên trong hàm didFinishLaunchingWithOptions:

dòng này là cho nền thanh điều hướng của bạn.

UINavigationBar.appearance().barTintColor = .orange

dòng này là nếu không phải của bạn làTranslucent thành false, nó sẽ hiển thị màu trắng trên điều hướng.

UINavigationBar.appearance().tintColor = .white

dòng này dành cho văn bản và biểu tượng của bạn trên thanh điều hướng

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

dòng này cho chúng tôi để mọi thứ xuống thanh điều hướng của bạn.

UINavigationBar.appearance().isTranslucent = false