Compartilhar via

Tematizar a Biblioteca de IU em um aplicativo

  • Artigo

Captura de tela que mostra a experiência usando cores personalizadas na Biblioteca de IU.

A Biblioteca de IU dos Serviços de Comunicação do Azure é um conjunto de componentes, ícones e composição que facilita a criação de interfaces de usuário de alta qualidade para seus projetos. A Biblioteca de IU usa componentes e ícones do Fluent UI, o sistema de design multiplataforma que a Microsoft adota. Como resultado, os componentes são criados tendo em mente usabilidade, acessibilidade e localização.

Neste artigo, você aprenderá a alterar o tema dos componentes da Biblioteca de IU ao configurar um aplicativo.

A Biblioteca de IU está totalmente documentada para desenvolvedores em um site separado. A documentação é interativa e ajuda a entender como as APIs funcionam, permitindo que você as teste diretamente de uma página da Web. Para mais informações, confira a Documentação da Biblioteca de IU.

Pré-requisitos

Configurar temas

Para obter documentação detalhada e início rápido sobre a Biblioteca de UI da Web, veja o Web UI Library Storybook.

Para aprender mais, veja Tematização na Biblioteca de IU Web.

Para obter mais informações, veja Biblioteca de UI do Android de código aberto e o código de aplicativo de exemplo.

Definir um tema

Os temas no Android são tratados por meio de arquivos de recurso XML. Expõemos as seguintes IDs de recurso ao escopo 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" />
    <public name="azure_communication_ui_calling_foreground_on_primary_color" type="attr" />
</resources>

Você pode implementar um tema como o exemplo a seguir em seus aplicativos para definir a cor primária e suas tonalidades:

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

O exemplo anterior afeta os seguintes elementos da interface do usuário:

  • CorPrimária:
    • Avatar/Vídeo - Borda - Indicação de Fala
    • Botão Ingressar Chamada – Plano de Fundo
  • Cor primaryColorTint10:
    • Botão Ingressar Chamada - Plano de Fundo - Realçado - Modo Claro
    • Botão Ingressar Chamada – Borda – Modo Claro/Escuro
  • Cor primaryColorTint20:
    • Botão Ingressar Chamada - Plano de Fundo - Realçado - Modo Escuro
  • Cor primaryColorTint30:
    • Botão Ingressar Chamada - Borda - Realçado - Modo Claro/Escuro

Aplicar um tema

O estilo do tema é aplicado ao passar o ID do recurso de tema para ThemeConfiguration/Theme em CallCompositeBuilder.

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

Modos claros e escuros

O sistema de recursos Android lida com o tema noturno. O modo noturno no Android é uma configuração em todo o sistema. Quando você habilita o modo escuro, o Android dá preferência aos recursos nas pastas -night/. Para especificar cores de modo escuro, adicione um segundo arquivo theme.xml em values-night/.

Para habilitar o modo noturno programaticamente, o Android fornece a função a seguir. No entanto, essa configuração se aplica globalmente ao aplicativo. Não há uma maneira confiável de definir o modo noturno para uma única atividade. Para impor um tema escuro, use a seguinte configuração nos seus aplicativos:

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

Cor da fonte

O azure_communication_ui_calling_foreground_on_primary_color permite configurar a cor da fonte que aparece em elementos usando a cor primária. Você pode usar essa configuração quando quiser combinar um tema ou diretrizes de marca específicos. Ao alterar azure_communication_ui_calling_foreground_on_primary_color, você deve garantir que o texto permaneça legível e visualmente interessante, selecionando uma cor de fonte contrastante apropriada para os componentes com a cor primária.

Para obter mais informações, veja a Biblioteca de UI do iOS de código aberto e o código de aplicativo de amostra.

Definir um tema

Você pode personalizar o tema alterando a cor primária e suas tonalidades associadas. Também tem a opção de substituir os modos claro e escuro no esquema de cores.

Interface do usuário afetada

  • CorPrimária:
    • Avatar/Vídeo - Borda - Indicação de Fala
    • Botão Ingressar Chamada – Plano de Fundo
  • Cor primaryColorTint10:
    • Botão Ingressar Chamada - Plano de Fundo - Realçado - Modo Claro
    • Botão Ingressar Chamada – Borda – Modo Claro/Escuro
  • Cor primaryColorTint20:
    • Botão Ingressar Chamada - Plano de Fundo - Realçado - Modo Escuro
  • Cor primaryColorTint30:
    • Botão Ingressar Chamada - Borda - Realçado - Modo Claro/Escuro

Implementação

Você pode criar opções de temas personalizados que implementam o protocolo ThemeOptions. É necessário incluir uma instância dessa nova classe em 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())

Cor da fonte

O foregroundOnPrimaryColor permite atualizar programaticamente a cor da fonte que aparece em elementos usando a cor primária. Você pode usar esse método quando deseja alinhar com um tema ou diretrizes de marca específicos. Ao invocar foregroundOnPrimaryColor, você deve garantir que o texto seja legível e visualmente agradável, selecionando uma cor de fonte apropriada e contrastante para os componentes de cor primária.

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

Definir ativos de cor

Defina cada cor nos ativos, com uma sombra para os modos claro e escuro. A imagem de referência a seguir mostra como configurar os ativos em um projeto Xcode.

Captura de tela de uma configuração de exemplo de ativos de cores no iOS.

Próximas etapas