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.

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)


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)


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)
}

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 = "";

10

Cela a fonctionné pour moi

Swift 4

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

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)

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);
 }
}

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)
    }
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.