Déplacer l'image UITabBarItem vers le bas?

98

Normalement, sur chaque onglet d'un, UITabBarvous avez une petite image et un titre nommant l'onglet. L'image est positionnée / centrée vers le haut de l'onglet pour accueillir le titre en dessous. Ma question est la suivante: si vous voulez avoir une tabBar avec juste une image et sans titre, y a-t-il un moyen de déplacer l'image vers le bas pour qu'elle soit mieux centrée dans l'onglet?

J'utilise (voir ci-dessous) actuellement:

[tabBarItem setFinishedSelectedImage:tabSelected withFinishedUnselectedImage:tabUnselected];

mais je préférerais utiliser une image plus grande sans titre, pour le moment, si je fais une image plus grande que 70 pixels @ 2x, elle commence à se détacher du haut du UITabBartout en laissant beaucoup d'espace inutilisé en bas.

fuzzygoat
la source

Réponses:

179

Essayez de régler tabBarItemles imageInsets(pour déplacer l 'image de l' icône) et de régler le titre des contrôleurs sur zéro (de sorte qu'aucun titre ne s'affiche). Mettez quelque chose comme ceci à -initou -viewDidLoadméthode dans le contrôleur de vue:

Objectif c

self.tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
self.title = nil;

Rapide

self.tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
self.title = nil

UITabBarItemest une sous-classe UIBarItemdont a la UIEdgeInsets imageInsetspropriété. Jouez un peu avec les inserts jusqu'à ce que ça ait l'air bien (en fonction de vos images d'icônes de la barre d'onglets)

Lukas Kukacka
la source
3
@Lukas: mais cela réduit les images.
Sourabh Bhardwaj
1
@Sourabh ne les réduit pas pour moi
TigerCoding
7
La valeur réelle de l'encart est de 5,5f si vous en avez besoin pour un pixel parfait.
utilisateur
1
@ rr1g0 Le déplacement du badge vers la position personnalisée n'est pas possible. Si vous avez besoin d'une position personnalisée d'un badge ou d'une apparence de badge personnalisé, vous devez l'implémenter vous
Lukas Kukacka
1
@Sourabh vous devez décaler le bas avec une valeur négative pour ne pas rétrécir l'image.
Rmalmoe
150

Vous pouvez également le faire via le storyboard. Sélectionnez votre onglet, accédez à l'inspecteur de taille et attribuez les encarts appropriés.

entrez la description de l'image ici

* Démonstration sur Xcode, version 7.3.1 (7D1014)

Neil Galiaskarov
la source
Agréable et propre!
ken
Le meilleur de toutes les réponses ... Merci beaucoup @Neil Galiaskarov
Venkatesh Chejarla
49

Créez une sous-classe de UITabBarController, et dans son viewDidLoad:

- (void)viewDidLoad
{
    [super viewDidLoad];
    [self.viewControllers enumerateObjectsUsingBlock:^(UIViewController *vc, NSUInteger idx, BOOL *stop) {
        vc.tabBarItem.title = nil;
        vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0);
    }];
}

Swift 3:

for vc in self.viewControllers! {
    vc.tabBarItem.title = nil
    vc.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}
Brian
la source
cela a fonctionné pour moi. juste que pour swift la méthode enumerateObjectsUsingBlock n'est plus disponible
Junchao Gu
ne sous-classez pas, mettez-le plutôt dans votre AppDelegate
Laszlo
1
mettre cet extrait de code AppDelegatefonctionne également, mais ce n'est évidemment pas mieux que de le sous-classer. Vous pouvez avoir votre propre préférence cependant :)
Brian
10

Si vous utilisez Xamarin, cela fonctionne:

screen.TabBarItem.ImageInsets = new UIEdgeInsets(5, 0, -5, 0);
screen.TabBarItem.Title = "";
Jelle
la source
10

Cela a fonctionné pour moi

Swift 4

let array = tabBarController?.customizableViewControllers
for controller in array! {
    controller.tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -5, 0)
}
Alfi
la source
2

SWIFT 3.0

Vous pouvez définir les jeux d'image, définir le haut, la gauche, le bas et la droite selon la conception.

self.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: 0, right: 0)
Krish
la source
2

Pour iOS 11, vous devez remplacer la méthode TraitCollection en plus de définir ImageInsets. Veuillez ajouter la méthode dans votre classe UITabBarController sous-classée

public override UITraitCollection TraitCollection {
 get {
  return UITraitCollection.FromHorizontalSizeClass(horizontalSizeClass: UIUserInterfaceSizeClass.Compact);
 }
}
Prashant
la source
Bon conseil qui m'a aidé à résoudre un problème lié à la position de l'image pour l'élément de la barre d'onglets sur iPad et iOS 11. Mais il est trop difficile de remplacer la collection de traits au niveau du contrôleur de vue, il est préférable de sous-classer la classe UITabBar et de remplacer la propriété traitCollection Là. Le renvoi d'une collection de traits avec uniquement la classe horizontale, supprimera les autres propriétés de la collection de traits. return UITraitCollection(traitsFrom: [ super.traitCollection, UITraitCollection(horizontalSizeClass: .compact)])a fait l'affaire pour moi.
Emmanuel Paris
1

Dans Swift 4.2 , UIEdgeInsetsMakeest déprécié, nous devrions plutôt utiliser UIEdgeInsets,

let array = tabBarController?.customizableViewControllers
    for controller in array! {
        controller.tabBarItem.imageInsets = UIEdgeInsets(top: 5, left: 0, bottom: -5, right: 0)
    }
Bappaditya
la source