Cambiar el color seleccionado del elemento de la barra de pestañas en un guión gráfico

175

Quiero cambiar mis elementos de la barra de pestañas para que sean rosas cuando se seleccionen en lugar del azul predeterminado.

¿Cómo puedo lograr esto usando el editor de guiones gráficos en Xcode 6?

Aquí está mi configuración actual que no funciona, el fondo azul funciona pero el rosa no funciona:

ingrese la descripción de la imagen aquí

Deekor
fuente
¡Posible duplicado de tab-bar-item-tint-color !
Usuario31
Comprueba esta respuesta, te ayudará a encontrar la solución: stackoverflow.com/a/58727092/7804300
Talha Ahmed

Respuestas:

408

Agregue el atributo Color de tiempo de ejecución denominado "tintColor" de StoryBoard. Esto está funcionando ( para Xcode 8 y superior ).

si desea un color no seleccionado ... también puede agregarlo unselectedItemTintColor.

establecer tintColor como atributo de tiempo de ejecución

Mehul Thakkar
fuente
24
funcionó para mí cuando agregué esta propiedad a UITabBarItem y no a UITabBar.
Sourabh86
1
Pero, ¿cómo se configura el color de la barra de pestañas Color no seleccionado en el guión gráfico?
Peter
1
Funciona perfecto para mi caso: necesito que mis cinco elementos tabBar sean colores únicos cuando se seleccionan. Pude establecer este atributo de tiempo de ejecución en UITabBarItem, en el UINavigationControllerconectado a mi tabBar y funciona sin problemas. Todo sin escribir ningún código también, lo cual es genial, ya que estoy reutilizando una clase de VC tres veces. ¡Gracias!
rosshump
77
por el contrario - este es el único método que funciona en iOS 10 (tinte del panel de atributos parece que no funciona, y el atributo de tiempo de ejecución "tintColor" de uitabbaritem no funciona demasiado.
Luky
55
StackOverflow 1: Apple 0
Sharukh Mastan
175

Esta elegante solución funciona muy bien en SWIFT 3.0 , SWIFT 4.2 y SWIFT 5.1 :

En el guión gráfico:

  1. Seleccione su barra de pestañas
  2. Establezca un atributo de tiempo de ejecución llamado tintColor para el color deseado del icono seleccionado en la barra de pestañas
  3. Establezca un atributo de tiempo de ejecución llamado unselectedItemTintColor para el color deseado del icono no seleccionado en la barra de pestañas

ingrese la descripción de la imagen aquí

Editar: Trabajar con Xcode 8/10, para iOS 10/12 y superior .

Marcelo Gracietti
fuente
66
Muchas gracias. unselectedItemTintColor encuentra muy raro
Rushi trivedi
44
La solución perfecta 'unselectedItemTintColor' para mí, gracias.
fozoglu
¿Funcionará si el objetivo de implementación es 8.0 o 9.0? He usado swift 3.0 y Xcode 8.0 para el desarrollo
Mamta
2
Importante para seleccionar la barra de pestañas, de hecho funcionó en Swift 4 para mí.
Contras Bulaquena
2
¡Excelente! Todavía trabajando en xCode 10 :) no actualiza el editor visual pero funciona una vez compilado :)
Mihail Minkov
64

En Swift, usando xcode 7 (y posterior), puede agregar lo siguiente a su archivo AppDelegate.swift:

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

Así es como se ve el método completo:

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

    // I added this line
    UITabBar.appearance().tintColor = UIColor(red: 255/255.0, green: 255/255.0, blue: 255/255.0, alpha: 1.0)

    return true
}

En el ejemplo anterior, mi artículo será blanco. Se necesita "/255.0" porque espera un valor de 0 a 1. Para el blanco, podría haber usado 1. Pero para otro color probablemente usará valores RGB.

Jarrod
fuente
3
Parece que ninguno de los otros métodos funciona (más). ¡Esto funciona!
teddy
@Jarrod Estuve jugando con esto durante casi 1 hora, esta respuesta debería tener más votos. ¡Gracias!
Lance Samaria
53

En Xcode8He cambiado el ImageTintdel guión gráfico y funciona bien.

ingrese la descripción de la imagen aquí

El resultado:

ingrese la descripción de la imagen aquí

Francisco Romero
fuente
1
Cuando uso imágenes personalizadas ESTE es el que me funcionó
Juanjo
1
Esta debería ser la respuesta aceptada. ¡No requiere un atributo de tiempo de ejecución, lo que significa que esto funciona en las pantallas de inicio!
Chris Douglass
18

Swift 3 | Xcode 10

Si desea que todos los elementos de la barra de pestañas tengan el mismo color (seleccionados y no seleccionados) ...


Paso 1

Asegúrese de que los recursos de su imagen estén configurados para Renderizar como = Imagen de plantilla . Esto les permite heredar el color.

Xcode Assets


Paso 2

Use el editor de guiones gráficos para cambiar la configuración de la barra de pestañas de la siguiente manera:

  • Establezca la barra de pestañas: Tinte de imagen en el color que desea que herede el icono seleccionado.
  • Establecer barra de pestañas: Tinte de barra al color que desea que tenga la barra de pestañas.
  • Establezca Ver: tinte al color que desea ver en el editor del guión gráfico, esto no afecta el color del icono cuando se ejecuta su aplicación.

Xcode Storyboard Editor


Paso 3

Los pasos 1 y 2 cambiarán el color del icono seleccionado. Si aún desea cambiar el color de los elementos no seleccionados, debe hacerlo en código. No he encontrado una manera de hacerlo a través del editor del guión gráfico.

Crear una clase de controlador de barra de pestañas personalizada ...

//  TabBarController.swift

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // make unselected icons white
        self.tabBar.unselectedItemTintColor = UIColor.white
    }
}

... y asigne la clase personalizada al controlador de escena de la barra de pestañas.

Xcode Storyboard Editor


Si descubre cómo cambiar el color del icono no seleccionado a través del editor del guión gráfico, avíseme. ¡Gracias!

Derek Soike
fuente
self.tabBar.unselectedItemTintColor = UIColor.white self.tabBar.tintColor = #colorLiteral(red: 0.2, green: 0.7333333333, blue: 0.3450980392, alpha: 1) Trabaja para mí
Wahab Khan Jadon
9

ponga este código en viewDidLoad del controlador de vista del que desea cambiar el color

[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];
Mella
fuente
1
¿No hay forma de cambiar todas las pestañas?
Deekor
Solo coloque el código con el mismo color en la vista que cargó todas sus pestañas
Nick
puede usar este código justo después de hacer su UITabController, establecerá el color que mencionó para todos los elementos de pestaña en la selección.
Jerrin
No existe tal método setSelectedImageTintColor
Madhu Avinash
8

También puede establecer el color de tinte de la barra de imagen seleccionado por la ruta de la tecla:

ingrese la descripción de la imagen aquí

¡¡Espero que esto te ayudará!! Gracias

Arvind Kumar
fuente
en iOS 9 no cambia el color no seleccionado
Saeed Rahmatolahi
¿Cómo ayudaría eso a cambiar el color del icono de UITabBar?
Madhu Avinash
7

XCode 8.2, iOS 10, Swift 3: ahora hay un unselectedItemTintColoratributo para tabBar:

self.tabBar.unselectedItemTintColor = UIColor(red: 0/255.0, green: 200/255.0, blue: 0/255.0, alpha: 1.0)
ComboPrime
fuente
6

Puede cambiar los colores UITabBarItem por storyboard, pero si desea cambiar los colores por código, es muy fácil:

// Use esto para cambiar el color de la barra seleccionada

   [[UITabBar appearance] setTintColor:[UIColor blueColor]];

// Esto para cambiar la barra no seleccionada (iOS 10)

   [[UITabBar appearance] setUnselectedItemTintColor:[UIColor yellowColor]];

// Y esta línea para cambiar el color de todas las pestañas

   [[UITabBar appearance] setBarTintColor:[UIColor whiteColor]];
Genevios
fuente
setUnselectedItemTintColor es solo para iOS 10
ondermerol
5

De alguna manera, no podemos cambiar el color de tinte del elemento seleccionado de la barra de pestañas usando el guión gráfico solo, por lo tanto, agregué el siguiente código en mi ViewDidLoad, espero que esto ayude.

[[UITabBar appearance] setTintColor:[UIColor whiteColor]]; 
skypirate
fuente
5

Agregue este código en la función delegado de su aplicación -did_finish_launching_with_options

UITabBar.appearance().tintColor = UIColor( red: CGFloat(255/255.0), green: CGFloat(99/255.0), blue: CGFloat(95/255.0), alpha: CGFloat(1.0) )

pon el RGB del color requerido

SHINTO JOSEPH
fuente
4

Esta es la solución en Swift 3 que funciona en iOS 10:

En primer lugar, crea su propia subclase de controlador de barra de pestañas y la agrega a su controlador de pestañas en su guión gráfico. En el viewDidLoad()método, puede personalizar la barra de pestañas. ¡Debe señalarse aquí que el tintColoratributo de tabBarrepresenta el color del elemento seleccionado, no el color de los elementos no seleccionados! Para cambiar el color de los elementos no seleccionados, recomiendo recorrer cada elemento y usar los colores originales de sus imágenes, para que no se muestren en gris automáticamente.

class CustomTabBarVC: UITabBarController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()

        self.tabBar.tintColor = AppColor.normalRed
        self.tabBar.barTintColor = .white
        self.tabBar.isTranslucent = true

        if let items = self.tabBar.items
        {
            for item in items
            {
                if let image = item.image
                {
                    item.image = image.withRenderingMode( .alwaysOriginal )
                }
            }
        }
    }
}

El único inconveniente de este enfoque es que las imágenes de sus elementos ya deben tener el color deseado al que apunta.

arauter
fuente
Complicado. La respuesta de Jarrod funciona bien con todos los íconos.
Jose Ramirez
4

Esta mejor manera es cambiar Image Tinten el guión gráfico

Jadiano
fuente
2

Puede subclasificar el UITabBarControllery reemplazar el que está en el guión gráfico. En su viewDidLoadimplementación de la subclase, llame a esto:

[self.tabBar setTintColor:[UIColor greenColor]];
chancyWu
fuente
obteniendo:'UITabBar' does not have a member named 'setSelectedImageTintColor'
Deekor
También estoy usando Swift, así que pongo: self.tabBar.setSelectedImageTintColor = UIColor.greenColorno estoy seguro de si eso es correcto o no
Deekor
2
@Deekor es tintColorno selectedImageTintColor, por cierto selectedImageTintColorestá en desuso en iOS 8.
chancyWu