Modification de la teinte / couleur d'arrière-plan de UITabBar


87

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


Ce sont d'excellentes réponses. Si vous autorisez l'autorotation, il est utile de définir le masque de redimensionnement automatique de la sous-vue pour avoir des marges et une taille flexibles, sinon le nouvel arrière-plan ne sera pas redimensionné avec la barre d'onglets.
pmdj

Réponses:


47

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

1
C'est une sorte de solution étrange en ce sens qu'elle place simplement un rectangle brun semi-transparent au-dessus de la barre d'onglets. Le problème est que tous les boutons sont devenus bruns, pas seulement l'arrière-plan. Cependant, cela semble être la meilleure option que quiconque ait présentée jusqu'à présent.
Jonah

est-ce une API privée? si j'utilisais cela dans mon application, serais-je refusé?
Frank

il ne semble pas y avoir d'appels privés là-dedans non
Anthony Main

la propriété tabbar n'était pas accessible auparavant.
coneybeare

cela modifie l'arrière-plan de la barre d'onglets, pas le surlignage de "l'élément sélectionné", ce qui m'intéresserait davantage
smdvlpr

105

iOS 5 a ajouté de nouvelles méthodes d'apparence pour personnaliser l'apparence de la plupart des éléments de l'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 supérieur, veuillez utiliser les éléments suivants:

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

L'utilisation du proxy d'apparence modifiera toute 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;

3
Nan. Comme je l'ai souligné, ils sont pour iOS 5. Vous pouvez toujours cibler des versions spécifiques avec des instructions de compilation conditionnelles: cocoawithlove.com/2010/07/…
imnk

Merci, cela a été utile :) Je n'ai jamais su qu'il y avait une telle chose.
Veeru

Pour iOS 7, utilisez [UITabBar Apparence] setBarTintColor, si vous voulez changer la couleur d'arrière-plan
Zeezer

34

J'ai un addendum à la réponse finale. Bien que le schéma essentiel soit correct, l'astuce consistant à utiliser 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 TabBar 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é, c'est la version de viewDidLoad que vous devez 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];

}

1
si vous voulez le rendre joli avec une image d'arrière-plan, voir ceci: duivesteyn.net/2010/01/16/iphone-custom-tabbar-background-image
oberbaum

1
Je pense qu'il doit être: [[self tabBar] insertSubview: v atIndex: 0];
Vibhor Goyal

Je sais que la réponse est ancienne mais cela a fonctionné pour moi. Comme j'avais besoin d'une image personnalisée au lieu d'une couleur, j'ai mélangé votre réponse avec cette teinte sur les barres - UITabBar partie
RaphaelDDL

27

Lorsque vous utilisez simplement addSubview, vos boutons perdent leur cliquabilité, donc au lieu de

[[self tabBar] addSubview:v];

utilisation:

[[self tabBar] insertSubview:v atIndex:0];

7

Il n'y a pas de moyen simple de le faire, vous devez essentiellement 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 cela peut en valoir la peine. Je recommande de déposer un bogue auprès d'Apple pour l'ajouter à un futur SDK iPhone.


4
Monsieur, avez-vous rempli un bug avec de la pomme?
Sagar R. Kothari

7

Voici 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];
}

qu'est-ce que tabBarcontroller est-ce le contrôleur qui est conforme UITabarDelegate Pouvez-vous expliquer plz?
The iCoder

7

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 envies visuelles:

[[UITabBar appearance] setBarStyle:UIBarStyleBlack];

Le style de barre place un séparateur subtil entre votre contenu d'affichage et votre barre d'onglets.


5

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


5

pour moi, c'est très simple de changer la couleur de Tabbar 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!!!


Fonctionne bien! +1 pour vous.
Fan de YSR

3
 [[UITabBar appearance] setTintColor:[UIColor redColor]];
 [[UITabBar appearance] setBarTintColor:[UIColor yellowColor]];

2

pour juste 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 d'onglets

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 d'iOS 10:

// this need to be in appdelegate didFinishLaunchingWithOptions
[[UITabBar appearance] setUnselectedItemTintColor:[UIColor blackColor]];

1

Il y a quelques bonnes idées dans les réponses existantes, beaucoup fonctionnent légèrement différemment et ce que vous choisissez dépendra également des appareils que vous ciblez et du type de look que vous souhaitez obtenir. UITabBarest notoirement peu intuitif lorsqu'il s'agit de personnaliser son apparence, mais voici quelques astuces supplémentaires qui peuvent aider:

1). Si vous cherchez à vous débarrasser de la superposition brillante pour un look 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)];
}

selectedet unselectedsont les UIImageobjets de votre choix. Si vous souhaitez qu'ils soient une couleur plate, la solution la plus simple que j'ai trouvée est de créer un UIViewavec le désiré backgroundColor, puis de le restituer en un UIImageà l'aide de QuartzCore. J'utilise la méthode suivante dans une catégorie UIViewpour obtenir un UIImageavec 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 souhaiterez 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 encore assez limités. En particulier, vous ne pouvez pas modifier librement l'emplacement du texte dans le bouton et ne pouvez pas avoir des couleurs différentes pour les boutons sélectionnés / non sélectionnés. Si vous voulez faire une mise en page de texte plus spécifique, définissez simplement UITextAttributeTextColorpour être clair et ajoutez votre texte dans les images selectedet unselectedde la partie (2).



0

Une autre solution (qui est un hack) est de définir l'alpha sur le tabBarController à 0,01 afin qu'il soit pratiquement invisible tout en restant cliquable. Ensuite, définissez un contrôle ImageView au bas de la pointe MainWindow avec votre image de barre d'onglets personnalisée sous le tabBarCOntroller alpha'ed. Ensuite, échangez les images, changez les couleurs ou la lumière lorsque le tabbarcontroller change de vue.

Cependant, vous perdez le «... plus» et personnalisez la fonctionnalité.


0

Salut J'utilise le SDK iOS 4 et j'ai pu 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
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

Réponse Swift 3.0: (de Vaibhav Gaikwad)

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

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

Swift 3 en utilisant l'apparence de votre AppDelegatefaites ce qui suit:

UITabBar.appearance().barTintColor = your_color

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.