Teilen über

Design der Ui-Bibliothek in einer Anwendung

  • Artikel

Die Azure Communication Services-Benutzeroberflächenbibliothek ist eine Reihe von Komponenten, Symbolen und Verbundelementen, die es Ihnen erleichtern, hochwertige Benutzeroberflächen für Ihre Projekte zu erstellen. Die Benutzeroberflächenbibliothek verwendet Komponenten und Symbole von Fluent UI, dem plattformübergreifenden Designsystem, das Microsoft verwendet. Daher werden die Komponenten unter Berücksichtigung von Benutzerfreundlichkeit, Barrierefreiheit und Lokalisierung entwickelt.

In diesem Artikel erfahren Sie, wie Sie das Design für Benutzeroberflächenbibliothekskomponenten während der Konfiguration einer Anwendung ändern.

Die Benutzeroberflächenbibliothek ist vollständig für Entwickler auf einer separaten Website dokumentiert. Die Dokumentation ist interaktiv und hilft Ihnen zu verstehen, wie die APIs funktionieren, indem Sie ihnen die Möglichkeit geben, sie direkt von einer Webseite auszuprobieren. Weitere Informationen finden Sie in der Dokumentation zur Benutzeroberflächenbibliothek.

Voraussetzungen

Design einrichten

Ausführliche Dokumentationen und Schnellstarts zur Web-UI-Bibliothek finden Sie im Web UI Library Storybook.

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" />
</resources>

Sie können ein Design wie die folgende in Ihren Apps implementieren, um die primäre Farbe und die Farbtons zu liefern:

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

Das vorangehende Beispiel wirkt sich auf die folgenden UI-Elemente 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

Das Designformat wird angewendet, um die Designressourcen-ID an das Element CallCompositeBuilderzu ThemeConfiguration/Theme ü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, gibt Android Ressourcen in den -night/ Ordnern vor. Um Nachtmodusfarben anzugeben, fügen Sie eine zweite theme.xml Datei zu values-night/.

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)

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äre Farbe und die zugehörigen Farbtons ä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 dieser neuen Klasse in CallCompositeOptionseinschließ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())

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 Die Ressourcen in einem Xcode-Projekt konfiguriert werden.

Screenshot of an example configuration of iOS color assets.

Nächste Schritte