Qualcuno ha problemi con il simulatore di iPhone X attorno al componente UITabBar?

Il mio sembra rendere le icone e il titolo uno sopra l'altro, non sono sicuro che mi manchi qualcosa, l'ho anche eseguito nel simulatore di iPhone 8 e un dispositivo reale in cui sembra a posto proprio come mostrato sul storyboard.

iPhone X:

iPhone 8

Sono stato in grado di aggirare il problema semplicemente chiamando invalidateIntrinsicContentSize su UITabBar in viewDidLayoutSubviews.

-(void)viewDidLayoutSubviews
{
    [super viewDidLayoutSubviews];
    [self.tabBar invalidateIntrinsicContentSize];
}

Nota: la parte inferiore della barra delle schede dovrà essere contenuta nella parte inferiore della vista principale, anziché nell'area di sicurezza, e la barra delle schede non dovrebbe avere vincoli di altezza.

La risposta fornita da VoidLess risolve i problemi di TabBar solo parzialmente. Risolve i problemi di layout all'interno della barra delle schede, ma se si utilizza il controllo della vista che nasconde la barra delle schede, la barra delle schede viene visualizzata in modo errato durante le animazioni (per riprodurla è meglio 2 segui 2 - uno modale e uno push. Se si alternano i segui, è possibile vedere la barra delle schede resa fuori posto). Il codice seguente risolve entrambi i problemi. Ottimo lavoro mela.

class SafeAreaFixTabBar: UITabBar {

var oldSafeAreaInsets = UIEdgeInsets.zero

@available(iOS 11.0, *)
override func safeAreaInsetsDidChange() {
    super.safeAreaInsetsDidChange()

    if oldSafeAreaInsets != safeAreaInsets {
        oldSafeAreaInsets = safeAreaInsets

        invalidateIntrinsicContentSize()
        superview?.setNeedsLayout()
        superview?.layoutSubviews()
    }
}

override func sizeThatFits(_ size: CGSize) -> CGSize {
    var size = super.sizeThatFits(size)
    if #available(iOS 11.0, *) {
        let bottomInset = safeAreaInsets.bottom
        if bottomInset > 0 && size.height < 50 && (size.height + bottomInset < 90) {
            size.height += bottomInset
        }
    }
    return size
}

override var frame: CGRect {
    get {
        return super.frame
    }
    set {
        var tmp = newValue
        if let superview = superview, tmp.maxY != 
        superview.frame.height {
            tmp.origin.y = superview.frame.height - tmp.height
        }

        super.frame = tmp
        }
    }
}

Codice obiettivo C:

@implementation VSTabBarFix {
    UIEdgeInsets oldSafeAreaInsets;
}


- (void)awakeFromNib {
    [super awakeFromNib];

    oldSafeAreaInsets = UIEdgeInsetsZero;
}


- (void)safeAreaInsetsDidChange {
    [super safeAreaInsetsDidChange];

    if (!UIEdgeInsetsEqualToEdgeInsets(oldSafeAreaInsets, self.safeAreaInsets)) {
        [self invalidateIntrinsicContentSize];

        if (self.superview) {
            [self.superview setNeedsLayout];
            [self.superview layoutSubviews];
        }
    }
}

- (CGSize)sizeThatFits:(CGSize)size {
    size = [super sizeThatFits:size];

    if (@available(iOS 11.0, *)) {
        float bottomInset = self.safeAreaInsets.bottom;
        if (bottomInset > 0 && size.height < 50 && (size.height + bottomInset < 90)) {
            size.height += bottomInset;
        }
    }

    return size;
}


- (void)setFrame:(CGRect)frame {
    if (self.superview) {
        if (frame.origin.y + frame.size.height != self.superview.frame.size.height) {
            frame.origin.y = self.superview.frame.size.height - frame.size.height;
        }
    }
    [super setFrame:frame];
}


@end

C'è un trucco con cui possiamo risolvere il problema.

Inserisci il tuo UITabBar all'interno di un UIView.

Questo funziona davvero per me.

Oppure puoi seguire questo link per maggiori dettagli.

override UITabBar sizeThatFits(_)per safeArea

extension UITabBar {
    static let height: CGFloat = 49.0

    override open func sizeThatFits(_ size: CGSize) -> CGSize {
        guard let window = UIApplication.shared.keyWindow else {
            return super.sizeThatFits(size)
        }
        var sizeThatFits = super.sizeThatFits(size)
        if #available(iOS 11.0, *) {
            sizeThatFits.height = UITabBar.height + window.safeAreaInsets.bottom
        } else {
            sizeThatFits.height = UITabBar.height
        }
        return sizeThatFits
    }
}

Ho aggiunto questo alla viewWillAppearmia abitudine UITabBarController, perché nessuna delle risposte fornite ha funzionato per me:

tabBar.invalidateIntrinsicContentSize()
tabBar.superview?.setNeedsLayout()
tabBar.superview?.layoutSubviews()

Ho avuto lo stesso problema.

Se imposto una costante diversa da zero sul vincolo inferiore di UITabBar sull'area sicura:

Inizia a funzionare come previsto ...

Questa è l'unica modifica che ho fatto e non ho idea del perché funzioni, ma se qualcuno lo fa mi piacerebbe saperlo.

Spostare la barra delle schede di 1 punto dal fondo ha funzionato per me.

Ovviamente otterrai un gap facendo ciò che dovrai riempire in qualche modo, ma il testo / le icone ora sono posizionati correttamente.

Aha! In realtà è magico!

Alla fine l'ho capito dopo ore di maledizione di Apple.

UIKit in realtà lo gestisce per te e sembra che gli elementi della barra delle schede spostati siano dovuti a un'installazione errata (e probabilmente a un vero bug UIKit). Non è necessario eseguire la sottoclasse o una vista di sfondo.

UITabBar "funzionerà" solo se è vincolato al fondo della superview, NON all'area di sicurezza inferiore .

Funziona anche con Interface Builder.

Installazione corretta

1. Nel builder di interfacce, visualizzando come iPhone X, trascina una UITabBar verso il punto in cui si aggancia nella parte inferiore dell'area sicura. Quando lo lasci cadere, dovrebbe apparire corretto (riempi lo spazio fino al bordo inferiore).
2. Puoi quindi fare un "Aggiungi vincoli mancanti" e IB aggiungerà i vincoli corretti e la tua barra delle schede funzionerà magicamente su tutti gli iPhone! (Nota che il vincolo inferiore sembra avere un valore costante uguale all'altezza dell'area non sicura di iPhone X, ma la costante è in realtà 0)

A volte non funziona ancora

Ciò che è veramente stupido è che puoi anche vedere inavvertitamente il bug in IB, anche se aggiungi i vincoli esatti che IB aggiunge nei passaggi precedenti!

1. Trascina una UITabBar e non agganciarla all'inserto dell'area di sicurezza inferiore
2. Aggiungi vincoli iniziali, finali e inferiori tutti alla superview (area non sicura) Stranamente, questo si risolverà automaticamente se fai un "Reverse First And Second Item" nella finestra di ispezione dei vincoli per il vincolo inferiore. _ (ツ) _ / ¯

Risolto usando UITabBar sottoclassato per applicare safeAreaInsets:

class SafeAreaFixTabBar: UITabBar {

    var oldSafeAreaInsets = UIEdgeInsets.zero

    @available(iOS 11.0, *)
    override func safeAreaInsetsDidChange() {
        super.safeAreaInsetsDidChange()

        if oldSafeAreaInsets != safeAreaInsets {
            oldSafeAreaInsets = safeAreaInsets

            invalidateIntrinsicContentSize()
            superview?.setNeedsLayout()
            superview?.layoutSubviews()
        }
    }

    override func sizeThatFits(_ size: CGSize) -> CGSize {
        var size = super.sizeThatFits(size)
        if #available(iOS 11.0, *) {
            let bottomInset = safeAreaInsets.bottom
            if bottomInset > 0 && size.height < 50 {
                size.height += bottomInset
            }
        }
        return size
    }
}

Risolto per me chiamando [tabController.view setNeedsLayout];dopo aver respinto il modale nel blocco di completamento.

[vc dismissViewControllerAnimated:YES completion:^(){ 
     UITabBarController* tabController = [UIApplication sharedApplication].delegate.window.rootViewController;
     [tabController.view setNeedsLayout];
}];

UITabBar sta aumentando in altezza per essere al di sopra del pulsante / linea home, ma disegnando la vista secondaria nella sua posizione originale e sovrapponendo UITabBarItem sulla vista secondaria.

Per ovviare al problema, puoi rilevare l'iPhone X e quindi ridurre l'altezza della vista di 32 px per assicurarti che la barra delle schede sia visualizzata nell'area sicura sopra la linea di casa.

Ad esempio, se stai creando la tua TabBar sostituisci programmaticamente

self.tabBarController = [[UITabBarController alloc] init];
self.window.rootViewController = self.tabBarController;

Con questo:

#define IS_IPHONEX (([[UIScreen mainScreen] bounds].size.height-812)?NO:YES)
self.tabBarController = [[UITabBarController alloc] init];    
self.window.rootViewController = [[UIViewController alloc] init] ;
if(IS_IPHONEX)
    self.window.rootViewController.view.frame = CGRectMake(self.window.rootViewController.view.frame.origin.x, self.window.rootViewController.view.frame.origin.y, self.window.rootViewController.view.frame.size.width, self.window.rootViewController.view.frame.size.height + 32) ;
[self.window.rootViewController.view addSubview:self.tabBarController.view];
self.tabBarController.tabBar.barTintColor = [UIColor colorWithWhite:0.98 alpha:1.0] ;
self.window.rootViewController.view.backgroundColor = [UIColor colorWithWhite:0.98 alpha:1.0] ;

NOTA: potrebbe trattarsi di un bug, poiché le dimensioni della vista e il layout della barra delle schede sono impostati dal sistema operativo. Probabilmente dovrebbe essere visualizzato secondo lo screenshot di Apple nelle Linee guida per l'interfaccia umana di iPhone X qui: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Il mio caso era che avevo impostato un'altezza UITabBar personalizzata nel mio UITabBarController, in questo modo:

  override func viewWillLayoutSubviews() {            
        var tabFrame = tabBar.frame
        tabFrame.size.height = 60
        tabFrame.origin.y = self.view.frame.size.height - 60
        tabBar.frame = tabFrame
    }

La rimozione di questo codice è stata la soluzione per visualizzare correttamente TabBar su iPhone X.

La soluzione più semplice che ho trovato è stata semplicemente aggiungere uno spazio di 0,2 pt tra la parte inferiore della barra delle schede e la parte inferiore di safeAreaLayoutGuide.bottomAnchor in questo modo.

tabBar.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: -0.2)

Stavo riscontrando lo stesso problema quando stavo cercando di impostare il frame di UITabBar nel mio TabBarController personalizzato.

self.tabBar.frame = CGRectMake(0, self.view.frame.size.height - kTabBarHeight, self.view.frame.size.width, kTabBarHeight);

Quando l'ho appena adattato alle nuove dimensioni, il problema è andato via

if(IS_IPHONE_X){
    self.tabBar.frame = CGRectMake(0, self.view.frame.size.height - kPhoneXTabBarHeight, self.view.frame.size.width, kPhoneXTabBarHeight);
}
else{
    self.tabBar.frame = CGRectMake(0, self.view.frame.size.height - kTabBarHeight, self.view.frame.size.width, kTabBarHeight);
}

L'ho incontrato oggi con un UITabBar aggiunto manualmente al controller di visualizzazione nello storyboard, allineando il fondo dell'area sicura con una costante di 0, avrei riscontrato il problema, ma cambiandolo in 1 lo avrei risolto. Avere UITabBar con 1 pixel in più del normale era accettabile per la mia applicazione.

Mi sono grattato la testa per questo problema. Sembra essere associato al modo in cui la tabBar viene inizializzata e aggiunta per visualizzare la gerarchia. Ho anche provato sopra soluzioni come la chiamata invalidateIntrinsicContentSize, l'impostazione del frame e anche bottomInsetsall'interno di una sottoclasse UITabBar. Sembrano funzionare temporaneamente ma interrompono alcuni altri scenari o regrediscono la barra delle schede causando alcuni problemi di layout ambigui. Durante il debug del problema ho provato ad assegnare i vincoli di altezza a UITabBar e centerYAnchor, ma nessuno dei due ha risolto il problema. Mi sono reso conto in vista del debugger che l'altezza della tabBar era corretta prima e dopo il problema riprodotto, il che mi ha portato a pensare che il problema fosse nelle sottoview. Ho usato il codice seguente per risolvere con successo questo problema senza regredire a nessun altro scenario.

- (void) viewWillTransitionToSize:(CGSize)size withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator
{
    [super viewWillTransitionToSize:size withTransitionCoordinator:coordinator];
    if (DEVICE_IS_IPHONEX())
    {
        [coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
            for (UIView *view in self.tabBar.subviews)
            {
                if ([NSStringFromClass(view.class) containsString:@"UITabBarButton"])
                {
                    if (@available (iOS 11, *))
                    {
                        [view.bottomAnchor constraintEqualToAnchor:view.superview.safeAreaLayoutGuide.bottomAnchor].active = YES;
                    }
                }
            }
        } completion:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
            [self.tabBar layoutSubviews];
        }];
    }
}

Presupposti: lo sto facendo solo per iPhone X, poiché al momento non sembra riprodursi su nessun altro dispositivo. Si basa sul presupposto che Apple non cambi il nome della classe UITabBarButton nelle future versioni di iOS. Lo stiamo facendo su UITabBarButton solo quando significa che se Apple aggiunge più sottoprocessi interni a UITabBar, potremmo aver bisogno di modificare il codice per adattarlo.

Per favore, fammi sapere se funziona, sarà aperto a suggerimenti e miglioramenti!

Dovrebbe essere semplice creare un rapido equivalente per questo.

Da questo tutorial:

https://github.com/eggswift/ESTabBarController

e dopo l'inizializzazione della barra delle schede scrivendo questa riga nella classe appdelegate

(self.tabBarController.tabBar as? ESTabBar)?.itemCustomPositioning = .fillIncludeSeparator

Risolve il mio problema con la barra delle schede.

Spero che risolva il tuo problema

Grazie

Seleziona la barra delle schede e imposta la casella di controllo "Salva margini relativi area" nell'editor di Impostazioni in questo modo:

Ho avuto il problema simile, all'inizio è stato reso correttamente ma dopo aver impostato badgeValuesu uno dei tabBarItem ha rotto il layout. Ciò che ha funzionato per me senza la sottoclasse è UITabBarstato questo, sulla mia UITabBarControllersottoclasse già creata .

-(void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    NSLayoutYAxisAnchor *tabBarBottomAnchor = self.tabBar.bottomAnchor;
    NSLayoutYAxisAnchor *tabBarSuperviewBottomAnchor = self.tabBar.superview.bottomAnchor;
    [tabBarBottomAnchor constraintEqualToAnchor:tabBarSuperviewBottomAnchor].active = YES;
    [self.view layoutIfNeeded];
}

Ho usato la tabview superview per assicurarmi che i vincoli / ancore si trovino nella stessa gerarchia di visualizzazione ed evitare arresti anomali.

In base alla mia comprensione, poiché questo sembra essere un bug di UIKit, dobbiamo solo riscrivere / reimpostare i vincoli della barra delle schede in modo che il motore di layout automatico possa layout nuovamente la barra delle schede correttamente.

Se hai dei limiti di altezza per la barra delle schede, prova a rimuoverla.

Di fronte allo stesso problema e rimuovendo questo risolto il problema.

Ho creato un nuovo UITabBarController nel mio storyboard e ho spinto tutti i controller di visualizzazione su questo nuovo UITabBarConttoller. Quindi, tutto funziona bene nel simulatore di iPhone X.

Per iPhone puoi farlo, Sottoclasse UITabBarController.

class MyTabBarController: UITabBarController {

override func viewDidLayoutSubviews() {
    super.viewDidLayoutSubviews()
    if #available(iOS 11, *) {
        self.tabBar.heightAnchor.constraint(equalToConstant: 40).isActive = true
        self.tabBar.invalidateIntrinsicContentSize()
    }
  }
}

Vai a Storyboard e consenti Usa guida layout area sicura e modifica la classe di UITabbarController in MyTabBarController

PS Questa soluzione non è testata in caso di applicazione universale e iPad.

provare a cambiare la schermata iniziale con la dimensione @ 3x è (3726 × 6624)

Per me, rimuovere il [self.tabBar setBackgroundImage:]lavoro, forse è un bug UIKit

Per me questo ha risolto tutti i problemi:

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        let currentHeight = tabBar.frame.height
        tabBar.frame = CGRect(x: 0, y: view.frame.size.height - currentHeight, width: view.frame.size.width, height: currentHeight)
    }

Stavo usando a UITabBarControllernello storyboard e all'inizio funzionava bene per me, ma dopo l'aggiornamento alla nuova versione di Xcode ha iniziato a darmi problemi legati all'altezza della tabBar.

Per me, la correzione era eliminare l'esistente UITabBarControllerdallo storyboard e ricrearlo trascinandolo dalla libreria degli oggetti del generatore di interfaccia .

Per coloro che scrivono interi a livello di UITabBarControllerprogrammazione, è possibile utilizzareUITabBarItem.appearance().titlePositionAdjustment per regolare la posizione del titolo

Quindi in questo caso che vuoi aggiungere uno spazio tra Icon e Title usalo in viewDidLoad:

    override func viewDidLoad() {
        super.viewDidLoad()

        // Specify amount to offset a position, positive for right or down, negative for left or up
        let verticalUIOffset = UIOffset(horizontal: 0, vertical: hasTopNotch() ? 5 : 0)

        UITabBarItem.appearance().titlePositionAdjustment = verticalUIOffset
    }

rilevare se il dispositivo ha una schermata Notch:

  func hasTopNotch() -> Bool {
      if #available(iOS 11.0, tvOS 11.0, *) {
        return UIApplication.shared.delegate?.window??.safeAreaInsets.top ?? 0 > 20
      }
      return false
  }

Stavo avendo lo stesso problema che è stato risolto impostando gli elementi della tabBar dopo che la barra delle schede era stata disposta.

Nel mio caso il problema si è verificato quando:

1. C'è un controller di visualizzazione personalizzato
2. Un UITabBar viene creato nell'inizializzatore del controller di visualizzazione
3. Gli elementi della barra delle schede vengono impostati prima del caricamento della vista
4. Nella vista caricata la barra delle schede viene aggiunta alla vista principale del controller di visualizzazione
5. Quindi, gli elementi vengono visualizzati come menzionato.

Penso che questo sia un bug UIKit di iPhoneX. perché funziona:

if (@available(iOS 11.0, *)) {
    if ([UIApplication sharedApplication].keyWindow.safeAreaInsets.top > 0.0) {
       self.tabBarBottomLayoutConstraint.constant = 1.0;
    }
} 

Credo che potresti stendere la barra delle schede contro la guida di layout sicura in basso. Questo probabilmente non è quello che vuoi poiché la barra delle schede sembra fare i suoi calcoli per posizionare gli elementi della barra delle schede in modo sicuro in cima alla linea di casa in iPhone X. Imposta il tuo vincolo inferiore contro il fondo della superview . Dovresti vedere che si posiziona correttamente su iPhone X e su altri iPhone.