La barre d'état et la barre de navigation apparaissent au-delà des limites de ma vue dans iOS 7

Question

J'ai récemment téléchargé Xcode 5 DP pour tester mes applications dans iOS 7. La première chose que j'ai remarquée et confirmée est que les limites de ma vue ne sont pas toujours redimensionnées pour tenir compte de la barre d'état et de la barre de navigation.

Sur viewDidLayoutSubviews j'imprime les limites de la vue :

{{0, 0}, {320, 568}}

Ainsi, mon contenu apparaît sous la barre de navigation et la barre d'état.

Je sais que je pourrais tenir compte de la hauteur moi-même en obtenant la hauteur de l'écran principal, en soustrayant la hauteur de la barre d'état et la hauteur de la barre de navigation, mais cela me semble être un travail supplémentaire inutile.

Comment puis-je résoudre ce problème ?

Mise à jour :

J'ai trouvé une solution pour ce problème spécifique. Définissez la propriété translucide de la barre de navigation sur NON :

self.navigationController.navigationBar.translucent = NO;

Cela empêchera la vue d'être encadrée sous la barre de navigation et la barre d'état.

Cependant, je n'ai pas trouvé de solution pour le cas où vous souhaitez que la barre de navigation soit translucide. Par exemple, lorsque je visualise une photo en plein écran, je souhaite que la barre de navigation soit translucide et que la vue soit encadrée en dessous. Cela fonctionne, mais lorsque je fais basculer l'affichage ou le masquage de la barre de navigation, j'obtiens des résultats encore plus étranges. La première vue secondaire (un UIScrollView) voit ses limites et son origine y modifiées à chaque fois.

Answer 1

Vous pouvez y parvenir en implémentant une nouvelle propriété appelée edgesForExtendedLayout dans le SDK iOS7. Veuillez ajouter le code suivant pour y parvenir,

if ([self respondsToSelector:@selector(edgesForExtendedLayout)])
        self.edgesForExtendedLayout = UIRectEdgeNone;

Vous devez ajouter ce qui précède dans votre -(void)viewDidLoad méthode.

iOS 7 apporte plusieurs modifications à la façon dont vous mettez en page et personnalisez l'apparence de votre écran. UI . Les modifications apportées à la mise en page du contrôleur de vue, à la couleur de la teinte et à la police affectent tous les éléments de l'interface utilisateur. UIKit dans votre application. En outre, les améliorations apportées aux API de reconnaissance des gestes vous permettent de contrôler plus finement les interactions gestuelles.

Utilisation des contrôleurs de vue

Dans iOS 7, les contrôleurs de vue utilisent la disposition plein écran. En même temps, iOS 7 vous donne un contrôle plus granulaire sur la façon dont un contrôleur de vue dispose ses vues. En particulier, le concept de disposition plein écran a été affiné pour permettre à un contrôleur de vue de spécifier la disposition de chaque bord de sa vue.

Le site wantsFullScreenLayout est obsolète dans iOS 7. Si vous spécifiez actuellement wantsFullScreenLayout = NO Si le contrôleur de vue est exécuté sous iOS 7, il se peut que son contenu s'affiche à un endroit inattendu de l'écran.

Pour ajuster la façon dont un contrôleur de vue dispose ses vues, UIViewController offre les propriétés suivantes :

• edgesForExtendedLayout

Le site edgesForExtendedLayout utilise la propriété UIRectEdge qui spécifie chacun des quatre bords d'un rectangle, en plus de spécifier none et all. Utilisez edgesForExtendedLayout pour spécifier quels bords d'une vue doivent être étendus, indépendamment de la translucidité des barres. Par défaut, la valeur de cette propriété est UIRectEdgeAll .

• extendedLayoutIncludesOpaqueBars

Si votre conception utilise des barres opaques, affinez edgesForExtendedLayout en fixant également le extendedLayoutIncludesOpaqueBars à la propriété NON . (La valeur par défaut de extendedLayoutIncludesOpaqueBars est NON .)

• automaticallyAdjustsScrollViewInsets

Si vous ne souhaitez pas que les insertions de contenu d'une vue défilante soient automatiquement ajustées, définissez la valeur suivante automaticallyAdjustsScrollViewInsets à NON . (La valeur par défaut de automaticallyAdjustsScrollViewInsets est OUI .)

• topLayoutGuide, bottomLayoutGuide

Le site topLayoutGuide et bottomLayoutGuide indiquent l'emplacement des bords supérieurs ou inférieurs de la barre dans la vue d'un contrôleur d'affichage. Si les barres doivent chevaucher le haut ou le bas d'une vue, vous pouvez utiliser Interface Builder pour positionner la vue par rapport à la barre en créant des contraintes au bas de la propriété topLayoutGuide ou au sommet de bottomLayoutGuide. (Si aucune barre ne doit chevaucher la vue, la partie inférieure de topLayoutGuide est le même que le haut de la vue et le haut de bottomLayoutGuide est le même que le bas de la vue). Les deux propriétés sont créées paresseusement lorsqu'elles sont demandées.

Veuillez vous référer, document de pomme

Answer 2

Vous n'avez pas besoin de calculer de combien il faut déplacer le tout vers le bas, il y a une propriété intégrée pour cela. Dans Interface Builder, mettez en surbrillance votre contrôleur de vue, puis accédez à l'inspecteur d'attributs. Vous y verrez quelques cases à cocher à côté des mots "Extend Edges". Comme vous pouvez le voir, dans la première capture d'écran, la sélection par défaut permet au contenu d'apparaître sous les barres supérieures et inférieures, mais pas sous les barres opaques, ce qui explique pourquoi le réglage du style de barre sur non translucide a fonctionné pour vous.

Comme vous pouvez le voir dans la première capture d'écran, deux éléments d'interface utilisateur sont cachés sous la barre de navigation. Ces éléments, un UIButton et un UISegmentedControl, ont tous deux leur origine "y" fixée à zéro, et le contrôleur de vue est configuré pour autoriser le contenu sous la barre supérieure.

Cette deuxième capture d'écran montre ce qui se passe lorsque vous désélectionnez la case à cocher "Sous les barres supérieures". Comme vous pouvez le voir, la vue des contrôleurs de vue a été décalée vers le bas de manière appropriée pour que son origine y se trouve juste en dessous de la barre de navigation.

Ceci peut également être accompli de manière programmatique par l'utilisation de la fonction -[UIViewController edgesForExtendedLayout] . Voici un lien vers la référence de la classe pour edgeForExtendedLayout et pour UIRectEdge

[self setEdgesForExtendedLayout:UIRectEdgeNone];

Answer 3

J'ai créé ma vue de manière programmatique et cela a fini par fonctionner pour moi :

- (void) viewDidLayoutSubviews {
    // only works for iOS 7+
    if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7.0) {
        CGRect viewBounds = self.view.bounds;
        CGFloat topBarOffset = self.topLayoutGuide.length;

        // snaps the view under the status bar (iOS 6 style)
        viewBounds.origin.y = topBarOffset * -1;

        // shrink the bounds of your view to compensate for the offset
        viewBounds.size.height = viewBounds.size.height + (topBarOffset * -1);
        self.view.bounds = viewBounds;
    }
}

Source : (en topLayoutGuide section au bas de la page 39).

Answer 4

Si vous voulez que la vue ait la barre de navigation translucide (ce qui est plutôt agréable), vous devez configurer un ContentInset ou un élément similaire.

Voici comment je procède :

// Check if we are running on ios7
if([[[[UIDevice currentDevice] systemVersion] componentsSeparatedByString:@"."][0] intValue] >= 7) {
      CGRect statusBarViewRect = [[UIApplication sharedApplication] statusBarFrame];
      float heightPadding = statusBarViewRect.size.height+self.navigationController.navigationBar.frame.size.height;

      myContentView.contentInset = UIEdgeInsetsMake(heightPadding, 0.0, 0.0, 0.0);
}

Answer 5

Dans votre fichier plist d'applications, ajoutez une ligne, appelez-la "Apparence de la barre d'état basée sur le contrôleur d'affichage" et définissez-la comme suit NON .