web-dev-qa-db-fra.com

Supprimer le texte de l'élément de la barre d'onglets, afficher uniquement l'image

Question simple, comment puis-je supprimer le texte de l'élément de la barre d'onglets et afficher uniquement l'image?  

Je veux que les éléments de barre aiment dans l'application instagram:

enter image description here

Dans l'inspecteur de xcode 6, je supprime le titre et choisis une image @ 2x (50px) et une image @ 3x (75px). Cependant, l'image n'utilise pas l'espace libre du texte supprimé. Des idées comment atteindre la même image d'élément de barre de tabulation comme dans l'application instagram?

iosswiftuitabbaritem
74
Artjom Zabelin

Vous devriez jouer avec la propriété imageInsets de UITabBarItem. Voici un exemple de code:

let tabBarItem = UITabBarItem(title: nil, image: UIImage(named: "more")
tabBarItem.imageInsets = UIEdgeInsets(top: 9, left: 0, bottom: -9, right: 0)

Les valeurs dans UIEdgeInsets dépendent de la taille de votre image. Voici le résultat de ce code dans mon application:

enter image description here

119
mustafa
// Remove the titles and adjust the inset to account for missing title
for(UITabBarItem * tabBarItem in self.tabBar.items){
    tabBarItem.title = @"";
    tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0);
}
71
ddiego

Voici comment vous le faites dans un storyboard. 

Effacez le texte du titre et réglez l'image en incrustation comme sur la capture d'écran ci-dessous.

 enter image description here

N'oubliez pas que la taille de l'icône doit suivre/ Apple Design Guideline

 enter image description here

Cela signifie que vous devriez avoir 25 pixels x 25 pixels pour @ 1x, 50 pixels x 50 pixels pour @ 2x, 75 pixels x 75 pixels pour @ 3x

65
nuynait

Utiliser l'approche pour définir chaque propriété UITabBarItems title sur "".__ et mettre à jour imageInsets ne fonctionnera pas correctement si le contrôleur de vue self.title est défini. Par exemple, si self.viewControllers de UITabBarController est incorporé dans UINavigationController et que vous devez afficher le titre dans la barre de navigation. Dans ce cas, définissez le titre UINavigationItems directement à l'aide de self.navigationItem.title et non de self.title.

29
tesla

Version Swift de ddiego answer

Compatible avec iOS 11

Appelez cette fonction dans viewDidLoad de chaque premier enfant de viewControllers après la définition du titre de viewController.

Meilleur entrainement:  

Alternativelly comme @daspianist suggéré dans les commentaires 

Créez une sous-classe comme celle-ci BaseTabBarController: UITabBarController, UITabBarControllerDelegate et mettre cette fonction dans viewDidLoad de la sous-classe

func removeTabbarItemsText() {

    var offset: CGFloat = 6.0

    if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
        offset = 0.0
    }

    if let items = tabBar.items {
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsetsMake(offset, 0, -offset, 0);
        }
    }
}
22
korgx9

Si vous utilisez des storyboards, ce serait votre meilleure option. Il parcourt tous les éléments de la barre d'onglets et définit pour chacun d'eux le titre sans effet et rend l'image en plein écran. (Vous devez avoir ajouté une image dans le storyboard)

for tabBarItem in tabBar.items!
{
   tabBarItem.title = ""
   tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
22
Marcos Reboucas

iOS 11 pose un problème dans bon nombre de ces solutions. Je viens donc de résoudre mes problèmes sur iOS 11 en sous-classant UITabBar et en redéfinissant layoutSubviews.

class MainTabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        // iOS 11: puts the titles to the right of image for horizontal size class regular. Only want offset when compact.
        // iOS 9 & 10: always puts titles under the image. Always want offset.
        var verticalOffset: CGFloat = 6.0

        if #available(iOS 11.0, *), traitCollection.horizontalSizeClass == .regular {
            verticalOffset = 0.0
        }

        let imageInset = UIEdgeInsets(
            top: verticalOffset,
            left: 0.0,
            bottom: -verticalOffset,
            right: 0.0
        )

        for tabBarItem in items ?? [] {
            tabBarItem.title = ""
            tabBarItem.imageInsets = imageInset
        }
    }
}
13
atlwx

J'ai utilisé le code suivant dans viewDidLoad ..__ de mon contrôleur BaseTabBarController. Notez que dans mon exemple, j'ai 5 onglets et que l'image sélectionnée sera toujours image_base + "_sélectionné".

// Get tab bar and set base styles
let tabBar = self.tabBar;
tabBar.backgroundColor = UIColor.whiteColor()

// Without this, images can extend off top of tab bar
tabBar.clipsToBounds = true

// For each tab item..
let tabBarItems = tabBar.items?.count ?? 0
for i in 0 ..< tabBarItems {
    let tabBarItem = tabBar.items?[i] as UITabBarItem

    // Adjust tab images (Like mstysf says, these values will vary)
    tabBarItem.imageInsets = UIEdgeInsetsMake(5, 0, -6, 0);

    // Let's find and set the icon's default and selected states
    // (use your own image names here)
    var imageName = ""
    switch (i) {
    case 0: imageName = "tab_item_feature_1"
    case 1: imageName = "tab_item_feature_2"
    case 2: imageName = "tab_item_feature_3"
    case 3: imageName = "tab_item_feature_4"
    case 4: imageName = "tab_item_feature_5"
    default: break
    }
    tabBarItem.image = UIImage(named:imageName)!.imageWithRenderingMode(.AlwaysOriginal)
    tabBarItem.selectedImage = UIImage(named:imageName + "_selected")!.imageWithRenderingMode(.AlwaysOriginal)
}
11
Four

Approche rapide 4

J'ai été capable de faire le tour en implémentant une fonction qui prend un TabBarItem et le met en forme.

Déplace l'image un peu vers le bas pour la rendre plus centrée et cache également le texte de la barre de tabulation . titre du viewController lorsque sélectionné

func formatTabBarItem(tabBarItem: UITabBarItem){
    tabBarItem.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .selected)
    tabBarItem.setTitleTextAttributes([NSAttributedStringKey.foregroundColor:UIColor.clear], for: .normal)
}
8
Jose Tapizquent

Une extension UITabBarController minimale et sûre dans Swift (selon @ korgx9 answer):

extension UITabBarController {
  func removeTabbarItemsText() {
    tabBar.items?.forEach {
      $0.title = ""
      $0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
    }
  }
}
5
Federico Zanetello

Voici un moyen plus simple et plus sûr de procéder ainsi que de donner la meilleure réponse:

[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
                                         forState:UIControlStateHighlighted];

Mettez ceci dans votre AppDelegate.didFinishLaunchingWithOptions afin qu'il affecte tous les boutons de la barre d'onglets tout au long de la vie de votre application.

3
Ezekiel Victor

Basé sur le réponse de ddiego , dans Swift 4.2:

extension UITabBarController {
    func cleanTitles() {
        guard let items = self.tabBar.items else {
            return
        }
        for item in items {
            item.title = ""
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }
    }
}

Et il vous suffit d'appeler self.tabBarController?.cleanTitles() dans votre contrôleur de vue.

2
j_gonfer

créez une sous-classe de UITabBarController et assignez-la à votre tabBar, puis placez cette ligne de code dans la méthode viewDidLoad:

tabBar.items?.forEach({ (item) in
        item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
    })
0
soheil pakgohar

 enter image description here

code:

private func removeText() {
    if let items = yourTabBarVC?.tabBar.items {
       for item in items {
          item.title = ""
       }
    }
 }
0
Giang

Le moyen le plus simple et fonctionne toujours:

class TabBar: UITabBar {

    override func layoutSubviews() {
        super.layoutSubviews()

        subviews.forEach { subview in
            if subview is UIControl {
                subview.subviews.forEach {
                    if $0 is UILabel {
                        $0.isHidden = true
                        subview.frame.Origin.y = $0.frame.height / 2.0
                    }
                }
            }
        }
    }
}
0
JulianKro

Sur la base de toutes les bonnes réponses de cette page, j'ai créé une autre solution qui vous permet également d'afficher à nouveau le titre. Au lieu de supprimer le contenu du titre, je modifie simplement la couleur de la police en transparente.

extension UITabBarItem {

    func setTitleColorFor(normalState: UIColor, selectedState: UIColor) {
        self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: normalState], for: .normal)
        self.setTitleTextAttributes([NSAttributedString.Key.foregroundColor: selectedState], for: .selected)
    }

}


extension UITabBarController {

    func hideItemsTitle() {

        guard let items = self.tabBar.items else {
            return
        }

        for item in items {
            item.setTitleColorFor(normalState: UIColor(white: 0, alpha: 0), selectedState: UIColor(white: 0, alpha: 0))
            item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        }

    }

    func showItemsTitle() {

        guard let items = self.tabBar.items else {
            return
        }

        for item in items {
            item.setTitleColorFor(normalState: .black, selectedState: .yellow)
            item.imageInsets = UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0)
        }

    }

}
0
ladislas