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


87

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:

Geben Sie hier die Bildbeschreibung ein

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?



1
Verwendung ""für den Titel, vielleicht?
Holex

1
Das Setzen von Offsets ist nur ein Trick, die richtige Antwort ist etwas weiter unten. Sie sollten navigationItem.title = "irgendein Titel"
Davit Siradeghyan

Antworten:


128

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:

Geben Sie hier die Bildbeschreibung ein


25
Sie können die Bildeinfügungen auch im Inspektor anpassen.
Upvote

Magische Zahlen sind eine schlechte Idee. In meiner Antwort finden Sie eine universell kompatible Möglichkeit, dasselbe zu erreichen.
Ezekiel Victor

4
Dies funktioniert in iOS 11 nicht mehr. Wenn Sie auf die aktive Registerkarte doppelklicken, werden die Einfügungen aus irgendeinem Grund verdoppelt.
Ben Gotow

@ BenGotow das gleiche Problem hast du eine Lösung?
Dixit Akabari

@DixitAkabari andere Leute haben bereits einige gute Lösungen für iOS 11
Pranav Kasetti

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

1
Anstatt den Titel zu entfernen, ändern Sie die Textfarbe, um sie zu löschen. Titel kann nützlich sein.
Eduardo Mauro

1
Kodos an Eduardo! Mir wurde klar, dass eine gute Option auch darin besteht, ein vertikales UIOffset auf den Titel des Elements zu setzen. PositionAjustement
Julius

2
Wo legen Sie dies in Ihrem benutzerdefinierten TabBar-Controller ab?
UKDataGeek

69

So geht's in einem Storyboard.

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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


44

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.


2
Dies scheint eine viel sauberere Methode zu sein. +1 @Oleg dies sollte als Antwort markiert werden.
Akseli

29

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

2
Tolle Funktion! Sie können alternativ eine Unterklasse wie diese class BaseTabBarController: UITabBarController, UITabBarControllerDelegateviewDidLoad
erstellen

25

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

Gut, dass das Bild verzogen wird, wenn Sie nicht sowohl die oberen als auch die unteren Einfügungen festlegen.
Julius

14

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

Dies ist das einzige, was für mich funktioniert hat, aber ich musste den Code in 'override func viewDidLayoutSubviews' der Unterklasse von MyTabBarController einfügen. Ich habe den tabBarController unterklassifiziert und ihn so genannt
Lance Samaria

Die Lösung hat bei mir gut funktioniert. Ich habe es als Erweiterung verwendet, damit es einfacher hinzuzufügen ist
Michal Gumny

@LanceSamaria dies funktionierte, ohne dass ich den Controller-Code der Registerkartenleiste berühren musste
Pranav Kasetti

12

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

1
Anstatt zu verwenden for var i = 0; i < tabBar... , hätten Sie einfach sagen können; for tabBarItems in tabBar.items!
Jesse Onolemen

10

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

6

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.


3
Dies verbirgt nur den Titel und passt die Position des Bildes nicht an.
Mustafa

2
Ja, aber die Frage sagte nichts über das Anpassen des Bildes aus. Nur den Text verstecken. Und das Verstecken des Textes zum Nachteil des Entfernens des Titels von einem Ansichts-Controller scheint falsch. Besonders wenn Sie diesen Titel verwenden könnten, um ihn als Teil Ihres Navigationsansichts-
Controllers anzuzeigen

6

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

2

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 .


1

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

    }

}

0

Geben Sie hier die Bildbeschreibung ein

Code:

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

0

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

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

0

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

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!

    Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

Geben Sie hier die Bildbeschreibung ein

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

    }}

  2. Ergebnis Geben Sie hier die Bildbeschreibung ein


0

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.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.