Modification de l'image et de la couleur du text de la barre d'tabs iOS

Voici ma barre d'tabs:

entrez la description de l'image ici

L'image suivante montre le programme en cours d'exécution et l'élément "NEWS" sélectionné:

entrez la description de l'image ici

Il est clair que la couleur de la barre fonctionne bien comme je veux!

Mais le tintColor n'affecte que l'image et non le text.

Aussi, quand un article est sélectionné (comme vu ci-dessus, des nouvelles) la couleur de l'article devient bleu! Comment puis-je empêcher cela? Je veux que ça rest blanc.

Pourquoi le text change-t-il en blanc lorsqu'il est sélectionné mais pas quand il n'est pas sélectionné?

Je veux essentiellement que la couleur et la couleur du text soient blanches tout le time.

Comment puis-je y parvenir? Merci pour toute aide.

Faut-il un code rapide pour chaque article individuel?

MODIFIER:

entrez la description de l'image ici

A partir des docs de class UITabBarItem:

Par défaut, les images non sélectionnées et sélectionnées sont automatiquement créées à partir des valeurs alpha des images source. Pour empêcher la coloration du système, fournissez des images avec UIImageRenderingModeAlwaysOriginal.

L'indice n'est pas si vous utilisez UIImageRenderingModeAlwaysOriginal, l'important est de savoir quand l'utiliser.

Pour éviter la couleur grise des éléments non sélectionnés, vous devrez juste empêcher la coloration du système pour l'image non sélectionnée. Voici comment faire ceci:

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 

Comme vous pouvez le voir, j'ai demandé à iOS d'appliquer la couleur d'origine (blanc, jaune, rouge, peu importe) de l'image UNIQUEMENT pour l'état NON SÉLECTIONNÉ et de laisser l'image telle quelle pour l'état SÉLECTIONNÉ.

En outre, vous devrez peut-être append une couleur de teinte pour la barre d'tabs afin d'appliquer une couleur différente pour l'état SÉLECTIONNÉ (au lieu de la couleur bleue par défaut d'iOS). Selon votre capture d'écran ci-dessus, vous appliquez la couleur blanche pour l'état sélectionné:

 self.tabBar.tintColor = UIColor.whiteColor() 

MODIFIER:

entrez la description de l'image ici

Swift 3

Je l'ai fait en créant un controller de tabulation personnalisé et ajouté ce code dans la méthode 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().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: unselectedColor], for: .normal) UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: selectedColor], for: .selected) 

Cela a fonctionné pour moi!

entrez la description de l'image ici

Swift par programme:

Pour l'image:

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

ForText:

 UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: UIColor.grayColor()], forState:.Normal) UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: UIColor.redColor()], forState:.Selected) 

Swift 3

Cela a fonctionné pour moi (en se référant aux colors de l'image set tabBarItems):

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

J'ai remarqué que si vous définissez l'image avec le mode de rendu = .alwaysOriginal, l'UITabBar.tintColor n'a aucun effet.

Swift 3

Tout d'abord, assurez-vous que vous avez ajouté la touche BOOLEAN "Afficher l'apparence de la barre d'état basée sur le controller" sur Info.plist, et réglez la valeur sur "NON".

Appdelegate.swift

Insérer du code quelque part après "launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {"

  1. Changez la couleur de la barre d'tabs elle-même avec la valeur de couleur RVB:

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

OU l'une des colors de l'interface user par défaut:

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


  1. Changez la couleur du text des éléments de l'onglet:

L'élément sélectionné

UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: UIColor.white], for: .selected)

Les éléments inactifs

UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: UIColor.black], for: .normal)

  1. Pour changer la couleur de l'image, je crois que l'approche la plus simple consiste à faire des images séparées, une pour chaque état.

Si vous ne faites pas les icons à partir de zéro, l'alternance des versions en noir et blanc est relativement facile à faire dans Photoshop.


Adobe Photoshop (presque n'importe quelle version fera l'affaire)

Assurez-vous que l'image de votre icône a un arrière-plan transparent et que l'icône elle-même est noire (ou fermée).

Ouvrez le file image, enregistrez-le sous un nom de file différent (par exemple exampleFilename-Inverted.png)

Dans le sous-menu "Ajustements" du menu "Image":

Cliquez sur "Inverser"

Vous avez maintenant un négatif de votre icône d'origine.

Dans XCode, définissez l'une des images en tant que "Image sélectionnée" sous les propriétés de la barre d'tabs dans votre storyboard, et spécifiez la version "inactive" sous l'image "Bar Item".

Ta-Da 🍺

Essayez de l'append sur AppDelegate.swift (à l'intérieur de la méthode d' application ):

 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) 

Exemple:

 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 } 

Exemple:

entrez la description de l'image ici

entrez la description de l'image ici

Mon anglais est si mauvais! Je suis désolé! 🙂

Swift 3.0

J'ai créé le file de class tabbar et écrit le code suivant

Dans viewDidLoad :

 self.tabBar.barTintColor = UIColor.white self.tabBar.isTranslucent = true let selectedColor = UIColor.red let unselectedColor = UIColor.cyan UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: unselectedColor,NSFontAtsortingbuteName: UIFont(name: "Gotham-Book", size: 10)!], for: .normal) UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: selectedColor,NSFontAtsortingbuteName: 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) } } } 

Après 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) } } 

en vue did méthode de chargement, vous devez définir l'image sélectionnée et l'autre image sont affichés avec RenderingMode et dans la barre d'tabs déléguer les methods que vous définissez l'image sélectionnée selon le titre

vous pouvez définir tintColor de UIBarItem:

 UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: UIColor.magentaColor()], forState:.Normal) UITabBarItem.appearance().setTitleTextAtsortingbutes([NSForegroundColorAtsortingbuteName: UIColor.redColor()], forState:.Selected) 

D' ici

Chaque élément de la barre d'tabs a un titre, une image sélectionnée, une image non sélectionnée et une valeur de badge.

Utilisez le champ Teinte de l'image (selectedImageTintColor) pour spécifier la couleur de la teinte de l'élément de la barre lorsque cet onglet est sélectionné. Par défaut, cette couleur est bleue.

Ajoutez simplement une nouvelle reference UITabBarController au projet. Créez ensuite une reference de UITabBar dans ce controller:

 @IBOutlet weak var appTabBar: UITabBar! 

Dans son viewDidLoad () , ajoutez simplement ci-dessous la couleur du text du titre :

  appTabBar.tintColor = UIColor.scandidThemeColor() 

Pour l'image

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