it-swarm.com.de

Entfernen Sie den Tabulatortext, und zeigen Sie nur das Bild an

Einfache Frage, wie kann ich den Elementtext der Registerkartenleiste entfernen und nur das Bild anzeigen?  

Ich möchte, dass die Elemente in der Instagram-App angezeigt werden:

enter image description here

Im Inspector 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. Haben Sie eine Idee, wie Sie das gleiche Elementbild wie in der Instagram-App verwenden können?

74
Artjom Zabelin

Sie sollten mit der imageInsets-Eigenschaft von UITabBarItem spielen. 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 in UIEdgeInsets hängen von Ihrer Bildgröße ab. Hier ist das Ergebnis dieses Codes in meiner App:

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

So machen Sie es in einem Storyboard. 

Löschen Sie den Titeltext und setzen Sie den Bildausschnitt wie in der Abbildung unten

 enter image description here

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

 enter image description here

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

65
nuynait

Die Verwendung von Ansatz bei der Einstellung jeder UITabBarItems title-Eigenschaft auf "" Und das Update imageInsets funktionieren nicht ordnungsgemäß, wenn im View-Controller self.title festgelegt ist. Zum Beispiel, wenn self.viewControllers von UITabBarController in UINavigationController eingebettet ist und der Titel in der Navigationsleiste angezeigt werden muss. In diesem Fall setzen Sie UINavigationItems direkt mit self.navigationItem.title und nicht mit self.title.

29
tesla

Swift-Version von ddiego antworten

Kompatibel mit iOS 11

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

Beste Übung:  

Alternativelly als @daspianist in Kommentaren vorgeschlagen 

Erstellen Sie eine Unterklasse aus dieser Klasse BaseTabBarController: UITabBarController, UITabBarControllerDelegate und setzen Sie diese Funktion in der View der UnterklasseDidLoad

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

Wenn Sie Storyboards verwenden, ist dies die beste Option. Es durchläuft alle Elemente der Registerkartenleiste und setzt für jede den Titel auf nichts und das Bild wird als Vollbild angezeigt. (Sie müssen im Storyboard ein Bild hinzugefügt haben.)

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

iOS 11 wirft bei vielen dieser Lösungen einen Knick ab. Ich habe also meine Probleme mit iOS 11 behoben, indem ich die UITabBar-Klasse untergliederte und LayoutSubviews überschreibe.

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

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

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

Schnelle 4 Annäherung

Ich konnte den Trick ausführen, indem ich eine Funktion implementierte, die ein TabBarItem übernimmt und einige Formatierungen vornimmt.

Verschiebt das Bild ein wenig nach unten, um es zentrierter zu machen, und verbirgt auch den Text der Tab-Leiste . Funktionierte besser, als nur den Titel auf eine leere Zeichenfolge zu setzen, denn wenn Sie auch eine Navigationsleiste haben, wird die TabBar wieder hergestellt Titel des viewControllers, wenn ausgewählt

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

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

Hier ist eine bessere, narrensicherere Möglichkeit, dies zu tun, als die beste Antwort:

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

Fügen Sie dies in Ihren AppDelegate.didFinishLaunchingWithOptions ein, so dass es während der gesamten Lebensdauer Ihrer App auf alle Schaltflächen der Registerkartenleiste wirkt.

3
Ezekiel Victor

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

Sie müssen lediglich self.tabBarController?.cleanTitles() in Ihrem View-Controller aufrufen.

2
j_gonfer

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

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

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

In meinem Fall wurde derselbe ViewController in TabBar und anderen Navigationsabläufen verwendet. In meinem ViewController habe ich self.title = "Some Title" Festgelegt, das in TabBar angezeigt wurde, unabhängig davon, ob Titel nil oder Leerzeichen beim Hinzufügen in der Tab-Leiste festgelegt wurden. Ich habe auch imageInsets wie folgt eingestellt:

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

In meinem ViewController habe ich den Navigationstitel folgendermaßen 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"
}
0
Chintan Shah

Basierend auf all den großartigen Antworten auf dieser Seite habe ich eine andere Lösung entwickelt, mit der Sie den Titel erneut 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)
        }

    }

}
0
ladislas