web-dev-qa-db-fra.com

Changer la teinte/couleur de fond de UITabBar

UINavigationBar et UISearchBar ont tous deux une propriété tintColor qui vous permet de changer la couleur de teinte (surprenant, je sais) de ces deux éléments. Je veux faire la même chose à UITabBar dans mon application, mais j'ai maintenant trouvé le moyen de le changer à partir de la couleur noire par défaut. Des idées?

86
pixel

J'ai pu le faire fonctionner en sous-classant un UITabBarController et en utilisant des classes privées:

@interface UITabBarController (private)
- (UITabBar *)tabBar;
@end

@implementation CustomUITabBarController


- (void)viewDidLoad {
    [super viewDidLoad];

    CGRect frame = CGRectMake(0.0, 0.0, self.view.bounds.size.width, 48);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    [v setBackgroundColor:kMainColor];
    [v setAlpha:0.5];
    [[self tabBar] addSubview:v];
    [v release];

}
@end
48
coneybeare

iOS 5 a ajouté de nouvelles méthodes d'apparence pour personnaliser l'apparence de la plupart des éléments d'interface utilisateur.

Vous pouvez cibler chaque instance d'un UITabBar dans votre application à l'aide du proxy d'apparence. 

Pour iOS 5 + 6:

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

Pour iOS 7 et versions ultérieures, veuillez utiliser les éléments suivants:

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

L'utilisation du proxy d'apparence modifiera n'importe quelle instance de la barre d'onglets dans l'application. Pour une instance spécifique, utilisez l'une des nouvelles propriétés de cette classe:

UIColor *tintColor; // iOS 5+6
UIColor *barTintColor; // iOS 7+
UIColor *selectedImageTintColor;
UIImage *backgroundImage;
UIImage *selectionIndicatorImage;
104
imnk

J'ai un addendum à la réponse finale. Bien que le schéma essentiel soit correct, l'utilisation d'une couleur partiellement transparente peut être améliorée. Je suppose que c'est uniquement pour laisser transparaître le dégradé par défaut. Oh, aussi, la hauteur de la barre de tabulation est de 49 pixels au lieu de 48, du moins sous OS 3.

Donc, si vous avez une image 1 x 49 appropriée avec un dégradé, voici la version de viewDidLoad que vous devriez utiliser:

- (void)viewDidLoad {

    [super viewDidLoad]; 

    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *v = [[UIView alloc] initWithFrame:frame];
    UIImage *i = [UIImage imageNamed:@"GO-21-TabBarColorx49.png"];
    UIColor *c = [[UIColor alloc] initWithPatternImage:i];
    v.backgroundColor = c;
    [c release];
    [[self tabBar] addSubview:v];
    [v release];

}
34
pabugeater

Lorsque vous utilisez simplement addSubview, vos boutons perdent la possibilité de clic, donc au lieu de

[[self tabBar] addSubview:v];

utilisation:

[[self tabBar] insertSubview:v atIndex:0];
27
Marcin Zbijowski

Sur iOS 7:

[[UITabBar appearance] setBarTintColor:[UIColor colorWithRed:(38.0/255.0) green:(38.0/255.0) blue:(38.0/255.0) alpha:1.0]];

Je recommande également de régler d'abord en fonction de vos désirs visuels:

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

Le style de barre crée un séparateur subtil entre le contenu de votre vue et votre barre d’onglet.

7
capikaw

Il n'y a pas de moyen simple de le faire, vous devez en principe sous-classer UITabBar et implémenter un dessin personnalisé pour faire ce que vous voulez. C'est un peu de travail pour l'effet, mais ça peut en valoir la peine. Je recommande de déposer un bogue avec Apple pour l’ajouter à un futur SDK pour iPhone.

7
Louis Gerbarg

Ce qui suit est la solution parfaite pour cela. Cela fonctionne bien avec moi pour iOS5 et iOS4.

//---- For providing background image to tabbar
UITabBar *tabBar = [tabBarController tabBar]; 

if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}
7
Gaurav

[[self tabBar] insertSubview:v atIndex:0]; fonctionne parfaitement pour moi.

5
jimmy

pour moi, il est très simple de changer la couleur de la barre de tabulation comme: -

[self.TabBarController.tabBar setTintColor:[UIColor colorWithRed:0.1294 green:0.5686 blue:0.8353 alpha:1.0]];


[self.TabBarController.tabBar setTintColor:[UIColor "YOUR COLOR"];

Essaye ça!!!

5
Muhammad Rizwan
 [[UITabBar appearance] setTintColor:[UIColor redColor]];
 [[UITabBar appearance] setBarTintColor:[UIColor yellowColor]];
3
Hsm

juste pour la couleur de fond  

Tabbarcontroller.tabBar.barTintColor=[UIColor redcolour];

ou ceci dans App Delegate

[[UITabBar appearance] setBackgroundColor:[UIColor blackColor]];

pour changer la couleur des icônes de désélection de la barre de tabulation  

Pour iOS 10:

// this code need to be placed on home page of tabbar    
for(UITabBarItem *item in self.tabBarController.tabBar.items) {
    item.image = [item.image imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
}

Au-dessus de iOS 10:

// this need to be in appdelegate didFinishLaunchingWithOptions
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor blackColor]];
2
Vaibhav Gaikwad
[v setBackgroundColor ColorwithRed: Green: Blue: ];
1
jlthero

Il existe quelques bonnes idées dans les réponses existantes, beaucoup fonctionnent de manière légèrement différente et ce que vous choisirez dépendra également des appareils que vous ciblez et du type de look que vous souhaitez obtenir. UITabBar est notoirement peu intuitif pour personnaliser son apparence, mais voici quelques astuces supplémentaires qui pourraient vous aider:

1). Si vous souhaitez vous débarrasser de la superposition brillante pour un aspect plus plat, faites:

tabBar.backgroundColor = [UIColor darkGrayColor]; // this will be your background
[tabBar.subviews[0] removeFromSuperview]; // this gets rid of gloss

2) Pour définir des images personnalisées sur les boutons TabBar, procédez comme suit:

for (UITabBarItem *item in tabBar.items){
    [item setFinishedSelectedImage:selected withFinishedUnselectedImage:unselected];
    [item setImageInsets:UIEdgeInsetsMake(6, 0, -6, 0)];
}

selected et unselected sont des objets UIImage de votre choix. Si vous souhaitez qu’elles soient de couleur unie, la solution la plus simple que j’ai trouvée est de créer une UIView avec la backgroundColor désirée, puis de la transformer en une UIImage à l’aide de QuartzCore. J'utilise la méthode suivante dans une catégorie sur UIView pour obtenir un UIImage avec le contenu de la vue:

- (UIImage *)getImage {
    UIGraphicsBeginImageContextWithOptions(self.bounds.size, NO, [[UIScreen mainScreen]scale]);
    [[self layer] renderInContext:UIGraphicsGetCurrentContext()];
    UIImage *viewImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return viewImage;
}

3) Enfin, vous voudrez peut-être personnaliser le style des titres des boutons. Faire:

for (UITabBarItem *item in tabBar.items){
    [item setTitleTextAttributes: [NSDictionary dictionaryWithObjectsAndKeys:
                [UIColor redColor], UITextAttributeTextColor,
                [UIColor whiteColor], UITextAttributeTextShadowColor,
                [NSValue valueWithUIOffset:UIOffsetMake(0, 1)], UITextAttributeTextShadowOffset,
                [UIFont boldSystemFontOfSize:18], UITextAttributeFont,
            nil] forState:UIControlStateNormal];
}

Cela vous permet de faire quelques ajustements, mais reste assez limité. En particulier, vous ne pouvez pas librement modifier l’emplacement du texte dans le bouton, ni avoir des couleurs différentes pour les boutons sélectionnés/non sélectionnés. Si vous souhaitez créer une mise en page plus spécifique, définissez simplement UITextAttributeTextColor pour qu'il soit clair et ajoutez votre texte aux images selected et unselected de la partie (2).

1
SaltyNuts

Réponse de Swift 3.0: (de Vaibhav Gaikwad)

Pour changer la couleur des icônes de désélection de la barre de tabulation:

if #available(iOS 10.0, *) {
        UITabBar.appearance().unselectedItemTintColor = UIColor.white
    } else {
        // Fallback on earlier versions
        for item in self.tabBar.items! {
            item.image = item.image?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        }
}

Pour changer la couleur du texte uniquement:

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

UITabBarItem.appearance().setTitleTextAttributes([NSForegroundColorAttributeName: UIColor.red, for: .selected)
0
odemolliens

Une autre solution (qui est un hack) consiste à définir l'alpha sur le tabBarController à 0,01 pour qu'il soit pratiquement invisible, mais toujours cliquable. Ensuite, définissez un contrôle ImageView au bas de la nib MainWindow avec votre image de barre de tabulation personnalisée sous le tabBarCOntroller alpha. Ensuite, permutez les images, changez les couleurs ou mettez en surbrillance lorsque tabbarcontroller change de vue. 

Cependant, vous perdez le '... plus' et personnalisez les fonctionnalités.

0
user855723
if ([tabBar respondsToSelector:@selector(setBackgroundImage:)]) {
    // ios 5 code here
    [tabBar setBackgroundImage:[UIImage imageNamed:@"image.png"]];
} 
else {
    // ios 4 code here
    CGRect frame = CGRectMake(0, 0, 480, 49);
    UIView *tabbg_view = [[UIView alloc] initWithFrame:frame];
    UIImage *tabbag_image = [UIImage imageNamed:@"image.png"];
    UIColor *tabbg_color = [[UIColor alloc] initWithPatternImage:tabbag_image];
    tabbg_view.backgroundColor = tabbg_color;
    [tabBar insertSubview:tabbg_view atIndex:0];
}
0
user1049755

Bonjour, je suis en train d’utiliser iOS SDK 4 et j’ai réussi à résoudre ce problème avec seulement deux lignes de code et c’est comme ça

tBar.backgroundColor = [UIColor clearColor];
tBar.backgroundImage = [UIImage imageNamed:@"your-png-image.png"];

J'espère que cela t'aides! 

0