Alguém está tendo problemas com o simulador do iPhone X em torno do componente UITabBar?

O meu parece renderizar os ícones e o título um sobre o outro, não tenho certeza se estou perdendo alguma coisa, também o executei no simulador do iPhone 8 e em um dispositivo real em que ele parece bem, como mostrado na storyboard.

iPhone X:

iPhone 8

Consegui solucionar o problema simplesmente chamando invalidateIntrinsicContentSize na UITabBar em viewDidLayoutSubviews.

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

Nota: A parte inferior da barra de guias precisará estar contida na parte inferior da vista principal, em vez da área segura, e a barra de guias não deve ter restrição de altura.

A resposta fornecida pelo VoidLess corrige os problemas do TabBar apenas parcialmente. Ele corrige problemas de layout na barra de guias, mas se você usar o viewcontroller que oculta a barra de guias, a barra de guias é renderizada incorretamente durante as animações (para reproduzi-lo é melhor ter 2 segues - um modal e um push. Se você alternar os segues, poderá veja a barra de guias sendo renderizada fora do lugar). O código abaixo corrige os dois problemas. Bom trabalho apple.

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

Código Objective-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

Existe um truque pelo qual podemos resolver o problema.

Basta colocar seu UITabBar dentro de um UIView.

Isso realmente está funcionando para mim.

Ou você pode seguir este link para obter mais detalhes.

substituir UITabBar sizeThatFits(_)por 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
    }
}

Adicionei isso ao viewWillAppearmeu costume UITabBarController, porque nenhuma das respostas fornecidas funcionou para mim:

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

Eu tive o mesmo problema.

Se eu definir qualquer constante diferente de zero na restrição inferior do UITabBar para a área segura:

Começa a funcionar como esperado ...

Essa é a única alteração que fiz e não tenho idéia do por que funciona, mas se alguém fizer, eu adoraria saber.

Mover a barra de guias 1 ponto para baixo funcionou para mim.

É claro que você terá uma lacuna ao fazê-lo, que precisará preencher de alguma forma, mas o texto / ícones agora estão posicionados corretamente.

Aha! É realmente mágico!

Finalmente descobri isso depois de horas amaldiçoando a Apple.

O UIKit realmente lida com isso para você, e parece que os itens alterados da barra de guias são devidos à configuração incorreta (e provavelmente um bug real do UIKit). Não há necessidade de subclassificação ou exibição em segundo plano.

O UITabBar "funcionará" apenas se estiver restrito ao fundo da superview, NÃO à área segura do fundo .

Até funciona no construtor de interfaces.

Configuração correta

1. No criador de interface, visualizado como iPhone X, arraste um UITabBar para onde ele encaixa na área inferior segura. Quando você soltá-lo, ele deve parecer correto (preencha todo o espaço até a borda inferior).
2. Você pode então fazer um "Adicionar restrições ausentes" e o IB adicionará as restrições corretas e sua barra de guias funcionará magicamente em todos os iPhones! (Observe que a restrição inferior parece ter um valor constante igual à altura da área insegura do iPhone X, mas a constante é realmente 0)

Às vezes ainda não funciona

O que é realmente idiota é que você também pode ver o bug no IB, mesmo se adicionar as restrições exatas que o IB adiciona nas etapas acima!

1. Arraste um UITabBar e não o encaixe na área inferior segura
2. Adicione restrições iniciais, finais e inferiores à supervisão (área não segura) Estranhamente, isso será corrigido se você fizer um "Reverse First And Second Item" no inspetor de restrição para a restrição inferior. ¯_ (ツ) _ / ¯

Corrigido usando UITabBar subclassed para aplicar 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
    }
}

Resolvido para mim ligando [tabController.view setNeedsLayout];depois de descartar o modal no bloco de conclusão.

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

O UITabBar está aumentando de altura para ficar acima do botão / linha inicial, mas desenha a subvisão em seu local original e sobrepõe o UITabBarItem sobre a subvisão.

Como solução alternativa, você pode detectar o iPhone X e reduzir a altura da visualização em 32px para garantir que a barra de guias seja exibida na área segura acima da linha inicial.

Por exemplo, se você estiver criando seu TabBar, substitua programaticamente

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

Com isso:

#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: Isso pode ser um bug, pois os tamanhos das visualizações e o layout da barra de guias são definidos pelo sistema operacional. Provavelmente, ele deve ser exibido conforme a captura de tela da Apple nas Diretrizes de interface humana do iPhone X aqui: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Meu caso foi que eu havia definido uma altura UITabBar personalizada no meu UITabBarController, assim:

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

A remoção desse código foi a solução para o TabBar ser exibido corretamente no iPhone X.

A solução mais simples que encontrei foi simplesmente adicionar um espaço de 0,2 pt entre a parte inferior da barra de guias e a parte inferior do safeAreaLayoutGuide.bottomAnchor dessa maneira.

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

Eu estava tendo o mesmo problema quando tentava definir o quadro do UITabBar no meu TabBarController personalizado.

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

Quando apenas o ajustei ao novo tamanho, o problema desapareceu

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

Encontrei isso hoje com um UITabBar adicionado manualmente ao controlador de exibição no storyboard. Ao alinhar a parte inferior da área segura com uma constante de 0, eu obteria o problema, mas alterá-lo para 1 resolveria o problema. Ter o UITabBar acima de 1 pixel a mais do que o normal era aceitável para o meu aplicativo.

Eu arranhei minha cabeça com esse problema. Parece estar associado a como a tabBar é inicializada e adicionada para visualizar a hierarquia. Eu também tentei soluções acima, como chamar invalidateIntrinsicContentSize, definir o quadro e também bottomInsetsdentro de uma subclasse UITabBar. Eles parecem funcionar no entanto temporariamente e rompem com outro cenário ou regridem a barra de guias, causando algum problema de layout ambíguo. Quando estava depurando o problema, tentei atribuir as restrições de altura ao UITabBar e ao centerYAnchor, mas nenhum deles resolveu o problema. Percebi no depurador de exibição que a altura da tabBar estava correta antes e depois da reprodução do problema, o que me levou a pensar que o problema estava nas subvisões. Usei o código abaixo para corrigir com êxito esse problema sem regredir nenhum outro cenário.

- (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];
        }];
    }
}

Pressupostos: estou fazendo isso apenas no iPhone X, pois ele não parece ser reproduzido em nenhum outro dispositivo no momento. É baseado no pressuposto de que a Apple não altera o nome da classe UITabBarButton em versões futuras do iOS. Estamos fazendo isso no UITabBarButton apenas quando significa que, se a apple adicionar mais subvisões internas ao UITabBar, talvez seja necessário modificar o código para ajustar isso.

Deixe-me saber se isso funciona, estará aberto a sugestões e melhorias!

Deve ser simples criar um equivalente rápido para isso.

Neste tutorial:

https://github.com/eggswift/ESTabBarController

e após a inicialização da barra de guias, escrevendo esta linha na classe appdelegate

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

Resolve meu problema de barra de guias.

Espero que isso resolva seu problema

obrigado

Marque a barra de guias e defina a caixa de seleção "Salvar margens relativas da área" no Inspector Editor da seguinte forma:

Eu tive o problema semelhante, no início ele foi renderizado corretamente, mas após a instalação badgeValueem um dos tabBarItem, ele quebrou o layout. O que funcionou para mim sem subclassificar UITabBarfoi isso, na minha UITabBarControllersubclasse já criada .

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

Usei a visão geral tabBar para garantir que as restrições / âncoras estejam na mesma hierarquia de visualizações e evitar falhas.

Baseado no meu entendimento, como esse parece ser um bug do UIKit, precisamos reescrever / redefinir as restrições da barra de guias para que o mecanismo de layout automático possa fazer o layout da barra de guias novamente.

Se você tiver alguma restrição de altura para a barra de guias, tente removê-la.

Enfrentou o mesmo problema e removê-lo resolveu o problema.

Criei um novo UITabBarController no meu storyboard e enviei todos os controladores de exibição para esse novo UITabBarConttoller. Portanto, tudo funciona bem no simulador do iPhone X.

Para o iPhone, você pode fazer isso, subclasse UITabBarController.

class MyTabBarController: UITabBarController {

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

Vá para o Storyboard e permita Use Use Safe Layout Layout Guide e altere a classe do UITabbarController para o para MyTabBarController

PS Esta solução não foi testada no caso de aplicação universal e iPad.

tente alterar a tela inicial com o tamanho @ 3x é (3726 × 6624)

Para mim, remova o [self.tabBar setBackgroundImage:]trabalho, talvez seja o bug do UIKit

Para mim, isso corrigiu todos os problemas:

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

Eu estava usando um UITabBarControllerno storyboard e no começo estava funcionando bem para mim, mas depois de atualizar para a versão mais recente do Xcode, ele começou a me dar problemas relacionados à altura da tabBar.

Para mim, a correção foi excluir o existente UITabBarControllerdo storyboard e recriar, arrastando-o da biblioteca de objetos do construtor de interface .

Para quem escreve todo UITabBarControllerprogramaticamente, você pode usar UITabBarItem.appearance().titlePositionAdjustmentpara ajustar a posição do título

Portanto, nesse caso, você deseja adicionar um espaço entre o ícone e o título, use-o em 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
    }

detectando se o dispositivo possui uma tela Notch:

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

Eu estava tendo o mesmo problema que foi resolvido definindo os itens da tabBar após o layout da barra de guias.

No meu caso, o problema ocorreu quando:

1. Existe um controlador de exibição personalizado
2. Um UITabBar é criado no inicializador do controlador de exibição
3. Os itens da barra de guias são definidos antes do carregamento da visualização
4. Tendo em vista o carregamento, a barra de guias é adicionada à visualização principal do controlador de visualização
5. Em seguida, os itens são renderizados como você mencionou.

Eu acho que este é um bug do UIKit do iPhoneX. porque funciona:

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

Eu acredito que você pode estar colocando a barra de guias no guia de layout seguro inferior. Provavelmente não é o que você deseja, pois a barra de guias parece fazer seus próprios cálculos para posicionar os itens da barra de guias com segurança na parte superior da linha inicial do iPhone X. Configure sua restrição inferior na parte superior da superview . Você deve observar que o layout está correto no iPhone X e em outros iPhones.