web-dev-qa-db-fra.com

Utiliser le titre de barre de navigation augmenté dans iOS 11

iOS 11 Beta 1 utilise le titre accru de la barre de navigation pour presque toutes les applications système (c'est ce qui a été fait dans iOS 10 et dans l'application Musique). Je me demande si Apple a une API publique pour cela qui arrive dans iOS 11, ou si elle restera privée pour l'instant.

Le comportement est que le titre a une taille de police augmentée, qu'il est aligné à gauche et qu'il se déplacera vers la barre de navigation une fois que l'utilisateur aura fait défiler l'écran vers le bas. J'ai attaché quelques écrans montrant ce comportement dans l'application Messages ici:

enter image description here

Bien que je n’aie trouvé aucune référence dans les UINavigationController et UINavigationBar jusqu’à présent, il est possible que quelqu'un connaisse plus de détails!

53
Hans Knöchel

La seule modification apportée à UINavigationBar API pour iOS 11 est prefersLargetitles uniquement. vérifier ici

Vous pouvez le faire dans vos propres applications avec une petite modification: cochez la case "Préfère les gros titres" pour votre barre de navigation dans IB, ou si vous préférez le faire dans le code en utilisant

navigationController?.navigationBar.prefersLargeTitles = true

Modifier

Si vous devez modifier les attributs de texte du grand titre, vous devez utiliser la nouvelle propriété largeTitleTextAttributes sur UINavigationBar:

UINavigationBar.appearance().largeTitleTextAttributes = [
    NSForegroundColorAttributeName: UIColor.white
]

Mise à jour pour Swift 4.2:

Comme NSForegroundColorAttributeName a été renommé en NSAttributedString.Key.foregroundColor, utilisez:

  UINavigationBar.appearance().largeTitleTextAttributes = [
      NSAttributedString.Key.foregroundColor: UIColor.black
  ]
104
Moin Shirazi

UINavigationBar a une propriété prefersLargeTitles: Bool. Docs ici .

class UINavigationBar {
   var prefersLargeTitles: Bool
}

UINavigationItem a une propriété largeTitleDisplayMode: UINavigationItem.LargeTitleDisplayMode. Docs ici .

class UINavigationItem {
   var largeTitleDisplayMode: LargeTitleDisplayMode
}

Ces deux éléments peuvent être modifiés dans Interface Builder.

Pour activer ce comportement, définissez navigationController.navigationBar.prefersLargeTitles sur true. Vous pouvez ensuite contrôler chaque contrôleur de vue individuel dans la pile de contrôleur de navigation en définissant navigationItem.largeTitleDisplayMode.

Les règles générales de conception de Apple stipulent que les gros titres ne doivent pas être utilisés partout (par exemple, l'application Clock ne les utilise pas), et il est généralement préférable que seul le premier niveau du contrôleur de navigation utilise la gros titres. Cependant, ce ne sont que des directives générales.

Les gros titres sont introduits dans Nouveautés de la vidéo Cocoa Touch (7:37).

10
kgaidis
if #available(iOS 11.0, *) {
    self.navigationController?.navigationBar.prefersLargeTitles = true
    self.navigationItem.largeTitleDisplayMode = .always
} else {
    // Fallback on earlier versions
}

Notez que la version bêta 1 contient des bogues qui ne font apparaître le gros titre que lorsque vous faites défiler manuellement vers le haut.

6
Jordi Bruin

Il suffit de cocher la case "Préfère les gros titres" dans l'inspecteur d'attributs de la barre de navigation.

enter image description here

6
Maor
if #available(iOS 11.0, *) {
    navigationController?.navigationBar.prefersLargeTitles = true
    navigationController?.navigationBar.topItem?.title = "Hello"
    navigationController?.navigationItem.largeTitleDisplayMode = .automatic

    let attributes = [
        NSAttributedStringKey.foregroundColor : UIColor.red,
        ]

    navigationController?.navigationBar.largeTitleTextAttributes = attributes
} else {
    // Fallback on earlier versions
}
5
Sai Sandeep

Étant donné que les gros titres sont disponibles depuis iOS 11, vous devez également vérifier la version iOS:

    if #available(iOS 11.0, *) {
        navigationController?.navigationBar.prefersLargeTitles = true
    }
0
Lavrin Pristazh