Entfernen Sie den Text des Registerkartenleistenelements und zeigen Sie nur das Bild an

Einfache Frage, wie kann ich den Text des Registerkartenleistenelements entfernen und nur das Bild anzeigen?

Ich möchte, dass die Balkenelemente in der Instagram-App gefallen:

Im Inspektor in xcode 6 entferne ich den Titel und wähle ein @ 2x (50px) und ein @ 3x (75px) Bild. Das Bild verwendet jedoch nicht den freien Speicherplatz des entfernten Textes. Irgendwelche Ideen, wie Sie das gleiche Bild in der Registerkartenleiste wie in der Instagram-App erzielen können?

Sie sollten mit imageInsetsEigentum von spielen UITabBarItem. Hier ist Beispielcode:

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

Die Werte im Inneren UIEdgeInsetshängen von Ihrer Bildgröße ab. Hier ist das Ergebnis dieses Codes in meiner App:

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

So geht's in einem Storyboard.

Löschen Sie den Titeltext und stellen Sie das Bild wie im folgenden Screenshot ein

Denken Sie daran, dass die Symbolgröße der Apple-Designrichtlinie entsprechen sollte

Dies bedeutet, dass Sie 25px x 25px für @ 1x, 50px x 50px für @ 2x, 75px x 75px für @ 3x haben sollten

Mit Ansatz mit jeder Einstellung UITabBarItems - titleEigenschaft auf "" und Aktualisierung imageInsetsfunktioniert nicht richtig, wenn im View - Controller self.titleeingestellt ist. Zum Beispiel, wenn self.viewControllersUITabBarController eingebettet sind UINavigationControllerund der Titel in der Navigationsleiste angezeigt werden soll. In diesem Fall setzen Sie den UINavigationItemTitel direkt mit self.navigationItem.title, nicht self.title.

Schnelle Version von ddiego Antwort

Kompatibel mit iOS 11

Rufen Sie diese Funktion in viewDidLoad jedes ersten untergeordneten Elements der viewController auf, nachdem Sie den Titel des viewControllers festgelegt haben

Beste Übung:

Alternativ auch als @daspianist in Kommentaren vorgeschlagen

Erstellen Sie eine Unterklasse wie diese Klasse BaseTabBarController: UITabBarController, UITabBarControllerDelegate und fügen Sie diese Funktion in viewDidLoad der Unterklasse ein

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

Wenn Sie Storyboards verwenden, ist dies die beste Option. Es durchläuft alle Elemente der Registerkartenleiste und setzt für jedes Element den Titel auf Null und macht das Bild im Vollbildmodus. (Sie müssen ein Bild im Storyboard hinzugefügt haben)

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

iOS 11 wirft bei vielen dieser Lösungen einen Knick auf, daher habe ich meine Probleme unter iOS 11 behoben, indem ich UITabBar unterklassifiziert und layoutSubviews überschrieben habe.

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

Ich habe den folgenden Code in viewDidLoad meines BaseTabBarController verwendet. Beachten Sie, dass ich in meinem Beispiel 5 Registerkarten habe und das ausgewählte Bild immer base_image + "_selected" lautet.

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

Swift 4 Ansatz

Ich konnte den Trick ausführen, indem ich eine Funktion implementierte, die ein TabBarItem verwendet und es formatiert.

Verschiebt das Bild ein wenig nach unten, um es zentrierter zu machen, und verbirgt auch den Text der Registerkartenleiste. Es hat besser funktioniert, als nur den Titel auf eine leere Zeichenfolge zu setzen, denn wenn Sie auch eine Navigationsleiste haben, erhält die TabBar bei Auswahl den Titel des viewControllers zurück

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

Neueste Syntax

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

Und verwenden Sie es einfach in Ihrer TabBar als:

tabBarItem.setImageOnly()

Hier ist eine bessere, kinderleichtere Möglichkeit, dies zu tun, als die Top-Antwort:

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

Fügen Sie dies AppDelegate.didFinishLaunchingWithOptionsso ein, dass es alle Schaltflächen der Registerkartenleiste während der gesamten Lebensdauer Ihrer App betrifft.

Eine minimale, sichere UITabBarController-Erweiterung in Swift (basierend auf der Antwort von @ korgx9):

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

Basierend auf der Antwort von ddiego in 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)
        }
    }
}

Und Sie müssen nur self.tabBarController?.cleanTitles()Ihren View Controller aufrufen .

Basierend auf all den tollen Antworten auf dieser Seite habe ich eine weitere Lösung entwickelt, mit der Sie den Titel auch wieder anzeigen können. Anstatt den Inhalt des Titels zu entfernen, ändere ich einfach die Schriftfarbe in transparent.

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

    }

}

Code:

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

Einfachster Weg und funktioniert immer:

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

In meinem Fall wurde derselbe ViewController in TabBar und anderen Navigationsabläufen verwendet. In meinem ViewController habe ich festgelegt, self.title = "Some Title"was in der Registerkartenleiste angezeigt wird, unabhängig davon, ob Titel niloder Leerzeichen beim Hinzufügen in der Registerkartenleiste festgelegt wurden. Ich habe auch imageInsetswie folgt eingestellt:

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

In meinem ViewController habe ich den Navigationstitel wie folgt behandelt:

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

Erstellen Sie eine Unterklasse von UITabBarController und weisen Sie diese Ihrer tabBar zu. Fügen Sie dann in der viewDidLoad-Methode diese Codezeile ein:

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

Benutzerdefinierte TabBar - iOS 13, Swift 5, XCode 11

• TabBar-Elemente ohne Text
• TabBar-Elemente werden vertikal zentriert
• Abgerundete TabBar-Ansicht
• TabBar Dynamische Position und Frames

Storyboard basiert. Dies kann auch leicht programmgesteuert erreicht werden. Nur noch 4 Schritte:

1. Registerkartensymbole müssen in 3 Größen in schwarzer Farbe vorliegen. Normalerweise lade ich von fa2png.io herunter - Größen: 25x25, 50x50, 75x75. PDF-Bilddateien funktionieren nicht!

   

2. Legen Sie im Storyboard für das Element der Registerkartenleiste das Symbol fest, das Sie über den Attributinspektor verwenden möchten. (siehe Screenshot)

3. Benutzerdefinierter TabBarController -> Neue Datei -> Typ: UITabBarController -> Auf Storyboard festlegen. (siehe Screenshot)

4. UITabBarController-Klasse

   Klasse 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. Ergebnis

Wenn Sie die Registerkarten zentrieren / die Bildeinfügungen ändern möchten, ohne magische Zahlen zu verwenden, hat Folgendes für mich funktioniert (in Swift 5.2.2):

In einer UITabBarController- Unterklasse können Sie die Bildeinsätze hinzufügen, nachdem Sie die Ansichts-Controller festgelegt haben.

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

In mehreren der oben genannten Optionen sind Lösungen zum Ausblenden des Texts aufgeführt.