Comment réparer la barre d'état dans votre application iOS - les nuls

La correction de la barre d'état est quelque chose que vous devrez résoudre dans iOS 7. Ce n'est vraiment pas difficile, mais ça aide d'avoir travaillé avec les vues et leurs paramètres afin de le comprendre.

Dans iOS 7, la barre d'état est transparente et c'est là que le problème se pose. Le problème est que la vue Web s'affiche à travers la barre d'état transparente. C'est un non-non. Il détourne l'information de la barre d'état, il détruit la cohérence de l'interface iOS, et il semble étrange à la plupart des gens.

Il existe trois solutions standard. Le plus simple est d'utiliser un contrôleur de navigation pour afficher votre contenu (votre vue principale). Un contrôleur de navigation a la logique intégrée pour afficher un arrière-plan approprié pour la barre d'état et pour positionner ses vues de contenu afin qu'elles ne soient pas derrière la barre d'état. (C'est une des raisons pour lesquelles le problème ne se produit pas si souvent sur les applications iPhone.)

Vous pouvez également créer une image d'arrière-plan non distrayante à placer sous la barre d'état et au-dessus du contenu de votre vue.

La solution la plus robuste consiste à utiliser la mise en page automatique. Jusqu'à présent, vous avez principalement utilisé la mise en page automatique pour épingler des vues et les intégrer dans d'autres vues. Il y a beaucoup plus dans Auto Layout, et voici comment vous pouvez l'utiliser dans ce cas.

Tout d'abord, comme vous pouvez facilement le découvrir, la barre d'état est haute de 20 points. Vous pouvez accéder à l'inspecteur de taille dans la zone Utilitaire et définir manuellement l'origine de votre vue de dessus sur 0, 20 afin qu'elle soit placée sous la barre d'état.

Et quand Apple introduit un appareil iOS avec un nouveau facteur de forme sur lequel la barre d'état ne dépasse pas vingt points, votre application va se casser. Maintenant, il n'y a aucune garantie qu'un tel appareil sera introduit la semaine prochaine, mais les chances sont assez bonnes que cela arrivera (et probablement au moment le plus gênant pour vous).

Commencez par reconnaître que la barre d'état est transparente et qu'elle sera affichée en haut de l'écran. Dans le cas de votre contrôleur de carte, vous avez cette barre d'état transparente en haut de l'écran. Vous voulez que votre barre d'outils en dessous, et vous voulez votre vue Web directement au bas de la barre d'outils.

Maintenant que vous avez reconnu que la barre d'état sera en haut de l'écran, à moins que vous ne la cachiez, voici les étapes pour positionner les autres vues correctement.

1. Dans le storyboard, ouvrez le plan du document et le contrôleur de carte - Scène de carte.

2. Notez que vous disposez d'un guide de mise en page supérieure et d'un guide de mise en page inférieure dans la scène.

   Ils sont placés automatiquement.

3. Faites glisser le pointeur de la barre d'outils vers le Guide de mise en page supérieure.

4. Sélectionnez Espacement vertical dans le survol qui apparaît.

   

5. La barre d'outils étant toujours sélectionnée, choisissez l'inspecteur de taille dans la zone Utilitaire. Dans la liste des contraintes, vous définissez Top Space sur: Top Layout Guide.

   C'est la contrainte que vous venez de créer.

   

6. Cliquez sur la roue dentée sur cette contrainte et choisissez Sélectionner et éditer.

7. La contrainte aurait dû être définie.

   Vérifiez que le menu contextuel est égal à Equal, que la constante est définie sur 0 et que la priorité est définie sur 1 000. Cette valeur est la plus élevée et signifie qu'aucune autre contrainte ne peut remplacer celle-ci.

8. Si vous avez d'autres contraintes, utilisez la roue dentée pour les supprimer.

   Ces contraintes supplémentaires peuvent s'accumuler pendant que vous expérimentez.

9. A l'aide de l'éditeur → Épingler, épinglez les espaces de début et de fin à la présentation.

10. Utilisez l'inspecteur de taille pour vérifier que la hauteur de la barre d'outils reste 44.

    Vous souhaiterez peut-être exécuter l'application maintenant pour vérifier que la barre d'outils ne chevauche plus la barre d'état.

11. Faites glisser le contrôle de l'affichage de la carte vers la barre d'outils.

12. Sélectionnez l'espacement vertical comme vous l'avez fait à l'étape 4.

13. Choisissez Editeur → Résoudre les problèmes de mise en page automatique → Ajouter des contraintes manquantes.

    Si la commande est grisée, vérifiez que vous avez les contraintes top, bottom, leading et trailing pour la vue web. Si ce n'est pas le cas, assurez-vous que la barre d'outils est sélectionnée, puis utilisez Éditeur → Résoudre les problèmes de mise en page automatique → Effacer les contraintes pour réessayer.

    Xcode épingle l'espace du bas dans la vue d'ensemble et aligne le début, la fin et la partie supérieure de la barre d'outils. Le webview est épinglé à la barre d'outils qui est épinglé à l'aperçu.

14. Vérifiez que les contraintes fonctionnent en faisant tourner le simulateur à l'aide du menu Matériel.

La rotation du simulateur est le test d'acidité de Auto Layout. Utilisez les équivalents clavier pendant que vous travaillez sur votre storyboard pour vérifier en permanence que votre magnifique mise en page paysage est tout aussi belle en portrait.