Rimuovi il testo dell'elemento della barra delle schede, mostra solo l'immagine

Question

Domanda semplice, come posso rimuovere il testo dell'elemento della barra delle schede e mostrare solo l'immagine?

Voglio gli elementi a barre per piace in app Instagram:

Nella finestra di ispezione in Xcode 6 rimuovo il titolo e scegliere un @ 2x (50px) e una @ 3x (75px) Immagine. Tuttavia l'immagine non utilizza lo spazio libero del testo rimosso. Qualche idea su come ottenere la stessa immagine di una barra delle immagini come nell'app instagram?

Answer 1

Si dovrebbe giocare con imageInsets proprietà di UITabBarItem. Ecco il codice di esempio:

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

valori all'interno UIEdgeInsets dipendono dalla dimensione dell'immagine. Ecco il risultato di tale codice nella mia app:

Answer 2

ho usato il seguente codice nel viewDidLoad di mio BaseTabBarController. Nota che nel mio esempio ho 5 schede e l'immagine selezionata sarà sempre base_immagine + "_selezionato".

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

Answer 3

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

Answer 4

versione Swift di ddiego risposta

chiamare questa funzione in viewDidLoad di ogni primo figlio dei viewControllers dopo aver impostato il titolo del viewController

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

Answer 5

Se sei usando gli storyboard questa sarebbe la migliore opzione. Fa scorrere tutti gli elementi della barra delle schede e per ognuno imposta il titolo su nulla e rende l'immagine a schermo intero. (È necessario aver aggiunto un'immagine nello storyboard)

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

Answer 6

Utilizzando l'approccio con l'impostazione ogni UITabBarItem s proprietà title a "" e aggiornare imageInsets non funziona correttamente se nel controller di vista self.title è impostato. Ad esempio se self.viewControllers di UITabBarController sono incorporati in UINavigationController e il titolo deve essere visualizzato sulla barra di navigazione. In questo caso impostare il titolo UINavigationItem direttamente utilizzando self.navigationItem.title, non self.title.

Answer 7

Ecco un modo più infallibile migliore per fare questo diverso la risposta in alto:

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

mettere questo nel vostro AppDelegate.didFinishLaunchingWithOptions in modo che colpisce tutti i pulsanti della barra delle schede per tutta la durata della vostra applicazione.

Answer 8

Ecco come lo si fa in uno storyboard.

Cancellare il testo del titolo, e impostare l'inserto di immagini come la schermata qui sotto

Ricordate la dimensione delle icone dovrebbe seguire la apple design guideline

Questo significa che si dovrebbe avere 25px x 25px per @ 1x, 50px x 50px per @ 2x, 75px x 75px per @ 3x

Answer 9

Un minimo, cassetta di sicurezza estensione UITabBarController in Swift (sulla base di @ korgx9 risposta):

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

Answer 10

iOS 11 getta un capriccio in molte di queste soluzioni, quindi ho solo fissato i miei problemi su iOS 11 per sottoclassi UITabBar e Sovrapposizione layout di visualizzazioni.

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

Answer 11

Swift 4 approccio

ho potuto fare il trucco implementando una funzione che prende un TabBarItem e fa parte della formattazione ad esso.

Sposta l'immagine leggermente verso il basso per renderla più centrata e nasconde anche il testo della barra delle schede. funzionato meglio che solo impostando il suo titolo ad una stringa vuota, perché quando si ha un NavigationBar pure, il TabBar riacquista il titolo del viewController quando selezionato

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