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 plus de flexibilité sur les marges et le contenu en plein écran. Ces modifications sont décrites dans ce guide.
Pour plus d’informations sur la conception pour iPhone X, watch la vidéo Conception pour iPhone X d’Apple.
UIKit
Les barres UIKit ont été adaptées dans iOS 11 pour les rendre plus accessibles aux utilisateurs finaux.
L’une de ces modifications est un nouvel affichage HUD qui s’affiche lorsqu’un utilisateur appuie longuement sur un élément de barre. Pour cela, 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 grands dans votre application permet d’agrandir tous les titres des barres de navigation de votre application, comme illustré dans la capture d’écran suivante :
Pour contrôler quand un titre volumineux s’affiche dans une barre de navigation, définissez l’élément LargeTitleDisplayModeAlwaysde 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;
Selon les fonctionnalités de votre application, vous pouvez ou non 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é qui directionalLayoutMargins peut être utilisée pour définir l’espace entre les vues et les sous-vues. Utilisez directionalLayoutMargins avec leading ou trailing des insets. 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 les versions antérieures, toutes les vues avaient une taille de marge minimale à laquelle elles s’alignaient. iOS 11 a introduit l’option permettant de remplacer celle à l’aide de ViewRespectsSystemMinimumLayoutMargins. Par exemple, la définition de cette propriété sur false vous permet d’ajuster vos insets de bord à zéro :
ViewRespectsSystemMinimumLayoutMargins = false;
View.LayoutMargins = UIEdgeInsets.Zero;
Contenu en plein écran
iOS 7 introduittopLayoutGuide et bottomLayoutGuide comme un moyen de limiter vos vues afin qu’elles ne soient pas masquées par les barres UIKit et se trouvent dans une zone visible de votre écran. Ceux-ci ont été dépréciés dans iOS 11 en faveur de la zone sécurisée.
La zone sécurisée est une nouvelle façon de penser à l’espace visible de votre application et à la façon dont des contraintes sont ajoutées entre une vue et une vue super. Par exemple, considérez l’image suivante :
Auparavant, si vous aviez ajouté une vue et que vous vouliez qu’elle soit visible dans la zone verte ci-dessus, vous deviez la TopLayoutGuide limiter au bas du et au haut de .BottomLayoutGuide Dans iOS 11, vous devez plutôt le limiter au haut et au bas de la zone de sécurité. Exemple :
var safeGuide = View.SafeAreaLayoutGuide;
imageView.TopAnchor.ConstraintEqualTo(safeGuide.TopAnchor).Active = true;
safeGuide.BottomAnchor.ConstraintEqualTo(imageView.BottomAnchor).Active = true;
Affichage Table
L’UITableView a connu 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 dimensionnés automatiquement en fonction de leur contenu. Pour désactiver ce comportement de dimensionnement automatique, définissez la EstimatedRowHeightvaleur , 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 Le Générateur d’interface), 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 l’affichage 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 étendu les fonctionnalités des actions de ligne. UISwipeActionsConfiguration a été introduit pour définir un ensemble d’actions qui doivent avoir lieu lorsque l’utilisateur balaye dans les deux sens sur une ligne dans une vue de table. Ce comportement est similaire à celui du Mail.app natif. Pour plus d’informations, consultez le guide Actions de ligne .
Les vues table prennent en charge le glisser-déplacer dans iOS 11. Pour plus d’informations, consultez le guide Glisser-déplacer .