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.
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.
val callComposite: CallComposite =
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.
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.
