create - Cambiar la imagen del elemento de la barra de pestañas y el color del texto iOS

ios uitabbarcontroller

Question

Aquí está mi barra de pestañas:

La siguiente imagen muestra el programa que se está ejecutando y el elemento "NOTICIAS" seleccionado:

¡Está claro que el color del tinte de la barra funciona bien como quiero!

Pero el tintColor solo afecta a la imagen y no al texto.

Además, cuando se selecciona un elemento (como se ve arriba, noticias), ¡el color del elemento se vuelve azul! ¿Cómo evito que esto suceda? Quiero que se quede blanco.

¿Por qué el texto cambia a un color blanco cuando se selecciona pero no cuando no se selecciona?

Básicamente quiero que el color del elemento y el color del texto sean blancos todo el tiempo.

¿Cómo logro esto? Gracias por cualquier ayuda.

¿Requiere un código rápido para cada artículo individual?

EDITAR:

Answer 1

Swift 4.2 y Xcode 10

La solución que funcionó para mí:

1. Configuración de imagen : desde el guión gráfico, establecer la imagen del elemento de la barra y la imagen seleccionada. Para eliminar la superposición de tinte en las imágenes, vaya al catálogo de Activos, seleccione la imagen y cambie su modo de representación de esta manera:

Esto evitará que el componente de la barra de pestañas establezca su tinte de imagen predeterminado.

2. Texto : aquí creé una subclase simple UITabBarController y en su método viewDidLoad personalicé el color de texto predeterminado y seleccionado de esta manera:

   class HomeTabBarController: UITabBarController {
       override func viewDidLoad() {
           super.viewDidLoad()
   
           let appearance = UITabBarItem.appearance(whenContainedInInstancesOf: [HomeTabBarController.self])
           appearance.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: .black], for: .normal)
           appearance.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: .red], for: .selected)
       }
   }

Simplemente configure esta clase como su clase personalizada de controlador de barra de pestañas en el inspector de identidad en IB.

Voila! Eso es.

Actualización de iOS 13 :

Agregue esto a su configuración para iOS 13:

UITabBar.appearance().tintColor = ThemeColor.Blue

if let items = tabBarController.tabBar.items {
        let tabBarImages = getTabBarImages() // tabBarImages: [UIImage]
        for i in 0..<items.count {
            let tabBarItem = items[i]
            let tabBarImage = tabBarImages[i]
            tabBarItem.image = tabBarImage.withRenderingMode(.alwaysOriginal)
            tabBarItem.selectedImage = tabBarImage
        }
    }

Answer 2

Swift 3

En primer lugar, asegúrese de haber agregado la tecla BOOLEAN "Ver apariencia de la barra de estado basada en el controlador" a Info.plist, y establezca el valor en "NO".

Appdelegate.swift

Insertar código en algún lugar después de "launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {"

1. Cambie el color de la barra de pestañas con el valor de color RGB:

UITabBar.appearance().barTintColor = UIColor(red: 0.145, green: 0.592, blue: 0.804, alpha: 1.00)

O uno de los colores predeterminados de la interfaz de usuario:

UITabBar.appearance().barTintColor = UIColor.white)

2. Cambie el color del texto de los elementos de la pestaña:

El elemento seleccionado

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.white], for: .selected)

Los elementos inactivos

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.black], for: .normal)

3. Para cambiar el color de la imagen, creo que el enfoque más fácil es hacer que se separen las imágenes, una para cada estado.

Si no crea los iconos desde cero, las versiones alternativas en blanco y negro son relativamente fáciles de hacer en Photoshop.

Adobe Photoshop (casi cualquier versión servirá)

Asegúrese de que la imagen de su icono tenga un fondo transparente y que el icono en sí sea negro sólido (o cercano).

Abra el archivo de imagen, guárdelo con un nombre de archivo diferente (por ejemplo, nombre de archivo-Invertido.png)

En el submenú "Ajustes" en el menú "Imagen":

Haga clic en "Invertir"

Ahora tiene un negativo de su icono original.

En XCode, configure una de las imágenes como "Imagen seleccionada" en las Propiedades de la barra de pestañas en su guión gráfico y especifique la versión "inactiva" en la imagen "Elemento de la barra".

Ta-Da 🍺

Answer 3

Rápido

Para la imagen:

custom.tabBarItem = UITabBarItem(title: "Home", image: UIImage(named: "tab_icon_normal"), selectedImage: UIImage(named: "tab_icon_seelcted"))

Para el texto:

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.grayColor()], forState:.Normal)

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)

Answer 4

De los documentos de la clase UITabBarItem:

De forma predeterminada, las imágenes reales no seleccionadas y seleccionadas se crean automáticamente a partir de los valores alfa en las imágenes de origen. Para evitar la coloración del sistema, proporcione imágenes con UIImageRenderingModeAlwaysOriginal.

La pista no es si usa UIImageRenderingModeAlwaysOriginal, lo importante es cuándo usarlo.

Para evitar el color gris de los elementos no seleccionados, solo tendrá que evitar que el sistema coloree la imagen no seleccionada. Aquí es cómo hacer esto:

var firstViewController:UIViewController = UIViewController()
// The following statement is what you need
var customTabBarItem:UITabBarItem = UITabBarItem(title: nil, image: UIImage(named: "YOUR_IMAGE_NAME")?.imageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal), selectedImage: UIImage(named: "YOUR_IMAGE_NAME"))
firstViewController.tabBarItem = customTabBarItem

Como puede ver, le pedí a iOS que aplicara el color original (blanco, amarillo, rojo, lo que sea) de la imagen SOLAMENTE para el estado NO SELECCIONADO, y dejar la imagen como está para el estado SELECCIONADO.

Además, es posible que deba agregar un color de tinte para la barra de pestañas para aplicar un color diferente para el estado SELECCIONADO (en lugar del color azul predeterminado de iOS). Según su captura de pantalla anterior, está aplicando color blanco para el estado seleccionado:

self.tabBar.tintColor = UIColor.whiteColor()

EDITAR:

Answer 5

Desde here

Cada elemento de la barra de pestañas tiene un título, una imagen seleccionada, una imagen no seleccionada y un valor de insignia.

Use el campo Tinte de imagen (selectedImageTintColor) para especificar el color de tinte del elemento de barra cuando se selecciona esa pestaña. Por defecto, ese color es azul.

Answer 6

Este código funciona para Swift 4 si desea cambiar la imagen del elemento de la barra de pestañas cuando se presiona. Copie y pegue en el primer método viewDidLoad que se incluye en el proyecto

let arrayOfImageNameForSelectedState: [String] = ["Image1Color", "Image2Color", "Image3Color"] let arrayOfImageNameForUnselectedState: [String] = ["Image1NoColor", "Image2NoColor", "Image3NoColor"]

UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .selected)

Answer 7

Intente agregarlo en AppDelegate.swift (dentro del método de aplicación ):

tabBar.unselectedItemTintColor = .black

Ejemplo:

self.tabBar.barTintColor = UIColor.white
self.tabBar.isTranslucent = true

let selectedColor   = UIColor.red
let unselectedColor = UIColor.cyan

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: unselectedColor,NSFontAttributeName: UIFont(name: "Gotham-Book", size: 10)!], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: selectedColor,NSFontAttributeName: UIFont(name: "Gotham-Book", size: 10)!], for: .selected)

if let items = self.tabBar.items {
    for item in items {
        if let image = item.image {
            item.image = image.withRenderingMode( .alwaysOriginal )
            item.selectedImage = UIImage(named: "(Imagename)-a")?.withRenderingMode(.alwaysOriginal)
        }
    }
}

Ejemplo:

¡Mi inglés es tan malo! ¡Lo siento! :-)

Answer 8

Para Swift 4.0 , ahora se cambió como:

tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.gray], for: .normal)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.blue], for: .selected)

No tiene que subclasificar el UITabBarItem si su requisito es solo cambiar el color del texto. Simplemente coloque el código anterior dentro de la función viewDidLoad su controlador de viewDidLoad .

Para la configuración global, cambie tabBarItem a UITabBarItem.appearance() .

Answer 9

Sé que aquí hay muchas respuestas, pero no puedo encontrar una respuesta fácil y válida para copiar / pegar para Swift 4.2

@IBOutlet weak var appTabBar: UITabBar!

¿O usar UITabBarItem.appearance() lugar de tabBarController?.tabBar

Las imágenes tienen que ser UIImageRenderingModeAlwaysTemplate

Answer 10

Simplemente agregue una nueva referencia UITabBarController al proyecto. A continuación, cree una referencia de UITabBar en este controlador:

    appTabBar.tintColor = UIColor.scandidThemeColor()

En su viewDidLoad () , simplemente agregue a continuación el color del texto del título :

    tabBarItem = UITabBarItem(title: "FirstTab", image: UIImage(named: "firstImage"), selectedImage: UIImage(named: "firstSelectedImage"))

Para la imagen

 [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor darkGreyColorBT]} forState:UIControlStateNormal];
    [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor nightyDarkColorBT]} forState:UIControlStateSelected];

    self.tabBar.items[0].image  = [[UIImage imageNamed:@"ic-pack [email protected]"]  imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[0].selectedImage  = [[UIImage imageNamed:@"[email protected]"]  imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[1].image = [[UIImage imageNamed:@"ic-sleeptracker [email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[1].selectedImage  = [[UIImage imageNamed:@"[email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[2].image = [[UIImage imageNamed:@"ic-profile [email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
    self.tabBar.items[2].selectedImage  = [[UIImage imageNamed:@"[email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Answer 11

Subclase su TabbarViewController y en ViewDidLoad ponga este código:

[UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor darkGreyColorBT]} forState:UIControlStateNormal]; [UITabBarItem.appearance setTitleTextAttributes:@{NSForegroundColorAttributeName : [UIColor nightyDarkColorBT]} forState:UIControlStateSelected]; self.tabBar.items[0].image = [[UIImage imageNamed:@"ic-pack [email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.tabBar.items[0].selectedImage = [[UIImage imageNamed:@"[email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.tabBar.items[1].image = [[UIImage imageNamed:@"ic-sleeptracker [email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.tabBar.items[1].selectedImage = [[UIImage imageNamed:@"[email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.tabBar.items[2].image = [[UIImage imageNamed:@"ic-profile [email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal]; self.tabBar.items[2].selectedImage = [[UIImage imageNamed:@"[email protected]"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];

Esta es la solución de trabajo más simple que tengo

Answer 12

Swift 4: en su UITabBarController cámbielo por este código

func application(application: UIApplication, didFinishLaunchingWithOptions launchOptions: [NSObject: AnyObject]?) -> Bool {
    // Tab bar icon selected color
    UITabBar.appearance().tintColor = UIColor(red: 0/255.0, green: 0/255.0, blue: 0/255.0, alpha: 1.0)
    // For WHITE color: UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)
    return true
}

Answer 13

También puede hacer de esta manera:

 UITabBar.appearance().tintColor = UIColor.red

Opcional:

    print(self.tabBarController?.tabBar.items?.count)

    if let count = self.tabBarController?.tabBar.items?.count {
        for i in 0...(count-1) {
            let imageNameForSelectedState   = arrayOfImageNameForSelectedState[i]
            print(imageNameForSelectedState)
            let imageNameForUnselectedState = arrayOfImageNameForUnselectedState[i]
            print(imageNameForUnselectedState)
            self.tabBarController?.tabBar.items?[i].selectedImage = UIImage(named: imageNameForSelectedState)?.withRenderingMode(.alwaysOriginal)
            self.tabBarController?.tabBar.items?[i].image = UIImage(named: imageNameForUnselectedState)?.withRenderingMode(.alwaysOriginal)
        }
    }

Espero que te ayude.

Answer 14

puede configurar tintColor de UIBarItem:

override func viewWillLayoutSubviews() {  
  if let items = self.tabBar.items {
    for item in 0..<items.count {
      items[item].image = items[item].image?.withRenderingMode(.alwaysOriginal)
            items[item].selectedImage = items[item].selectedImage?.withRenderingMode(.alwaysTemplate)
    }

Answer 15

En Swift 4.2:

tabBarController?.tabBar.tintColor = UIColor.red
tabBarController?.tabBar.unselectedItemTintColor = UIColor.green

Answer 16

Swift 3

Esto funcionó para mí (refiriéndome a los colores de imagen set tabBarItems):

UITabBar.appearance().tintColor = UIColor(red: 0/255.0, green: 0/255.0, blue: 0/255.0, alpha: 1.0)

// For WHITE color: 
UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)

He notado que si configura la imagen con el modo de representación = .alwaysOriginal, el UITabBar.tintColor no tiene ningún efecto.

Answer 17

Swift 3

Lo hice creando un controlador de barra de pestañas personalizado y agregué este código dentro del método viewDidLoad .

    if let count = self.tabBar.items?.count {
        for i in 0...(count-1) {
            let imageNameForSelectedState   = arrayOfImageNameForSelectedState[i]
            let imageNameForUnselectedState = arrayOfImageNameForUnselectedState[i]

            self.tabBar.items?[i].selectedImage = UIImage(named: imageNameForSelectedState)?.withRenderingMode(.alwaysOriginal)
            self.tabBar.items?[i].image = UIImage(named: imageNameForUnselectedState)?.withRenderingMode(.alwaysOriginal)
        }
    }

    let selectedColor   = UIColor(red: 246.0/255.0, green: 155.0/255.0, blue: 13.0/255.0, alpha: 1.0)
    let unselectedColor = UIColor(red: 16.0/255.0, green: 224.0/255.0, blue: 223.0/255.0, alpha: 1.0)

    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: unselectedColor], for: .normal)
    UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: selectedColor], for: .selected)

¡Funcionó para mí!

Answer 18

Swift 3.0

Creé el archivo de clase tabbar y escribí el siguiente código

En viewDidLoad :

   override func tabBar(_ tabBar: UITabBar, didSelect item: UITabBarItem) {

   if(item.title! == "title")
   {
    item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }
    if(item.title! == "title")
    {
        item.selectedImage = UIImage(named: "(Imagname)-a")?.withRenderingMode(.alwaysOriginal)

    }

}

Después de viewDidLoad :

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.magentaColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)

a la vista se cargó el método, debe configurar la imagen seleccionada y otras imágenes se muestran con RenderingMode y en los métodos de delegado de la barra de pestañas, configura la imagen seleccionada según el título