Design der UI-Bibliothek in einer Anwendung

Die UI-Bibliothek von Azure Communication Services enthält verschiedene Komponenten, Symbole und Verbundelemente, die Ihnen ermöglichen, hochwertige Benutzeroberflächen für Ihre Projekte zu erstellen. Die UI-Bibliothek verwendet Komponenten und Symbole aus Fluent UI, dem plattformübergreifenden Designsystem, das von Microsoft verwendet wird. Daher werden die Komponenten unter Berücksichtigung von Benutzerfreundlichkeit, Barrierefreiheit und Lokalisierung entwickelt.

In diesem Artikel erfahren Sie, wie Sie das Design für Komponenten der UI-Bibliothek während der Konfiguration einer Anwendung ändern.

Die UI-Bibliothek wurde für Entwickler auf einer separaten Website umfassend dokumentiert. Die Dokumentation ist interaktiv und hilft Ihnen zu verstehen, wie die APIs funktionieren, indem Sie sie direkt auf einer Webseite ausprobieren können. Weitere Informationen finden Sie in der Dokumentation zur UI-Bibliothek.

Voraussetzungen

• Ein Azure-Konto mit einem aktiven Abonnement. Sie können kostenlos ein Konto erstellen.
• Eine bereitgestellte Communication Services-Ressource. Erstellen Sie eine Communication Services-Ressource.
• Ein Benutzerzugriffstoken zum Aktivieren des Anrufclients. Rufen Sie ein Benutzerzugriffstoken ab.
• Optional: Führen Sie den Schnellstart Erste Schritte mit der UI-Bibliothek durch.

Einrichten von Designs

Eine ausführliche Dokumentation und Kurzanleitungen zur Webbenutzeroberflächenbibliothek finden Sie im Storybook zur Webbenutzeroberflächenbibliothek.

Weitere Informationen finden Sie unter Design in der Web-UI-Bibliothek.

Wichtig

Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau.

Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Einige Features werden möglicherweise nicht unterstützt oder bieten nur eingeschränkte Funktionalität.

Weitere Informationen finden Sie in den ergänzenden Nutzungsbestimmungen für Microsoft Azure-Vorschauversionen.

Weitere Informationen finden Sie in der Open Source Android UI Library und im Beispielanwendungscode.

Definieren eines Designs

Die Verarbeitung von Designs für Android erfolgt über XML-Ressourcendateien. Wir stellen die folgenden Ressourcen-IDs für den öffentlichen Bereich bereit:

<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" />
    <public name="azure_communication_ui_calling_foreground_on_primary_color" type="attr" />
</resources>

Sie können ein Design wie das folgende in Ihren Apps implementieren, um die primäre Farbe und die Farbtöne festzulegen:

<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>
    <item name="azure_communication_ui_calling_foreground_on_primary_color">#00FF00</item>
</style>

Das obige Beispiel wirkt sich auf die folgenden Benutzeroberflächenelemente aus:

• PrimaryColor:
  • Avatar/Video – Umrahmung – Hinweis auf Sprachmodus
  • Schaltfläche „An Gespräch teilnehmen“ – Hintergrund
• PrimaryColorTint10 Color:
  • Schaltfläche „An Gespräch teilnehmen“ – Hintergrund – hervorgehoben – heller Modus
  • Schaltfläche „An Gespräch teilnehmen“ – Umrahmung – heller/dunkler Modus
• PrimaryColorTint20 Color:
  • Schaltfläche „An Gespräch teilnehmen“ – Hintergrund – hervorgehoben – dunkler Modus
• PrimaryColorTint30 Color:
  • Schaltfläche „An Gespräch teilnehmen“ – Umrahmung – hervorgehoben – heller/dunkler Modus

Anwenden eines Designs

Der Designstil wird angewandt, um die Designressourcen-ID an ThemeConfiguration/Theme in CallCompositeBuilder zu übergeben.

Kotlin

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

Java

CallComposite callComposite = 
    new CallCompositeBuilder()
        .theme(R.style.MyCompany_CallComposite)
        .build();

Helle und dunkle Modi

Das Android-Ressourcensystem verarbeitet das Nachtdesign. Der Nachtmodus unter Android ist eine systemweite Konfiguration. Wenn Sie den Nachtmodus aktivieren, verweist Android auf Ressourcen in den -night/-Ordnern. Um die Farben für den Nachtmodus anzugeben, fügen Sie eine zweite Datei theme.xml in values-night/ hinzu.

Um den Nachtmodus programmgesteuert zu aktivieren, stellt Android die folgende Funktion bereit. Diese Konfiguration gilt jedoch global für die Anwendung. Es gibt keine zuverlässige Möglichkeit, den Nachtmodus für eine einzelne Aktivität festzulegen. Verwenden Sie zum Erzwingen eines dunklen Designs die folgende Einstellung in Ihren Anwendungen:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Schriftfarbe

Mit azure_communication_ui_calling_foreground_on_primary_color können Sie mithilfe der Primärfarbe die Schriftfarbe konfigurieren, die auf Elementen angezeigt wird. Sie können diese Einstellung verwenden, wenn Sie ein bestimmtes Design erzielen oder Brandingrichtlinien einhalten möchten. Wenn Sie azure_communication_ui_calling_foreground_on_primary_color ändern, sollten Sie sicherstellen, dass der Text lesbar und visuell ansprechend bleibt, Wählen Sie dazu eine geeignete Kontrastschriftfarbe für die Komponenten mit der Primärfarbe aus.

Wichtig

Dieses Feature von Azure Communication Services befindet sich derzeit in der Vorschau.

Vorschau-APIs und -SDKs werden ohne Vereinbarung zum Servicelevel bereitgestellt. Es wird empfohlen, diese nicht für Produktionsworkloads zu verwenden. Einige Features werden möglicherweise nicht unterstützt oder bieten nur eingeschränkte Funktionalität.

Weitere Informationen finden Sie in den ergänzenden Nutzungsbestimmungen für Microsoft Azure-Vorschauversionen.

Weitere Informationen finden Sie in der Open-Source-iOS-UI-Bibliothek und im Beispielanwendungscode.

Definieren eines Designs

Sie können das Design anpassen, indem Sie die Primärfarbe und die zugehörigen Farbtöne ändern. Sie haben auch die Möglichkeit, die hellen und dunklen Modi im Farbschema außer Kraft zu setzen.

Betroffene Benutzeroberfläche

• PrimaryColor:
  • Avatar/Video – Umrahmung – Hinweis auf Sprachmodus
  • Schaltfläche „An Gespräch teilnehmen“ – Hintergrund
• PrimaryColorTint10 Color:
  • Schaltfläche „An Gespräch teilnehmen“ – Hintergrund – hervorgehoben – heller Modus
  • Schaltfläche „An Gespräch teilnehmen“ – Umrahmung – heller/dunkler Modus
• PrimaryColorTint20 Color:
  • Schaltfläche „An Gespräch teilnehmen“ – Hintergrund – hervorgehoben – dunkler Modus
• PrimaryColorTint30 Color:
  • Schaltfläche „An Gespräch teilnehmen“ – Umrahmung – hervorgehoben – heller/dunkler Modus

Implementierung

Sie können benutzerdefinierte Designoptionen erstellen, die das ThemeOptions-Protokoll implementieren. Sie müssen eine Instanz der neuen Klasse in CallCompositeOptions einschließen.

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())

Schriftfarbe

foregroundOnPrimaryColor ermöglicht Ihnen das programmgesteuerte Ändern der Schriftfarbe, die auf Elemente mit der Primärfarbe angezeigt wird. Sie können diese Methode verwenden, wenn Sie ein bestimmtes Design erzielen oder Brandingrichtlinien einhalten möchten. Wenn Sie foregroundOnPrimaryColor aufrufen, sollten Sie sicherstellen, dass der Text lesbar und visuell ansprechend bleibt, Wählen Sie dazu eine geeignete Kontrastschriftfarbe für die Komponenten mit der Primärfarbe aus.

struct CustomColorTheming: ThemeOptions {    

    private var envConfigSubject: EnvConfigSubject  

    init(envConfigSubject: EnvConfigSubject) {        
        self.envConfigSubject = envConfigSubject    
    }    

    var primaryColor: UIColor {        
        return UIColor(envConfigSubject.primaryColor)    
    }    
    
    var primaryColorTint10: UIColor {        
        return UIColor(envConfigSubject.tint10)    
    }    
    
    var primaryColorTint20: UIColor {        
        return UIColor(envConfigSubject.tint20)    
    }    
    
    var primaryColorTint30: UIColor {        
        return UIColor(envConfigSubject.tint30)    
    }    
    
    var foregroundOnPrimaryColor: UIColor {        
        return UIColor(envConfigSubject.foregroundOnPrimaryColor)    
    }    

    var colorSchemeOverride: UIUserInterfaceStyle {        
        return envConfigSubject.colorSchemeOverride    
    }
}


let callCompositeOptions = CallCompositeOptions(theme: CustomColorTheming())

Definieren von Farbressourcen

Definieren Sie jede Farbe in den Ressourcen mit Schattierungen für den hellen und den dunklen Modus. Die folgende Referenzbild zeigt, wie Ressourcen in einem Xcode-Projekt konfiguriert werden.

Nächste Schritte

• Weitere Informationen zur UI-Bibliothek
• Weitere Informationen zum Design-Kit der UI-Bibliothek