Modification de l'image de l'élément de la barre d'onglets et de la couleur du texte iOS
Voici ma barre d'onglets:
L'image suivante montre le programme en cours d'exécution et l'élément "NEWS" sélectionné:
Il est clair que la couleur de la teinte du bar fonctionne bien comme je le veux!
Mais la teinteCouleur n'affecte que l'image et pas le texte.
En outre, lorsque l'élément est sélectionné (comme on le voit ci-dessus, nouvelles), la couleur de l'élément devient bleue! Comment puis-je empêcher que cela se produise? Je veux que ça reste blanc.
Pourquoi le texte passe-t-il à une couleur blanche lorsqu'il est sélectionné, mais pas lorsqu'il est désélectionné?
Je veux fondamentalement que la couleur de l'article et la couleur du texte soient blanches tout le temps.
Comment est-ce que je réalise ceci? Merci pour toute aide.
Un code Swift est-il nécessaire pour chaque article?
MODIFIER:
De la classe UITabBarItem:
Par défaut, les images réelles non sélectionnées et sélectionnées sont créé automatiquement à partir des valeurs alpha dans les images source. À empêcher la coloration du système, fournissez aux images UIImageRenderingModeAlwaysOriginal.
L'indice n'est pas de savoir si vous utilisez UIImageRenderingModeAlwaysOriginal, l'important est de savoir quand l'utiliser.
Pour empêcher la couleur grise des éléments non sélectionnés, il vous suffira d'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 constater, 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 qu'elle était pour l'état SÉLECTIONNÉ.
En outre, vous devrez peut-être ajouter une couleur de teinte à la barre d'onglets pour appliquer une couleur différente à l'état SELECTED (au lieu de la couleur bleue iOS par défaut). Conformément à votre capture d'écran ci-dessus, vous appliquez une couleur blanche pour l'état sélectionné:
self.tabBar.tintColor = UIColor.whiteColor()
MODIFIER:
Swift 3
Je l'ai fait en créant un contrôleur de barre de tabulation personnalisé et en ajoutant 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().setTitleTextAttributes([NSForegroundColorAttributeName: unselectedColor], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: selectedColor], for: .selected)
Cela a fonctionné pour moi!
Rapide
Pour l'image:
custom.tabBarItem = UITabBarItem(title: "Home", image: UIImage(named: "tab_icon_normal"), selectedImage: UIImage(named: "tab_icon_seelcted"))
Pour le texte:
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.grayColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)
Swift 4.2 et Xcode 10
La solution qui a fonctionné pour moi:
- Configuration de l'image - à partir du scénarimage, image d'élément de barre et image sélectionnée. Pour supprimer la superposition de teinte sur les images, accédez au catalogue Actifs, sélectionnez l'image et modifiez son mode de rendu de la manière suivante:
Cela empêchera le composant Barre de tabulation de définir sa teinte d'image par défaut.
Text - ici, j'ai créé une simple sous-classe UITabBarController et dans sa méthode viewDidLoad, j'ai personnalisé la couleur de texte par défaut et sélectionnée de la manière suivante:
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) } }
Il suffit de définir cette classe comme classe personnalisée de votre contrôleur de barre d’onglet dans l’inspecteur d’identité dans IB.
Voila! C'est tout.
Swift 3
Cela a fonctionné pour moi (en référence à la définition des couleurs de l’image 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 image avec le mode de rendu = .alwaysOriginal, UITabBar.tintColor n'a aucun effet.
Essayez de l'ajouter à la méthode AppDelegate.Swift (dans la méthode 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:
Mon anglais est si mauvais! Je suis désolé! :-)
Swift 4: dans votre UITabBarController, changez-le avec ce code
tabBar.unselectedItemTintColor = .black
Swift 3.0
J'ai créé le fichier de classe 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().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)
}
}
}
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 de charger la méthode, vous devez définir l'image sélectionnée et les autres images sont affichées avec RenderingMode et dans les méthodes de délégation de la barre d'onglets vous définissez l'image sélectionnée selon le titre.
vous pouvez définir la teinteCouleur de UIBarItem:
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.magentaColor()], forState:.Normal)
UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.redColor()], forState:.Selected)
Ce code fonctionne pour Swift 4 si vous souhaitez modifier l’image de l’élément de la barre de tabulation lorsque vous appuyez dessus . Copier et coller dans la première méthode viewDidLoad qui est affichée dans le projet
let arrayOfImageNameForSelectedState: [String] = ["Image1Color", "Image2Color", "Image3Color"] let arrayOfImageNameForUnselectedState: [String] = ["Image1NoColor", "Image2NoColor", "Image3NoColor"]
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)
}
}
Pour Swift 4.0 , il est maintenant modifié en tant que:
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.gray], for: .normal)
tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor: UIColor.blue], for: .selected)
Vous n'avez pas besoin de sous-classer UITabBarItem si votre exigence est uniquement de changer la couleur du texte. Il suffit de placer le code ci-dessus dans la fonction viewDidLoad de votre contrôleur de vue.
Pour les paramètres globaux, remplacez tabBarItem par UITabBarItem.appearance().
Vous pouvez aussi faire de cette façon:
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)
}
Optionnel:
UITabBar.appearance().tintColor = UIColor.red
J'espère que cela vous aidera.
Je sais qu'il y a beaucoup de réponses mais je ne trouve pas de réponse copier/coller simple et valide pour Swift 4.2
tabBarController?.tabBar.tintColor = UIColor.red
tabBarController?.tabBar.unselectedItemTintColor = UIColor.green
Ou utilisez UITabBarItem.appearance() au lieu de tabBarController?.tabBar
Les images doivent être UIImageRenderingModeAlwaysTemplate
Dans Swift 4.2:
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.white], for: .normal)
UITabBarItem.appearance().setTitleTextAttributes([NSAttributedString.Key.foregroundColor: UIColor.red], for: .selected)
De ici .
Chaque élément de la barre d'onglets 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 teinte de l’élément de barre lorsque cet onglet est sélectionné. Par défaut, cette couleur est le bleu.
Sous-classe votre TabbarViewController et dans ViewDidLoad mettez ce code:
[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];
C'est la solution de travail la plus simple que j'ai
Ajoutez simplement une nouvelle référence UITabBarController au projet. Ensuite, créez une référence de UITabBar dans ce contrôleur:
@IBOutlet weak var appTabBar: UITabBar!
Dans son viewDidLoad () , ajoutez simplement ci-dessous pour couleur du texte du titre :
appTabBar.tintColor = UIColor.scandidThemeColor()
Pour l'image
tabBarItem = UITabBarItem(title: "FirstTab", image: UIImage(named: "firstImage"), selectedImage: UIImage(named: "firstSelectedImage"))