Eliminar el text del elemento de la barra de tabs, mostrar solo la image

Pregunta simple: ¿Cómo puedo eliminar el text del elemento de la barra de tabs y mostrar solo la image?

Quiero que me gusten los elementos de la barra en la aplicación instagram:

introduzca la descripción de la imagen aquí

En el inspector en xcode 6, elimino el título y elijo una image de @ 2x (50px) y de una image de @ 3x (75px). Sin embargo, la image no usa el espacio libre del text eliminado. ¿Alguna idea de cómo lograr la misma image de elemento de barra de tabs como en la aplicación instagram?

Debería jugar con la propiedad UITabBarItem de UITabBarItem . Aquí hay un código de ejemplo:

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

Los valores dentro de UIEdgeInsets dependen del tamaño de su image. Este es el resultado de ese código en mi aplicación:

introduzca la descripción de la imagen aquí

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

Así es como lo haces en un storyboard.

Borre el text del título y configure el recuadro de la image como la siguiente captura de pantalla.

introduzca la descripción de la imagen aquí

Recuerde que el tamaño del icono debe seguir la guía de layout de manzana.

introduzca la descripción de la imagen aquí

Esto significa que debe tener 25 px x 25 px para @ 1 x, 50 px x 50 px para @ 2 x, 75 px x 75 px para @ 3 x

Si está utilizando storyboards, esta sería su mejor opción. Recorre todos los elementos de la barra de toque y para cada uno establece el título en nada y hace que la image se vea a pantalla completa. (Debes haber agregado una image en el guión gráfico)

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

Versión veloz de ddiego answer

Llame a esta function en viewDidLoad de cada primer hijo de viewControllers después de configurar el título de viewController

 func removeTabbarItemsText() { if let items = tabBar.items { for item in items { item.title = "" item.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0); } } } 

Utilicé el siguiente código en la vista viewDidLoad de mi BaseTabBarController. Tenga en count que en mi ejemplo, tengo 5 tabs, y la image seleccionada siempre será base_image + "_selected".

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

Usar el enfoque con la configuration de cada propiedad de title UITabBarItem a "" y actualizar imageInsets no funcionará correctamente si se configura en view controller self.title . Por ejemplo, si self.viewControllers de UITabBarController están embeddeds en UINavigationController y necesita el título para mostrar en la barra de navigation. En este caso, establezca el título UINavigationItem s directamente utilizando self.navigationItem.title , no self.title .

Acercamiento Swift 4

Pude hacer el truco implementando una function que toma un TabBarItem y le da un cierto formatting.

Mueve la image un poco hacia abajo para que sea más cinput y también oculta el text de la barra de tabs. Funcionó mejor que simplemente establecer su título en una cadena vacía, porque cuando tiene una barra de navigation también, la TabBar recupera el título del viewController cuando se selecciona

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

Aquí hay una manera mejor, más infalible de hacer esto que no sea la mejor respuesta:

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

Ponga esto en su AppDelegate.didFinishLaunchingWithOptions para que afecte a todos los botones de la barra de tabs durante la vida útil de su aplicación.

iOS 11 arroja un torcedura en muchas de estas soluciones, así que acabo de arreglar mis problemas en iOS 11 subclassando UITabBar y sobrescribiendo 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 } } 

}

Una extensión mínima, segura ITUabBarController en Swift (basada en la respuesta @ korgx9):

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