web-dev-qa-db-fra.com

Comment changer la couleur de fond de TabItem lorsque l'élément est sélectionné

Je souhaite une couleur d'arrière-plan différente lorsque l'utilisateur sélectionne un élément de la barre d'onglets que lorsqu'il n'est pas sélectionné.

iosobjective-cuitabbarcontrolleruitabbar
19
user2290869

Mettez ceci dans le Appdelegate.m dans application didFinishLaunchingWithOptions

UIImage *whiteBackground = [UIImage imageNamed:@"whiteBackground"];
[[UITabBar appearance] setSelectionIndicatorImage:whiteBackground];
23
user1898829

si vous utilisez un storyboard ou des xibs, cliquez sur "Barre de tabulation" et ajoutez le chemin "selectedImageTintColor" dans la balise Key Path Attributes. Comme ça :

enter image description here

11
serdaryillar

UPDATE: depuis iOS 7.1, cette technique ne fonctionne plus (si l'utilisateur appuie deux fois de suite sur le même onglet, la couleur d'arrière-plan est effacée).

UITabBarItem est une sous-classe de UIBarItem, tout est plus pénible car UIBarItem ne sous-classe pas UIView; Cependant, UITabBarItemcontient un. Ce qui suit manipule cette vue et peut donc être rejeté s'il est soumis à l'AppStore.

1) Sous-classe UITabBarItem  

Créez une sous-classe de UITabBarItem et ajoutez une nouvelle propriété selected à son en-tête, comme suit:

@interface ALDTabBarItem : UITabBarItem
@property (nonatomic, assign, getter = isSelected) BOOL selected;
@end

UITabBarItems ont une propriété view, mais elle n'est pas exposée. Nous pouvons étendre la classe pour y accéder, puis créer un séparateur personnalisé sur la propriété selected pour changer la couleur d'arrière-plan, comme suit:

#import "ALDTabBarItem.h"

@interface ALDTabBarItem (ALD)
@property (nonatomic, strong) UIView *view;
@end

@implementation ALDTabBarItem

- (void)setSelected:(BOOL)selected
{
    if(selected)
        self.view.backgroundColor = [UIColor redColor];
    else
        self.view.backgroundColor = [UIColor clearColor];
} 

@end

2) Mettez à jour votre délégué UITabBarController  

Ajoutez le code suivant au délégué de votre UITabBarController, qui définit les états sélectionnés de UITabBar:

- (void)tabBar:(UITabBar *)tabBar didSelectItem:(UITabBarItem *)item
{
    for(ALDTabBarItem *myItem in tabBar.items)
        myItem.selected = (myItem == item);
}
7
Andy

En rapide

UITabBar.appearance().selectionIndicatorImage = UIImage(named: "tabSelected")

avec une image [email protected] de taille 98x98 pixels

7
abinop

Suivez ces étapes:

  1. Créer une sous-classe de UITabBarController

  2. Aller à la sous-classe viewDidAppear of UITabBarController

  3. Maintenant, trouvez la taille de TabBarItem,

    UITabBar *tabBar = self.tabBar;
CGSize imgSize = CGSizeMake(tabBar.frame.size.width/tabBar.items.count,tabBar.frame.size.height);

  4. Maintenant, créez l'image avec cette taille,

    //Create Image
UIGraphicsBeginImageContextWithOptions(imgSize, NO, 0);
UIBezierPath* p =
[UIBezierPath bezierPathWithRect:CGRectMake(0,0,imgSize.width,imgSize.height)];
[[UIColor blueColor] setFill];
[p fill];
UIImage* finalImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();

  5. Maintenant, assignez cette image à la SelectionIndicatorImage de TabBar

    [tabBar setSelectionIndicatorImage:finalImg];

Swift 4 Version: 

let imgSize = CGSize(width: tabBar.frame.size.width / CGFloat(tabBar.items!.count),
                     height: tabBar.frame.size.height)
UIGraphicsBeginImageContextWithOptions(imgSize, false, 0)
let p = UIBezierPath(rect: CGRect(x: 0, y: 0, width: imgSize.width,
                                  height: imgSize.height))
UIColor.blue.setFill()
p.fill()
let finalImg = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
UITabBar.appearance().selectionIndicatorImage = finalImg
3
Mehul Thakkar

Veuillez vous référer aux URL ci-dessous.

Changement de teinte/couleur de fond de UITabBar

Comment changer la couleur de la barre d'onglets dans Xcode

j'espère que ceci vous aidera..

essayez ceci pour changer la couleur de l'élément de la barre de tabulation, mais cela ne fonctionne que dans ios5.

if ([UITabBar instancesRespondToSelector:@selector(setSelectedImageTintColor:)])
{
    [tabBarController.tabBar setSelectedImageTintColor:[UIColor redColor]];
}
1
Ayaz

Ma réponse est similaire à-Mehul Thakkar mais c'est dans Swift 4 et pour améliorer sa réponse, je dirais que si vous placez le code dans viewDidAppear car il suggère aux utilisateurs de voir le changement se produire qui pas bonne expérience utilisateur. 

Créez donc la classe personnalisée pour votre contrôleur de tabulation et dans viewDidLoadplacez le code suivant: 

let singleTabWidth: CGFloat = self.tabBar.frame.size.width / CGFloat((self.tabBar.items?.count)!)
let singleTabSize = CGSize(width:singleTabWidth , height: self.tabBar.frame.size.height)

let selectedTabBackgroundImage: UIImage = self.imageWithColor(color: .white, size: singleTabSize)
self.tabBar.selectionIndicatorImage = selectedTabBackgroundImage

La fonction imageWithColor est ci-dessous pour vous:

//image with color and size
    func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
        UIGraphicsBeginImageContext(rect.size)
        let context = UIGraphicsGetCurrentContext()

        context!.setFillColor(color.cgColor)
        context!.fill(rect)

        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return image!
    }

J'espère que ça aide quelqu'un.

1
stan

Actuellement, dans Xcode 8.3.2, vous pouvez le faire dans le storyboard en utilisant une image qui représente l'arrière-plan réel.

Sélectionnez la barre d'onglets à l'intérieur de votre contrôleur:

 enter image description here

Dans les utilitaires, choisissez l’Inspecteur des attributs et modifiez l’image d’arrière-plan de la sélection:

 enter image description here

0
OhadM

Vous pouvez utiliser la teinte.

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

Dans AppDelegate.m, placez le code suivant après // Point de remplacement pour la personnalisation après le lancement de l'application.

0
Baby Groot

Réponse dans Swift 4:

setSelectedImageTintColor est obsolète sur iOS 8.

Utilisez plutôt ceci:

self.tabBar.tintColor = UIColor.white

0
Kishore Kumar

Mettez ceci dans votre fichier AppDelegate.m:

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
            // Override point for customization after application launch.

            [UITabBar appearance].selectionIndicatorImage = [UIImage imageNamed:@"activeTabBackgroundImage"];


            return YES;
        }
0
Boris Nikolić