Modifier la couleur sélectionnée de l'élément de la barre d'onglets dans un storyboard


175

Je souhaite que les éléments de ma barre d'onglets soient roses lorsqu'ils sont sélectionnés au lieu du bleu par défaut.

Comment puis-je accomplir cela en utilisant l'éditeur de storyboard dans Xcode 6?

Voici mes paramètres actuels qui ne fonctionnent pas, le fond bleu fonctionne mais le rose ne fonctionne pas:

entrez la description de l'image ici



Cochez cette réponse, cela vous aidera pour la solution: stackoverflow.com/a/58727092/7804300
Talha Ahmed

Réponses:


408

Ajoutez l'attribut Runtime Color nommé "tintColor" depuis StoryBoard. Cela fonctionne ( pour Xcode 8 et supérieur ).

si vous voulez une couleur non sélectionnée .. vous pouvez unselectedItemTintColorégalement en ajouter .

définition de tintColor comme attribut d'exécution


24
cela a fonctionné pour moi lorsque j'ai ajouté cette propriété à UITabBarItem et non à UITabBar.
Sourabh86

1
Mais comment définir la couleur non sélectionnée de l'élément de la barre d'onglets dans le storyboard?
Peter

1
Fonctionne parfaitement pour mon cas - j'ai besoin que mes cinq articles tabBar soient des couleurs uniques lorsqu'ils sont sélectionnés. J'ai pu définir cet attribut d'exécution sur le UITabBarItem, sur le UINavigationControllerconnecté à ma tabBar et cela fonctionne parfaitement. Le tout sans écrire de code, ce qui est génial, car je réutilise une classe VC trois fois. Merci!
rosshump

7
inversement - c'est la seule approche qui fonctionne sur iOS 10 (la teinte du panneau d'attributs semble ne pas fonctionner, et l'attribut d'exécution "tintColor" de uitabbaritem ne fonctionne pas aussi.
luky

5
StackOverflow 1: Apple 0
Sharukh Mastan

175

Cette solution élégante fonctionne parfaitement sur SWIFT 3.0 , SWIFT 4.2 et SWIFT 5.1 :

Sur le storyboard:

  1. Sélectionnez votre barre d'onglets
  2. Définissez un attribut d'exécution appelé tintColor pour la couleur souhaitée de l' icône sélectionnée dans la barre d'onglets
  3. Définissez un attribut d'exécution appelé unselectedItemTintColor pour la couleur souhaitée de l' icône non sélectionnée dans la barre d'onglets

entrez la description de l'image ici

Edit: Travailler avec Xcode 8/10, pour iOS 10/12 et supérieur .


6
Merci beaucoup. unselectedItemTintColor trouve très rare
Rushi trivedi

4
solution parfaite 'unselectedItemTintColor' pour moi merci.
fozoglu

Cela fonctionnera-t-il si la cible de déploiement est 8.0 ou 9.0? J'ai utilisé swift 3.0 et Xcode 8.0 pour le développement
Mamta

2
Important de sélectionner la barre d'onglets, en effet travaillé dans Swift 4 pour moi.
Contre Bulaquena du

2
Excellent! Travailler toujours sur xCode 10 :) ne rafraîchit pas l'éditeur visuel mais fonctionne une fois compilé :)
Mihail Minkov

64

Dans Swift, en utilisant xcode 7 (et version ultérieure), vous pouvez ajouter les éléments suivants à votre fichier AppDelegate.swift:

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

Voici à quoi ressemble la méthode complète:

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
}

Dans l'exemple ci-dessus, mon article sera blanc. Le "/255.0" est nécessaire car il attend une valeur de 0 à 1. Pour le blanc, j'aurais pu juste utiliser 1. Mais pour une autre couleur, vous utiliserez probablement des valeurs RVB.


3
Il semble qu'aucune des autres méthodes ne fonctionne (plus.) Cela fonctionne!
teddy

@Jarrod Je me suis amusé avec ça pendant près d'une heure, cette réponse devrait avoir plus de votes. Merci!
Lance Samaria

53

Sur Xcode8j'ai changé le ImageTintdu storyboard et cela fonctionne bien.

entrez la description de l'image ici

Le résultat:

entrez la description de l'image ici


1
Lors de l'utilisation d'images personnalisées, CECI EST celui qui a fonctionné pour moi
Juanjo

1
Cela devrait être la réponse acceptée. Il ne nécessite pas d'attribut d'exécution, ce qui signifie que cela fonctionne dans les écrans de lancement!
Chris Douglass le

18

Swift 3 | Xcode 10

Si vous souhaitez que tous les éléments de la barre d'onglets aient la même couleur (sélectionnés et non sélectionnés) ...


Étape 1

Assurez-vous que vos ressources d'image sont configurées sur Render As = Template Image . Cela leur permet d'hériter de la couleur.

Actifs Xcode


Étape 2

Utilisez l'éditeur de storyboard pour modifier les paramètres de la barre d'onglets comme suit:

  • Définissez la barre d'onglets: Teinte de l' image sur la couleur dont vous voulez que l'icône sélectionnée hérite.
  • Définissez Tab Bar: Bar Tint sur la couleur souhaitée pour la barre d'onglets.
  • Définir la vue: Teintez la couleur que vous souhaitez voir dans l'éditeur de storyboard, cela n'affecte pas la couleur de l'icône lorsque votre application est exécutée.

Éditeur de storyboard Xcode


Étape 3

Les étapes 1 et 2 changeront la couleur de l'icône sélectionnée. Si vous souhaitez toujours changer la couleur des éléments non sélectionnés, vous devez le faire dans le code. Je n'ai pas trouvé de moyen de le faire via l'éditeur de storyboard.

Créer une classe de contrôleur de barre d'onglets personnalisée ...

//  TabBarController.swift

class TabBarController: UITabBarController {

    override func viewDidLoad() {
        super.viewDidLoad()

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

... et attribuez la classe personnalisée à votre contrôleur de scène de la barre d'onglets.

Éditeur de storyboard Xcode


Si vous trouvez comment changer la couleur de l'icône non sélectionnée via l'éditeur de storyboard, veuillez m'en informer. Merci!


self.tabBar.unselectedItemTintColor = UIColor.white self.tabBar.tintColor = #colorLiteral(red: 0.2, green: 0.7333333333, blue: 0.3450980392, alpha: 1) Travaille pour moi
Wahab Khan Jadon

9

placez ce code dans le viewDidLoad du contrôleur de vue dont vous souhaitez changer la couleur

[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];

1
N'y a-t-il aucun moyen de changer pour tous les onglets?
Deekor

Il suffit de mettre le code de la même couleur dans la vue pour charger tous vos onglets
Nick

vous pouvez utiliser ce code juste après avoir créé votre UITabController, il définira la couleur que vous avez mentionnée pour tous les éléments de l'onglet lors de la sélection.
Jerrin

Il n'y a pas de méthode de ce type setSelectedImageTintColor
Madhu Avinash

8

Vous pouvez également définir la couleur de teinte de la barre d'image sélectionnée par chemin de clé:

entrez la description de l'image ici

J'espère que ceci vous aidera!! Merci


dans iOS 9, il ne change pas la couleur non sélectionnée
Saeed Rahmatolahi

Comment cela aiderait-il à changer la couleur de l'icône UITabBar?
Madhu Avinash

7

XCode 8.2, iOS 10, Swift 3: il y a maintenant un unselectedItemTintColorattribut pour tabBar:

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

6

Vous pouvez changer les couleurs UITabBarItem par storyboard mais si vous voulez changer les couleurs par code, c'est très simple:

// Utilisez ceci pour changer la couleur de la barre sélectionnée

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

// Ceci pour modifier la barre non sélectionnée (iOS 10)

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

// Et cette ligne pour changer la couleur de toute la barre d'onglets

   [[UITabBar appearance] setBarTintColor:[UIColor whiteColor]];

setUnselectedItemTintColor est pour seulement iOS 10
ondermerol

5

D'une manière ou d'une autre, nous ne sommes pas en mesure de modifier la couleur de teinte de l'élément sélectionné dans la barre d'onglets en utilisant uniquement le storyboard, c'est pourquoi j'ai ajouté le code ci-dessous dans mon ViewDidLoad, j'espère que cela vous aidera.

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

5

Ajoutez ce code dans votre fonction délégué d'application -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) )

mettre le RVB de la couleur souhaitée


4

Voici la solution dans Swift 3 qui fonctionne sous iOS 10:

Tout d'abord, vous créez votre propre sous-classe de contrôleur de barre d'onglets et l'ajoutez à votre contrôleur d'onglets dans votre storyboard. Dans la viewDidLoad()méthode, vous pouvez ensuite personnaliser la barre d'onglets. Il faut préciser ici que l' tintColorattribut de tabBarreprésente la couleur de l'élément sélectionné et non la couleur de l'élément non sélectionné! Afin de changer la couleur des éléments non sélectionnés, je recommande de parcourir chaque élément en boucle et d'utiliser les couleurs d'origine de vos images, afin qu'elles ne soient pas rendues automatiquement en gris.

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

Le seul inconvénient de cette approche est que les images de vos articles doivent déjà avoir la couleur souhaitée que vous visez.


Compliqué. La réponse de Jarrod fonctionne bien avec toutes les icônes.
Jose Ramirez

4

Cette meilleure façon est de changer Image Tintde storyboard


2

Vous pouvez sous-classer le UITabBarControlleret remplacer celui par lui dans le storyboard. Dans votre viewDidLoadimplémentation de sous-classe, appelez ceci:

[self.tabBar setTintColor:[UIColor greenColor]];

obtenir:'UITabBar' does not have a member named 'setSelectedImageTintColor'
Deekor

J'utilise aussi Swift alors je mets: self.tabBar.setSelectedImageTintColor = UIColor.greenColor ne sais pas si c'est correct ou non
Deekor

2
@Deekor ce n'est tintColorpas le cas selectedImageTintColor, btw selectedImageTintColorest obsolète dans iOS 8.
ChancyWu
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.