Problème de positionnement UITabBar UITabBarItem ios 11

Question

J'ai construit mon application en utilisant de nouvelles Xcode 9 beta pour ios 11. J'ai trouvé un problème avec UITabBar où les éléments sont répartis à travers le UITabBar et le titre est aligné à droite de l'image. J'ai essayé de changer le code pour qu'il fonctionne, mais toujours pas de succès.

ios 10+

ios 11

Que je puisse changer la position du titre à l'aide de tabBarItem.titlePositionAdjustment Mais ce n'est pas mon exigence comme il se doit automatiquement ci-dessous l'image elle-même. J'ai essayé de réglage tabbar.itemPositioning to UITabBarItemPositioningCentered et j'ai aussi essayé en changeant itemSpacing et width, mais n'a toujours pas de travail. Quelqu'un peut-il m'aider à comprendre pourquoi cela se produit et comment résoudre ce problème? Je le veux comme ios 10+ version et les images sont prises à partir du coin inférieur gauche de l'iPad.

Answer 1

Je suis le maintien d'un grand app pour iPad écrits pour la plupart en Objective-C, qui a survécu à plusieurs versions du logiciel iOS. J'ai couru dans la situation où j'avais besoin de la pré-iOS 11 onglet apparence de la barre (avec les icônes ci-dessus les titres au lieu d'à côté) pour un couple de barres d'onglets. Ma solution a été de créer une sous-classe de UITabBar qui remplace l' traitCollection méthode afin qu'elle renvoie toujours à l'horizontale-compact caractéristique de la collection. Cela provoque iOS 11 pour afficher les titres ci-dessous les icônes pour tous les onglets de la barre de boutons.

Pour utiliser cette fonction, la classe personnalisée de l'onglet barres dans le storyboard pour cette nouvelle sous-classe et changer tous les points de vente dans le code de ce point à l'onglet barres d'être de ce nouveau type (n'oubliez pas d'importer le fichier d'en-tête ci-dessous).

L' .h fichier est à peu près vide dans ce cas:

//
//  MyTabBar.h
//

#import <UIKit/UIKit.h>

@interface MyTabBar : UITabBar

@end

Ici est la .m fichier avec la mise en œuvre de l' traitCollection méthode:

//
//  MyTabBar.m
//

#import "MyTabBar.h"

@implementation MyTabBar

// In iOS 11, UITabBarItem's have the title to the right of the icon in horizontally regular environments
// (i.e. the iPad).  In order to keep the title below the icon, it was necessary to subclass UITabBar and override
// traitCollection to make it horizontally compact.

- (UITraitCollection *)traitCollection {
    return [UITraitCollection traitCollectionWithHorizontalSizeClass:UIUserInterfaceSizeClassCompact];
}

@end

Answer 2

D'après la réponse de John C, voici la version de Swift 3 qui peut être utilisée par programmation sans recourir à Storyboard ou à un sous-classement:

 extension UITabBar {
    // Workaround for iOS 11's new UITabBar behavior where on iPad, the UITabBar inside
    // the Master view controller shows the UITabBarItem icon next to the text
    override open var traitCollection: UITraitCollection {
        if UIDevice.current.userInterfaceIdiom == .pad {
            return UITraitCollection(horizontalSizeClass: .compact)
        }
        return super.traitCollection
    }
}
 

Answer 3

Pour éviter de gâcher d’autres traits, il n’est pas préférable de les combiner avec les super-classes:

 - (UITraitCollection *)traitCollection
{
  UITraitCollection *curr = [super traitCollection];
  UITraitCollection *compact = [UITraitCollection  traitCollectionWithHorizontalSizeClass:UIUserInterfaceSizeClassCompact];

  return [UITraitCollection traitCollectionWithTraitsFromCollections:@[curr, compact]];
}
 

Answer 4

Version Swift 4 avec une sous-classe qui évite les conflits de noms d'extension / catégorie:

 class TabBar: UITabBar {
  override var traitCollection: UITraitCollection {
    guard UIDevice.current.userInterfaceIdiom == .pad else {
      return super.traitCollection
    }

    return UITraitCollection(horizontalSizeClass: .compact)
  }
}
 

Si vous utilisez Interface Builder et les storyboards, vous pouvez sélectionner la vue de la barre d'onglets dans votre scène UITabBarController et changer sa classe en TabBar dans l'inspecteur d'identité:

Answer 5

NOTE: Ce correctif ci-dessus semble fonctionner assez bien. Vous ne savez pas comment il fonctionne dans l'avenir, mais pour l'instant ça fonctionne assez bien.

---

Selon cette WWDC parler, c'est le nouveau comportement pour:

• iPhone en mode paysage
• iPad tout le temps

Et si je suis en train de lire correctement, ce comportement ne peut pas être changé:

Nous avons cette marque nouvelle apparence de la barre d'onglets, à la fois dans le paysage et sur iPad, où nous montrons l'icône et le texte côte à côte. Et en particulier sur les iPhones l'icône est plus petite et la barre d'onglets est plus petite pour donner un peu plus de place à la verticale.