Quelqu'un a-t-il un problème avec le simulateur iPhone X autour du composant UITabBar?

Le mien semble rendre les icônes et le titre les uns sur les autres, je ne suis pas sûr s'il me manque quelque chose, je l'ai également exécuté dans le simulateur de l'iPhone 8, et sur un appareil réel où ça a l'air bien, comme indiqué sur le planche d'histoire.

iPhone X:

iPhone 8

J'ai pu contourner le problème en appelant simplement invalidateIntrinsicContentSize sur UITabBar dans viewDidLayoutSubviews.

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

Remarque: Le bas de la barre d'onglets devra être contenu au bas de la vue principale, plutôt que dans la zone de sécurité, et la barre d'onglets ne doit avoir aucune contrainte de hauteur.

La réponse fournie par VoidLess ne corrige que partiellement les problèmes de TabBar. Il corrige les problèmes de mise en page dans la barre d'onglets, mais si vous utilisez viewcontroller qui masque la barre d'onglets, la barre d'onglets est rendue de manière incorrecte pendant les animations (pour la reproduire, il est préférable d'avoir 2 segues - une modale et une poussée. Si vous alternez les segues, vous pouvez voir la barre d'onglets rendue déplacée). Le code ci-dessous résout les deux problèmes. Bon travail de pomme.

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

Code 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

Il existe une astuce par laquelle nous pouvons résoudre le problème.

Mettez simplement votre UITabBar dans un UIView.

Cela fonctionne vraiment pour moi.

Ou vous pouvez suivre ce lien pour plus de détails.

remplacement UITabBar sizeThatFits(_)pour 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
    }
}

J'ai ajouté ceci à viewWillAppearma coutume UITabBarController, car aucune des réponses fournies n'a fonctionné pour moi:

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

J'ai eu le même problème.

Si je place une constante non nulle sur la contrainte inférieure de l'UITabBar à la zone de sécurité:

Cela commence à fonctionner comme prévu ...

C'est le seul changement que j'ai fait et je ne sais pas pourquoi cela fonctionne, mais si quelqu'un le fait, j'aimerais le savoir.

Déplacer la barre d'onglets à 1 point du bas a fonctionné pour moi.

Bien sûr, vous obtiendrez un vide en le faisant que vous devrez combler d'une manière ou d'une autre, mais le texte / les icônes sont maintenant correctement positionnés.

Ah! C'est en fait magique!

J'ai finalement compris cela après des heures à maudire Apple.

UIKit gère cela pour vous, et il semble que les éléments de la barre d'onglets décalés soient dus à une configuration incorrecte (et probablement à un bogue UIKit réel). Il n'y a pas besoin de sous-classification ou de vue d'arrière-plan.

UITabBar "fonctionnera simplement" s'il est contraint au bas du superview, PAS à la zone de sécurité inférieure .

Cela fonctionne même dans le constructeur d'interface.

Configuration correcte

1. Dans le générateur d'interface, sous forme d'iPhone X, faites glisser un UITabBar là où il s'aligne sur la zone de sécurité inférieure. Lorsque vous le déposez, il doit avoir l'air correct (remplissez l'espace jusqu'au bord inférieur).
2. Vous pouvez alors faire un "Ajouter des contraintes manquantes" et IB ajoutera les bonnes contraintes et votre barre d'onglets fonctionnera comme par magie sur tous les iPhones! (Notez que la contrainte du bas semble avoir une valeur constante égale à la hauteur de la zone non sécurisée de l'iPhone X, mais la constante est en fait 0)

Parfois ça ne marche toujours pas

Ce qui est vraiment stupide, c'est que vous pouvez également voir le bogue dans IB, même si vous ajoutez les contraintes exactes qu'IB ajoute dans les étapes ci-dessus!

1. Faites glisser un UITabBar et ne l'alignez pas sur l'encart de la zone de sécurité inférieure
2. Ajouter des contraintes de début, de fin et de fond à superview (zone non sûre) Bizarrement, cela se corrigera si vous faites un "Inverser le premier et le deuxième élément" dans l'inspecteur de contraintes pour la contrainte du bas. ¯_ (ツ) _ / ¯

Corrigé en utilisant UITabBar sous-classé pour appliquer 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
    }
}

Résolu pour moi en appelant [tabController.view setNeedsLayout]; après avoir rejeté le modal dans le bloc d'achèvement.

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

L'UITabBar augmente en hauteur pour être au-dessus du bouton / de la ligne d'accueil, mais dessine la sous-vue à son emplacement d'origine et superpose l'UITabBarItem sur la sous-vue.

Pour contourner ce problème, vous pouvez détecter l'iPhone X, puis réduire la hauteur de la vue de 32 pixels pour vous assurer que la barre d'onglets est affichée dans la zone de sécurité au-dessus de la ligne d'accueil.

Par exemple, si vous créez votre TabBar, remplacez par programme

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

Avec ça:

#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] ;

REMARQUE: cela pourrait bien être un bogue, car les tailles de vue et la disposition de la barre d'onglets sont définies par le système d'exploitation. Il devrait probablement s'afficher selon la capture d'écran d'Apple dans les directives de l'interface humaine de l'iPhone X ici: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

Mon cas était que j'avais défini une hauteur UITabBar personnalisée dans mon UITabBarController, comme ceci:

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

La suppression de ce code était la solution pour que la TabBar s'affiche correctement sur l'iPhone X.

La solution la plus simple que j'ai trouvée était d'ajouter simplement un espace de 0,2 pt entre le bas de la barre d'onglets et le bas de safeAreaLayoutGuide.bottomAnchor comme ça.

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

J'avais le même problème lorsque j'essayais de définir le cadre de UITabBar dans mon TabBarController personnalisé.

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

Lorsque je l'ai juste ajusté à la nouvelle taille, le problème a disparu

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

J'ai rencontré cela aujourd'hui avec un UITabBar ajouté manuellement au contrôleur de vue dans le storyboard.Lors de l'alignement au bas de la zone de sécurité avec une constante de 0, j'obtiendrais le problème, mais le changer à 1 résoudrait le problème. Avoir l'UITabBar 1 pixel de plus que la normale était acceptable pour mon application.

Je me suis gratté la tête sur ce problème. Il semble être associé à la façon dont la tabBar est initialisée et ajoutée pour afficher la hiérarchie. J'ai également essayé les solutions ci-dessus telles que l'appel invalidateIntrinsicContentSize, la définition du cadre et également bottomInsetsdans une sous-classe UITabBar. Ils semblent cependant fonctionner temporairement et ils rompent avec un autre scénario ou régressent la barre d'onglets en provoquant un problème de mise en page ambigu. Lorsque j'ai débogué le problème, j'ai essayé d'attribuer les contraintes de hauteur à UITabBar et centerYAnchor, mais aucun n'a résolu le problème. J'ai réalisé dans le débogueur de vue que la hauteur de tabBar était correcte avant et après le problème reproduit, ce qui m'a amené à penser que le problème était dans les sous-vues. J'ai utilisé le code ci-dessous pour résoudre ce problème avec succès sans régresser aucun autre scénario.

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

Hypothèses: je ne fais cela que pour l'iPhone X, car il ne semble pas se reproduire sur aucun autre appareil pour le moment. Est basé sur l'hypothèse qu'Apple ne change pas le nom de la classe UITabBarButton dans les futures versions d'iOS. Nous faisons cela sur UITabBarButton uniquement lorsque cela signifie que si Apple ajoute plus de sous-vues internes à UITabBar, nous devrons peut-être modifier le code pour s'adapter à cela.

S'il vous plaît laissez-moi savoir si cela fonctionne, sera ouvert aux suggestions et améliorations!

Il devrait être simple de créer un équivalent rapide pour cela.

De ce tutoriel:

https://github.com/eggswift/ESTabBarController

et après l'initialisation de la barre d'onglets en écrivant cette ligne dans la classe appdelegate

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

Résout mon problème de barre d'onglets.

J'espère que cela résout votre problème

Merci

Sélectionnez la barre d'onglets et cochez la case "Enregistrer les marges relatives de la zone" dans l'éditeur d'inspecteur comme ceci:

J'ai eu le même problème, au début, il a été rendu correctement mais après l'installation badgeValuesur l'un des tabBarItem, il a cassé la mise en page. Ce qui a fonctionné pour moi sans sous-classer UITabBarétait ceci, sur ma UITabBarControllersous-classe déjà créée .

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

J'ai utilisé tabBar superview pour m'assurer que les contraintes / ancres sont sur la même hiérarchie de vues et éviter les plantages.

D'après ce que j'ai compris, puisque cela semble être un bogue UIKit, nous devons juste réécrire / redéfinir les contraintes de la barre d'onglets pour que le moteur de mise en page automatique puisse à nouveau disposer correctement la barre d'onglets.

Si vous avez une contrainte de hauteur pour la barre d'onglets, essayez de la supprimer.

Face au même problème et la suppression de cela a résolu le problème.

J'ai créé un nouveau UITabBarController dans mon storyboard et poussé tous les contrôleurs de vue vers ce nouveau UITabBarConttoller. Donc, tout fonctionne bien dans le simulateur iPhone X.

Pour iPhone, vous pouvez le faire, sous-classe UITabBarController.

class MyTabBarController: UITabBarController {

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

Accédez à Storyboard et autorisez Utiliser le guide de mise en page de zone sûre et changez la classe de UITabbarController en MyTabBarController

PS Cette solution n'est pas testée en cas d'application universelle et iPad.

essayez de changer l'écran de démarrage avec une taille @ 3x est (3726 × 6624)

Pour moi, supprimez le [self.tabBar setBackgroundImage:]travail, c'est peut-être un bogue UIKit

Pour moi, cela a résolu tous les problèmes:

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

J'utilisais un UITabBarControllerdans le storyboard et au début, cela fonctionnait bien pour moi, mais après la mise à niveau vers la nouvelle version de Xcode, cela a commencé à me poser des problèmes liés à la hauteur de la tabBar.

Pour moi, le correctif consistait à supprimer l'existant UITabBarControllerdu storyboard et à le recréer en le faisant glisser depuis la bibliothèque d'objets du générateur d'interface .

Pour ceux qui écrivent entièrement par UITabBarControllerprogramme, vous pouvez utiliser UITabBarItem.appearance().titlePositionAdjustmentpour ajuster la position du titre

Donc, dans ce cas où vous souhaitez ajouter un espace entre l'icône et le titre, utilisez-le dans 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
    }

détection si l'appareil a un écran Notch:

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

J'avais le même problème qui a été résolu en définissant les éléments de la tabBar après la disposition de la barre d'onglets.

Dans mon cas, le problème est survenu lorsque:

1. Il existe un contrôleur de vue personnalisé
2. Un UITabBar est créé dans l'initialiseur du contrôleur de vue
3. Les éléments de la barre d'onglets sont définis avant le chargement de la vue
4. Dans la vue a été chargée, la barre d'onglets est ajoutée à la vue principale du contrôleur de vue
5. Ensuite, les éléments sont rendus comme vous le mentionnez.

Je pense que c'est un bug UIKit de iPhoneX. parce que ça marche:

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

Je pense que vous disposez peut-être de la barre d'onglets contre le guide de mise en page sécurisé inférieur. Ce n'est probablement pas ce que vous voulez car la barre d'onglets semble faire ses propres calculs pour positionner les éléments de la barre d'onglets en toute sécurité au-dessus de la ligne d'accueil dans l'iPhone X. Configurez votre contrainte inférieure contre le bas de la vue . Vous devriez voir qu'il se présente correctement sur l' iPhone X ainsi que sur d'autres iPhones.