Domanda semplice, come posso rimuovere il testo dell'elemento della barra delle schede e mostrare solo l'immagine?
Voglio che gli elementi della barra piacciano nell'app di Instagram:
Nell'ispettore in xcode 6 rimuovo il titolo e scelgo un'immagine @ 2x (50px) e @ 3x (75px). Tuttavia l'immagine non utilizza lo spazio libero del testo rimosso. Qualche idea su come ottenere la stessa immagine dell'elemento della barra delle schede come nell'app Instagram?
""per il titolo, forse?
Risposte:
Dovresti giocare con la imageInsetsproprietà 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)
I valori all'interno UIEdgeInsetsdipendono dalla dimensione dell'immagine. Ecco il risultato di quel codice nella mia 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);
}
Ecco come lo fai in uno storyboard.
Cancella il testo del titolo e imposta il riquadro dell'immagine come lo screenshot qui sotto
Ricorda che la dimensione dell'icona dovrebbe seguire le linee guida del design della mela
Ciò significa che dovresti avere 25px x 25px per @ 1x, 50px x 50px per @ 2x, 75px x 75px per @ 3x
L'utilizzo dell'approccio con l'impostazione di ciascuna proprietà UITabBarItems titlesu ""
e l'aggiornamento imageInsetsnon funzionerà correttamente se self.titleè impostato il controller di visualizzazione . Ad esempio, se self.viewControllersdi UITabBarController sono incorporati UINavigationControllere è necessario che il titolo venga visualizzato sulla barra di navigazione. In questo caso imposta UINavigationItemil titolo direttamente usando self.navigationItem.title, not self.title.
Versione rapida di ddiego answer
Compatibile con iOS 11
Chiama questa funzione in viewDidLoad di ogni primo figlio di viewControllers dopo aver impostato il titolo del viewController
La migliore pratica:
In alternativa, come suggerito da @daspianist nei commenti
Crea una sottoclasse simile a questa classe BaseTabBarController: UITabBarController, UITabBarControllerDelegate e inserisci questa funzione nel viewDidLoad della sottoclasse
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)
}
}
}
class BaseTabBarController: UITabBarController, UITabBarControllerDelegatee inserire questa funzione nella sottoclasseviewDidLoad
Se stai usando gli storyboard questa sarebbe la tua migliore opzione. Passa attraverso tutti gli elementi della barra delle schede e per ognuno imposta il titolo su nulla e rende l'immagine a schermo intero. (Devi aver aggiunto un'immagine nello storyboard)
for tabBarItem in tabBar.items!
{
tabBarItem.title = ""
tabBarItem.imageInsets = UIEdgeInsetsMake(6, 0, -6, 0)
}
iOS 11 getta un nodo in molte di queste soluzioni, quindi ho appena risolto i miei problemi su iOS 11 sottoclassando UITabBar e sovrascrivendo 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
}
}
}
Ho usato il seguente codice nel viewDidLoad del mio BaseTabBarController. Nota che nel mio esempio, ho 5 schede e l'immagine selezionata sarà sempre 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)
}
for var i = 0; i < tabBar... , avresti potuto semplicemente dire; for tabBarItems in tabBar.items!
Approccio rapido 4
Sono stato in grado di fare il trucco implementando una funzione che accetta un TabBarItem e fa un po 'di formattazione.
Sposta leggermente l'immagine verso il basso per renderla più centrata e nasconde anche il testo della barra delle schede. Ha funzionato meglio rispetto all'impostazione del titolo su una stringa vuota, perché quando hai anche una NavigationBar, la TabBar riguadagna il titolo del viewController quando selezionata
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)
}
Ultima sintassi
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 usalo nella tua tabBar come:
tabBarItem.setImageOnly()
Ecco un modo migliore e più infallibile per farlo oltre alla risposta principale:
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateNormal];
[[UITabBarItem appearance] setTitleTextAttributes:@{NSForegroundColorAttributeName: [UIColor clearColor]}
forState:UIControlStateHighlighted];
Inseriscilo in AppDelegate.didFinishLaunchingWithOptionsmodo che influisca su tutti i pulsanti della barra delle schede per tutta la durata della tua app.
Un'estensione UITabBarController minima e sicura in Swift (basata sulla risposta di @ korgx9):
extension UITabBarController {
func removeTabbarItemsText() {
tabBar.items?.forEach {
$0.title = ""
$0.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
}
}
}
Basato sulla risposta di 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)
}
}
}
E devi solo chiamare il self.tabBarController?.cleanTitles()tuo controller di visualizzazione.
Sulla base di tutte le ottime risposte in questa pagina, ho creato un'altra soluzione che ti consente anche di mostrare nuovamente il titolo. Invece di rimuovere il contenuto del titolo, cambio semplicemente il colore del carattere in trasparente.
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)
}
}
}
Il modo più semplice e funziona sempre:
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
}
}
}
}
}
}
Nel mio caso, lo stesso ViewController è stato utilizzato in TabBar e in altri flussi di navigazione. All'interno del mio ViewController, ho impostato self.title = "Some Title"che appariva in TabBar indipendentemente dall'impostazione del titolo nilo dello spazio vuoto durante l'aggiunta nella barra delle schede. Ho anche impostato imageInsetscome segue:
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
Quindi all'interno del mio ViewController, ho gestito il titolo di navigazione come segue:
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"
}
crea una sottoclasse di UITabBarController e assegnala alla tua tabBar, quindi nel metodo viewDidLoad inserisci questa riga di codice:
tabBar.items?.forEach({ (item) in
item.imageInsets = UIEdgeInsets.init(top: 8, left: 0, bottom: -8, right: 0)
})
TabBar personalizzata - iOS 13, Swift 5, XCode 11
Basato su storyboard. Può essere ottenuto facilmente anche a livello di programmazione. Solo 4 passaggi da seguire:
Le icone della barra delle schede devono essere di 3 dimensioni, in colore nero. Di solito, scarico da fa2png.io - dimensioni: 25x25, 50x50, 75x75. I file immagine PDF non funzionano!
In Storyboard per l'elemento della barra delle schede impostare l'icona che si desidera utilizzare tramite l'ispettore degli attributi. (vedi screenshot)
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)
}
}
Risultato
Se stai cercando di centrare le schede / modificare i riquadri dell'immagine senza utilizzare numeri magici, quanto segue ha funzionato per me (in Swift 5.2.2):
In una sottoclasse UITabBarController , puoi aggiungere i riquadri dell'immagine dopo aver impostato i controller di visualizzazione.
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)
}
}
Molte delle opzioni precedenti elencano le soluzioni per gestire l'occultamento del testo.