Mises à jour de conception visuelle dans iOS 11
Dans iOS 11, Apple a introduit de nouvelles modifications visuelles, notamment des mises à jour de la barre de navigation, de la barre de recherche et des vues de table. En outre, des améliorations ont été apportées pour permettre une plus grande flexibilité sur les marges et le contenu plein écran. Ces modifications sont abordées dans ce guide.
Pour plus d’informations sur la conception pour iPhone X, regardez la vidéo Conception d’Apple pour iPhone X .
UIKit
Les barres UIKit ont été adaptées dans iOS 11 pour les rendre plus accessibles aux utilisateurs finaux.
Une telle modification est un nouvel affichage HUD qui s’affiche lorsqu’un utilisateur appuie longuement sur un élément de barre. Pour l’activer, définissez la largeContentSizeImage propriété sur UIBarItem et ajoutez une image plus grande via un catalogue de ressources :
barItem.LargeContentSizeImage = UIImage.FromBundle("AccessibleImage");
Barre de navigation
iOS 11 a introduit de nouvelles fonctionnalités pour faciliter la lecture des titres de barre de navigation. Les applications peuvent afficher ce titre plus grand en affectant la PrefersLargeTitles propriété à true :
NavigationController.NavigationBar.PrefersLargeTitles = true;
La définition de titres plus volumineux dans votre application rend tous les titres de barres de navigation de votre application plus volumineux, comme illustré dans la capture d’écran suivante :
Pour contrôler lorsqu’un titre volumineux est affiché dans une barre de navigation, définissez l’élément LargeTitleDisplayMode Alwaysde navigation sur , Neverou Automatic.
Contrôleur de recherche
iOS 11 a facilité l’ajout d’un contrôleur de recherche directement à la barre de navigation. Une fois que vous avez créé un contrôleur de recherche, ajoutez-le à votre barre de navigation avec la SearchController propriété :
NavigationItem.SearchController = searchController;
En fonction des fonctionnalités de votre application, vous pouvez ou ne pas vouloir masquer la barre de recherche lorsqu’un utilisateur fait défiler une liste. Vous pouvez ajuster cela à l’aide de la HidesSearchBarWhenScrolling propriété.
Marges
Apple a créé une nouvelle propriété , directionalLayoutMargins qui peut être utilisée pour définir l’espace entre les vues et les sous-vues. Utiliser directionalLayoutMargins avec ou trailing insetsleading. Indépendamment du fait que le système soit un langage de gauche à droite ou de droite à gauche, l’espacement dans votre application est défini de manière appropriée par iOS.
Dans iOS 10 et avant, toutes les vues avaient une taille de marge minimale à laquelle elles s’alignaient. iOS 11 a introduit l’option permettant de remplacer cette utilisation ViewRespectsSystemMinimumLayoutMargins. Par exemple, la définition de cette propriété sur false vous permet d’ajuster vos ensembles de bord à zéro :
ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;
Contenu plein écran
iOS 7 introduit topLayoutGuide et bottomLayoutGuide comme moyen de limiter vos vues afin qu’elles ne soient pas masquées par les barres UIKit et qu’elles se trouvent dans une zone visible de votre écran. Ceux-ci ont été déconseillés dans iOS 11 en faveur de la zone sécurisée.
La zone sécurisée est une nouvelle façon de réfléchir à l’espace visible de votre application et à la façon dont les contraintes sont ajoutées entre une vue et une super vue. Par exemple, considérez l’image suivante :
Auparavant, si vous aviez ajouté une vue et souhaitiez qu’elle soit visible dans la zone verte ci-dessus, vous le limiteriez au bas du TopLayoutGuide et du haut du BottomLayoutGuide. Dans iOS 11, vous le limitez plutôt au haut et au bas de la zone sécurisée. Exemple :
var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;
Vue Table
UiTableView a eu un certain nombre de modifications mineures, mais significatives, dans iOS 11.
Par défaut, les en-têtes, les pieds de page et les cellules sont désormais automatiquement dimensionnés en fonction de leur contenu. Pour désactiver ce comportement de dimensionnement automatique, définissez le EstimatedRowHeight, EstimatedSectionHeaderHeightou EstimatedSectionFooterHeight sur zéro.
Toutefois, dans certaines circonstances (par exemple, lors de l’ajout de UITableViewController lors de l’utilisation de storyboards existants dans interface Builder), vous devrez peut-être activer manuellement les cellules de dimensionnement automatique. Pour ce faire, vérifiez que vous avez défini les propriétés suivantes dans la vue de tableau pour les cellules, les en-têtes et les pieds de page, respectivement :
// Cells
TableView.RowHeight = UITableView.AutomaticDimension;
TableView.EstimatedRowHeight = UITableView.AutomaticDimension;
// Header
TableView.SectionHeaderHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionHeaderHeight = 40f;
//Footer
TableView.SectionFooterHeight = UITableView.AutomaticDimension;
TableView.EstimatedSectionFooterHeight = 40f;
iOS 11 a développé les fonctionnalités des actions de ligne. UISwipeActionsConfiguration a été introduit pour définir un ensemble d’actions qui doivent se produire lorsque l’utilisateur effectue un mouvement de balayage dans l’une ou l’autre direction sur une ligne dans une vue de table. Ce comportement est similaire à celui de la Mail.app native. Pour plus d’informations, consultez le guide Actions de ligne.
Les vues de table prennent en charge le glisser-déplacer dans iOS 11. Pour plus d’informations, consultez le guide glisser-déplacer .