Vente Flash Profiter d'une réduction de 25% sur nos IPhone Reconditionner de bonne qualité.

Comment styliser les boutons SwiftUI dans iOS 15

Dans iOS 15, Apple a introduit une nouvelle façon de personnaliser boutons dans les applications iOS pour les frameworks SwiftUI et UIKit. Bien que ce didacticiel se concentre sur les nouvelles fonctionnalités de SwiftUI, vous pouvez vous référer à cet article fantastique, écrit par Sarun, sur la façon de styliser UIButton dans iOS 15.

Styliser un bouton dans SwiftUI

Avant de plonger dans les nouveaux modificateurs introduits dans iOS 15, revoyons comment nous stylisons un bouton dans la version actuelle d’iOS.

swiftui-bouton-dans-ios-15

Disons que nous voulons créer un bouton avec des coins arrondis, nous écrivons le code comme ceci :

Nous personnalisons la couleur de premier plan et d’arrière-plan du bouton, appliquons des rembourrages et arrondissons ses coins à l’aide du bouton .clipShape modificateur.

Dans iOS 15, pour créer un bouton similaire avec des coins arrondis, vous pouvez utiliser un nouveau modificateur appelé buttonBorderShape et appliquez un nouveau style appelé BorderedProminentButtonStyle comme ça:

En appliquant le .borderedProminent style, iOS rend le bouton avec un fond violet et affiche le texte en blanc. Les .buttonBorderShape le modificateur vous permet de définir la forme de la bordure du bouton. Ici, nous l’avons mis à .roundedRectangle pour arrondir les coins du bouton.

Taille de contrôle pour les boutons

Les .controlSize permet de modifier la taille du bouton. La taille par défaut est .regular. Les autres valeurs valides incluent .large, .small, et .mini. La figure ci-dessous vous montre à quoi ressemble le bouton pour différentes tailles.

swiftui-boutons-contrôle-taille

Forme de bordure de bouton

Autre que l’utilisation .roundedRectangle, SwiftUI fournit une autre forme de bordure nommée .capsule pour les développeurs de créer un bouton en forme de capsule.

swiftui-bouton-bordure-forme

Vous pouvez également utiliser le .automatic option pour laisser le système ajuster la forme du bouton.

Modification du style des boutons

Jusqu’à présent, nous utilisons le .borderProminent style de bouton. La nouvelle version de SwiftUI fournit d’autres styles intégrés, notamment .bordered, .borderless, et .plain. Les .bordered le style est celui que vous utiliserez habituellement. La figure ci-dessous présente un exemple de bouton utilisant le .bordered style dans les modes clair et sombre.

bouton-style swiftui

Bien sûr, vous pouvez créer le même bouton en utilisant votre propre implémentation. Ce nouveau style, introduit dans iOS 15, vous fait gagner du temps en écrivant votre propre code.

Appliquer un style à plusieurs boutons

Avec le style de bouton, vous pouvez facilement appliquer le même style à un groupe de boutons. Voici un exemple:

Utilisation du rôle de bouton

La version iOS 15 du framework SwiftUI introduit une nouvelle role option pour Button. Cette option décrit le rôle sémantique du bouton. En fonction du rôle donné, iOS restitue automatiquement l’apparence et la convivialité appropriées pour le bouton.

Par exemple, si vous définissez le rôle comme .destructive comme ça:

iOS affichera le effacer bouton en rouge automatiquement. La figure suivante vous montre l’apparence du bouton pour différents rôles et styles de bouton :

swiftui-bouton-rôle

Boîte de dialogue de confirmation

Outre le nouveau style de bouton, iOS 15 est livré avec un nouveau modificateur appelé .confirmationDialog que vous pouvez joindre à un Button pour afficher une boîte de dialogue de confirmation.

Voici un exemple d’extrait de code pour présenter la boîte de dialogue :

Les .confirmationDialog le modificateur prend un titre et une liaison à une valeur booléenne qui détermine s’il faut présenter la boîte de dialogue. En option, vous pouvez indiquer si la boîte de dialogue doit afficher le titre.

Avec le code ci-dessus, la boîte de dialogue de confirmation sera présentée comme la figure ci-dessous.

boîte de dialogue de confirmation de swiftui

Personnaliser le bouton avec des matériaux

Dans iOS 15, SwiftUI introduit un type de matériau permettant aux développeurs de créer différents types d’effets de flou. Vous pouvez appliquer un effet de flou à une vue qui apparaît derrière une autre vue en ajoutant l’un des matériaux suivants à l’aide de la .background modificateur:

  • .ultraThickMaterial
  • .thickMaterial
  • .regularMaterial
  • .thinMaterial
  • .ultraThinMaterial

Voici l’exemple d’extrait de code qui applique le .ultraThinMaterial:

Comme expliqué par Apple, ajouter un matériau revient à insérer un calque translucide entre la vue modifiée et son arrière-plan. Selon le matériau que vous utilisez, vous obtiendrez un effet de flou différent. La figure suivante montre l’effet de flou de différents matériaux.

swiftui-fond-matériel

Bouton à bascule

swiftui-bascule

Basculer dans iOS apparaît sous la forme d’un commutateur. Dans iOS 15, vous pouvez configurer une bascule pour qu’elle apparaisse comme un bouton en utilisant le .toggleStyle modificateur comme ceci :

En définissant le style de bascule sur .button, la bascule apparaît comme un bouton. La figure ci-dessous montre à quoi cela ressemble lorsque la bascule est en état ON/OFF.

swiftui-toggle-button-ios-15

Sommaire

iOS 15 apporte un certain nombre d’améliorations pour la personnalisation des boutons SwiftUI. Bien que vous puissiez créer votre propre solution pour styliser un bouton, la nouvelle version de SwiftUI rend le travail des développeurs encore plus facile avec certains styles intégrés.

Le seul inconvénient de toutes ces nouvelles fonctionnalités est que vous ne pouvez les utiliser que dans iOS 15. Si vos applications doivent prendre en charge les anciennes versions d’iOS, vous devrez personnaliser le bouton avec votre propre implémentation.