Remover texto do item da barra de guias, mostrar apenas imagem

Uma pergunta simples, como posso remover o texto do item da barra de guias e mostrar apenas a imagem?

Quero que os itens da barra gostem no aplicativo Instagram:

No inspetor no xcode 6, removo o título e escolho uma imagem @ 2x (50px) e @ 3x (75px). No entanto, a imagem não usa o espaço livre do texto removido. Alguma ideia de como obter a mesma imagem de item da barra de guias como no aplicativo instagram?

Você deve jogar com imageInsetspropriedade de UITabBarItem. Aqui está o código de amostra:

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

Os valores internos UIEdgeInsetsdependem do tamanho da imagem. Aqui está o resultado desse código em meu aplicativo:

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

Aqui está como você faz isso em um storyboard.

Limpe o texto do título e defina a inserção da imagem como a imagem abaixo

Lembre-se de que o tamanho do ícone deve seguir as diretrizes de design da apple

Isso significa que você deve ter 25px x 25px para @ 1x, 50px x 50px para @ 2x, 75px x 75px para @ 3x

Usar a abordagem com a definição de cada propriedade UITabBarItems titlepara "" e atualização imageInsetsnão funcionará corretamente se o controlador de visualização self.titleestiver definido. Por exemplo, se self.viewControllersUITabBarController estiverem incorporados UINavigationControllere você precisar que o título seja exibido na barra de navegação. Neste caso, defina UINavigationItemo título diretamente usando self.navigationItem.title, não self.title.

Versão rápida da resposta ddiego

Compatível com iOS 11

Chame esta função em viewDidLoad de cada primeiro filho dos viewControllers após definir o título do viewController

Melhor prática:

Alternativamente como @daspianist sugerido nos comentários

Faça uma subclasse como esta classe BaseTabBarController: UITabBarController, UITabBarControllerDelegate e coloque esta função no viewDidLoad da subclasse

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 = UIEdgeInsets(top: offset, left: 0, bottom: -offset, right: 0)
        }
    }
}

Se você estiver usando storyboards, esta seria sua melhor opção. Ele percorre todos os itens da barra de guias e para cada um deles define o título como nada e torna a imagem em tela inteira. (Você deve ter adicionado uma imagem no storyboard)

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

O iOS 11 atrapalha muitas dessas soluções, então resolvi apenas meus problemas no iOS 11 criando uma subclasse de UITabBar e substituindo 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
        }
    }
}

Usei o seguinte código no viewDidLoad do meu BaseTabBarController. Observe que no meu exemplo, eu tenho 5 guias, e a imagem selecionada sempre 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)
}

Abordagem Swift 4

Consegui fazer o truque implementando uma função que pega um TabBarItem e faz alguma formatação nele.

Move a imagem um pouco para baixo para torná-la mais centralizada e também oculta o texto da Barra de guias. Funcionou melhor do que apenas definir seu título como uma string vazia, porque quando você tem uma NavigationBar também, a TabBar recupera o título do viewController quando selecionada

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

Sintaxe mais recente

extension UITabBarItem {
    func setImageOnly(){
        imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .selected)
        setTitleTextAttributes([NSAttributedString.Key.foregroundColor:UIColor.clear], for: .normal)
    }
 }

E basta usá-lo em sua barra de tabulação como:

tabBarItem.setImageOnly()

Aqui está uma maneira melhor e mais segura de fazer isso, além da resposta principal:

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

Coloque-o em seu AppDelegate.didFinishLaunchingWithOptionspara que afete todos os botões da barra de guias ao longo da vida de seu aplicativo.

Uma extensão UITabBarController mínima e segura em Swift (com base na resposta @ korgx9):

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

Com base na resposta do ddiego , no 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)
        }
    }
}

E você só precisa chamar self.tabBarController?.cleanTitles()seu controlador de visualização.

Com base em todas as ótimas respostas desta página, criei outra solução que também permite que você mostre o título novamente. Em vez de remover o conteúdo do título, apenas altero a cor da fonte para 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)
        }

    }

}

código:

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

Maneira mais fácil e sempre funciona:

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

No meu caso, o mesmo ViewController foi usado no TabBar e outro fluxo de navegação. Dentro do meu ViewController, eu defini o self.title = "Some Title"que estava aparecendo no TabBar independentemente da configuração do título nilou em branco ao adicioná-lo na barra de guias. Eu também defini imageInsetso seguinte:

item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)

Portanto, dentro do meu ViewController, tratei do título de navegação da seguinte maneira:

if isFromTabBar {
   // Title for NavigationBar when ViewController is added in TabBar
   // NOTE: Do not set self.title = "Some Title" here as it will set title of tabBarItem
   self.navigationItem.title = "Some Title"
} else {
   // Title for NavigationBar when ViewController is opened from navigation flow
   self.title = "Some Title"
}

faça uma subclasse de UITabBarController e atribua-a ao seu tabBar, em seguida, no método viewDidLoad coloque esta linha de código:

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

TabBar personalizado - iOS 13, Swift 5, XCode 11

• Itens TabBar sem texto
• Itens TabBar centralizados verticalmente
• Vista de TabBar arredondada
• Posição dinâmica TabBar e frames

Baseado em storyboard. Também pode ser alcançado facilmente de forma programática. Apenas 4 etapas a seguir:

1. Os ícones da barra de guias devem ter 3 tamanhos, na cor preta. Normalmente, eu faço download em fa2png.io - tamanhos: 25x25, 50x50, 75x75. Os arquivos de imagem PDF não funcionam!

   

2. No Storyboard para o item da barra de guias, defina o ícone que deseja usar por meio do Attributes Inspector. (veja a imagem)

3. TabBarController personalizado -> Novo arquivo -> Tipo: UITabBarController -> Definir no storyboard. (veja a imagem)

4. Classe UITabBarController

   class RoundedTabBarViewController: UITabBarController {

   override func viewDidLoad() {
       super.viewDidLoad()
   
       // Do any additional setup after loading the view.
       // Custom tab bar view
       customizeTabBarView()
   }
   
   private func customizeTabBarView() {
       let tabBarHeight = tabBar.frame.size.height
       self.tabBar.layer.masksToBounds = true
       self.tabBar.isTranslucent = true
       self.tabBar.barStyle = .default
       self.tabBar.layer.cornerRadius = tabBarHeight/2
       self.tabBar.layer.maskedCorners = [.layerMaxXMaxYCorner, .layerMaxXMinYCorner, .layerMinXMaxYCorner, .layerMinXMinYCorner]
   }
   
   override func viewDidLayoutSubviews() {
       super.viewDidLayoutSubviews()
       let viewWidth = self.view.bounds.width
       let leadingTrailingSpace = viewWidth * 0.05
   
       tabBar.frame = CGRect(x: leadingTrailingSpace, y: 200, width: viewWidth - (2 * leadingTrailingSpace), height: 49)
   }

   }

5. Resultado

Se você está olhando para centralizar as guias / alterar as inserções de imagem sem usar números mágicos, o seguinte funcionou para mim (no Swift 5.2.2):

Em uma subclasse UITabBarController , você pode adicionar as inserções de imagem após definir os controladores de visualização.

override var viewControllers: [UIViewController]? {
    didSet {
      addImageInsets()
    }
}

func addImageInsets() {
    let tabBarHeight = tabBar.frame.height

    for item in tabBar.items ?? [] where item.image != nil {
      let imageHeight = item.image?.size.height ?? 0
      let inset = CGFloat(Int((tabBarHeight - imageHeight) / 4))
      item.imageInsets = UIEdgeInsets(top: inset,
                                      left: 0,
                                      bottom: -inset,
                                      right: 0)
    }
}

Várias das opções acima listam soluções para lidar com a ocultação do texto.