Compartir vía

Tema de la biblioteca de interfaz de usuario en una aplicación

  • Artículo

La biblioteca de interfaz de usuario de Azure Communication Services es un conjunto de componentes, iconos y compuestos que facilitan la creación de interfaces de usuario de alta calidad para los proyectos. La biblioteca de interfaz de usuario usa componentes e iconos de la interfaz de usuario de Fluent, el sistema de diseño multiplataforma que Usa Microsoft. Como resultado, al crear los componentes se tiene en cuenta la facilidad de uso, la accesibilidad y la localización.

En este artículo, aprenderá a cambiar el tema de los componentes de la biblioteca de interfaz de usuario a medida que configura una aplicación.

La biblioteca de interfaz de usuario está totalmente documentada para desarrolladores en un sitio independiente. La documentación es interactiva y le ayuda a comprender cómo funcionan las API al proporcionarle la capacidad de probarlas directamente desde una página web. Para obtener más información, consulte la documentación de la biblioteca de interfaz de usuario.

Requisitos previos

Configuración de creación de temáticas

Para obtener documentación detallada e inicios rápidos sobre la biblioteca de interfaz de usuario web, consulte el libro gráfico de la biblioteca de interfaz de usuario web.

Para más información, consulte Creación de tema en la biblioteca de interfaz de usuario web.

Para obtener más información, consulte la biblioteca de interfaz de usuario de Android de código abierto y el código de aplicación de ejemplo.

Definición de un tema

La creación de temas en Android se controla a través de archivos de recursos XML. Exponemos los siguientes identificadores de recursos al ámbito público:

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

Puede implementar un tema como el siguiente en las aplicaciones para proporcionar el color y los colores principales:

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

El ejemplo anterior afecta a los siguientes elementos de la interfaz de usuario:

  • PrimaryColor:
    • Avatar/vídeo - Borde - Indicación de habla
    • Botón Unirse a la llamada - Fondo
  • PrimaryColorTint10 Color:
    • Botón Unirse a la llamada - Fondo - Resaltado - Modo claro
    • Botón Unirse a la llamada - Borde - Modo claro/oscuro
  • PrimaryColorTint20 Color:
    • Botón Unirse a la llamada - Fondo - Resaltado - Modo oscuro
  • PrimaryColorTint30 Color:
    • Botón Unirse a la llamada - Borde - Resaltado - Modo claro/oscuro

Aplicación de un tema

El estilo de tema se aplica para pasar el identificador de recurso del tema a ThemeConfiguration/Theme en .CallCompositeBuilder

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

Modos claro y oscuro

El sistema de recursos Android controla el tema nocturno. El modo nocturno en Android es una configuración de todo el sistema. Al habilitar el modo nocturno, Android da preferencia a los recursos de las -night/ carpetas. Para especificar colores de modo nocturno, agregue un segundo theme.xml archivo a values-night/.

Para habilitar el modo nocturno mediante programación, Android proporciona la siguiente función. Sin embargo, esta configuración se aplica globalmente a la aplicación. No existe una forma fiable de configurar el modo nocturno para una sola actividad. Para aplicar un tema oscuro, use la siguiente configuración en las aplicaciones:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Para obtener más información, consulte la biblioteca de interfaz de usuario de iOS de código abierto y el código de aplicación de ejemplo.

Definición de un tema

Puede personalizar el tema cambiando el color principal y sus tinturas asociadas. También tiene la opción de invalidar los modos claro y oscuro en la combinación de colores.

Interfaz de usuario afectada

  • PrimaryColor:
    • Avatar/vídeo - Borde - Indicación de habla
    • Botón Unirse a la llamada - Fondo
  • PrimaryColorTint10 Color:
    • Botón Unirse a la llamada - Fondo - Resaltado - Modo claro
    • Botón Unirse a la llamada - Borde - Modo claro/oscuro
  • PrimaryColorTint20 Color:
    • Botón Unirse a la llamada - Fondo - Resaltado - Modo oscuro
  • PrimaryColorTint30 Color:
    • Botón Unirse a la llamada - Borde - Resaltado - Modo claro/oscuro

Implementación

Puede crear opciones de tema personalizadas que implementen el ThemeOptions protocolo. Debe incluir una instancia de esa nueva clase en 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())

Definición de recursos de color

Defina cada color en los recursos, con una sombra para los modos claro y oscuro. En la imagen de referencia siguiente se muestra cómo configurar los recursos en un proyecto de Xcode.

Screenshot of an example configuration of iOS color assets.

Pasos siguientes