Thème de la bibliothèque d’interface utilisateur dans une application

  • Article

La bibliothèque d’interface utilisateur Azure Communication Services est un ensemble de composants, d’icônes et de composites qui facilitent la création d’interfaces utilisateur de haute qualité pour vos projets. La bibliothèque d’interface utilisateur utilise des composants et des icônes de Fluent UI, le système de conception multiplateforme que Microsoft utilise. Par conséquent, les composants sont créés avec la facilité d’utilisation, l’accessibilité et la localisation à l’esprit.

Dans cet article, vous allez apprendre à modifier le thème des composants de la bibliothèque d’interface utilisateur lors de la configuration d’une application.

La bibliothèque d’interface utilisateur est entièrement documentée pour les développeurs sur un site distinct. La documentation est interactive et vous aide à comprendre le fonctionnement des API en vous donnant la possibilité de les essayer directement à partir d’une page web. Pour plus d’informations, consultez la documentation de la bibliothèque d’interface utilisateur.

Prérequis

Configurer les thèmes

Pour obtenir une documentation détaillée et des guides de démarrage rapide sur la bibliothèque d’interface utilisateur web, consultez le Storybook de la bibliothèque d’interface utilisateur web.

Pour en savoir plus, consultez Thèmes dans la bibliothèque d’interface utilisateur web.

Pour plus d’informations, consultez la bibliothèque d’interface utilisateur Android open source et l’exemple de code d’application.

Définition d’un thème

Les thèmes sur Android sont gérés via des fichiers de ressources XML. Nous exposons les ID de ressource suivants à la portée publique :

<resources>
    <public name="AzureCommunicationUICalling.Theme" type="style" />
    <public name="azure_communication_ui_calling_primary_color" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint10" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint20" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint30" type="attr" />
</resources>

Vous pouvez implémenter un thème comme celui suivant dans vos applications pour fournir la couleur principale et les teintes :

<style name="MyCompany.CallComposite" parent="AzureCommunicationUICalling.Theme">
    <item name="azure_communication_ui_calling_primary_color">#7800D4</item>
    <item name="azure_communication_ui_calling_primary_color_tint10">#882BD8</item>
    <item name="azure_communication_ui_calling_primary_color_tint20">#E0C7F4</item>
    <item name="azure_communication_ui_calling_primary_color_tint30">#ECDEF9</item>
</style>

L’exemple précédent affecte les éléments d’interface utilisateur suivants :

  • PrimaryColor :
    • Avatar/Vidéo - Bordure - Indication orale
    • Bouton Joindre un appel - Arrière-plan
  • PrimaryColorTint10 Color :
    • Bouton Joindre un appel - Arrière-plan - Mis en surbrillance - Mode clair
    • Bouton Joindre un appel - Bordure - Mode clair/foncé
  • PrimaryColorTint20 Color :
    • Bouton Joindre un appel - Arrière-plan - Mis en surbrillance - Mode sombre
  • PrimaryColorTint30 Color :
    • Bouton Joindre un appel - Bordure - Mis en surbrillance - Mode clair/sombre

Application d’un thème

Le style de thème est appliqué pour transmettre l’ID de ressource de thème dans ThemeConfigurationTheme/CallCompositeBuilder.

val callComposite: CallComposite =
        CallCompositeBuilder()
            .theme(R.style.MyCompany_CallComposite)
            .build()

Modes clair et sombre

Le système de ressources Android gère le thème nocturne. Le mode nuit sur Android est une configuration à l’échelle du système. Lorsque vous activez le mode nuit, Android donne la préférence aux ressources dans les -night/ dossiers. Pour spécifier les couleurs du mode nuit, ajoutez un deuxième theme.xml fichier à values-night/.

Pour activer le mode nuit par programmation, Android fournit la fonction suivante. Toutefois, cette configuration s’applique globalement à l’application. Il n’existe aucun moyen fiable de définir le mode nuit pour une seule activité. Pour appliquer un thème sombre, utilisez le paramètre suivant dans vos applications :

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Pour plus d’informations, consultez la bibliothèque d’interface utilisateur iOS open source et l’exemple de code d’application.

Définition d’un thème

Vous pouvez personnaliser le thème en modifiant la couleur principale et ses teintes associées. Vous avez également la possibilité de remplacer les modes clair et sombre dans le jeu de couleurs.

Interface utilisateur affectée

  • PrimaryColor :
    • Avatar/Vidéo - Bordure - Indication orale
    • Bouton Joindre un appel - Arrière-plan
  • PrimaryColorTint10 Color :
    • Bouton Joindre un appel - Arrière-plan - Mis en surbrillance - Mode clair
    • Bouton Joindre un appel - Bordure - Mode clair/foncé
  • PrimaryColorTint20 Color :
    • Bouton Joindre un appel - Arrière-plan - Mis en surbrillance - Mode sombre
  • PrimaryColorTint30 Color :
    • Bouton Joindre un appel - Bordure - Mis en surbrillance - Mode clair/sombre

Implémentation

Vous pouvez créer des options de thème personnalisées qui implémentent le ThemeOptions protocole. Vous devez inclure une instance de cette nouvelle classe dans CallCompositeOptions.

class CustomThemeOptions: ThemeOptions {

 var primaryColor: UIColor {
  return UIColor(named: "primaryColor")
 }
 
 var primaryColorTint10: UIColor {
  return UIColor(named: "primaryColorTint10")
 }
 
 var primaryColorTint20: UIColor {
  return UIColor(named: "primaryColorTint20")
 }
 
 var primaryColorTint30: UIColor {
  return UIColor(named: "primaryColorTint30")
 }

 var colorSchemeOverride: UIUserInterfaceStyle {
  return UIUserInterfaceStyle.dark
 }
}

let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())

Définition des ressources de couleur

Définissez chaque couleur dans les ressources, avec une nuance pour les modes clair et sombre. L’image de référence suivante montre comment configurer les ressources sur un projet Xcode.

Screenshot of an example configuration of iOS color assets.

Étapes suivantes