Thema van de UI-bibliotheek in een toepassing
De Ui-bibliotheek van Azure Communication Services is een set onderdelen, pictogrammen en samengestelde onderdelen waarmee u eenvoudiger gebruikersinterfaces van hoge kwaliteit voor uw projecten kunt bouwen. De UI-bibliotheek maakt gebruik van onderdelen en pictogrammen van Fluent UI, het platformoverschrijdende ontwerpsysteem dat Microsoft gebruikt. Als gevolg hiervan zijn de onderdelen gebouwd met bruikbaarheid, toegankelijkheid en lokalisatie in gedachten.
In dit artikel leert u hoe u het thema voor ui-bibliotheekonderdelen wijzigt tijdens het configureren van een toepassing.
De UI-bibliotheek is volledig gedocumenteerd voor ontwikkelaars op een afzonderlijke site. De documentatie is interactief en helpt u te begrijpen hoe de API's werken door u de mogelijkheid te bieden om ze rechtstreeks vanaf een webpagina uit te proberen. Zie de documentatie van de UI-bibliotheek voor meer informatie.
Vereisten
- Een Azure-account met een actief abonnement. Gratis een account maken
- Een geïmplementeerde Communication Services-resource. Een Communication Services-resource maken.
- Een gebruikerstoegangstoken om de aanroepclient in te schakelen. Een toegangstoken voor gebruikers ophalen.
- Optioneel: Voltooiing van de quickstart om aan de slag te gaan met de samengestelde UI-bibliotheek.
Thema's instellen
Zie het artikelboek over de webgebruikersinterfacebibliotheek voor gedetailleerde documentatie en quickstarts over de webgebruikersinterfacebibliotheek.
Zie Thema's in de webgebruikersinterfacebibliotheek voor meer informatie.
Zie de opensource-uibibliotheek voor Android en de voorbeeldtoepassingscode voor meer informatie.
Een thema definiëren
Thema's op Android worden verwerkt via XML-resourcebestanden. We maken de volgende resource-id's beschikbaar voor het openbare bereik:
<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>
U kunt een thema zoals de volgende in uw apps implementeren om de primaire kleur en tinten op te geven:
<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>
Het voorgaande voorbeeld is van invloed op de volgende elementen van de gebruikersinterface:
- PrimaryColor:
- Avatar/Video - Rand - Spreekindicatie
- Knop Deelnemen aan oproep - achtergrond
- PrimaryColorTint10-kleur:
- Knop Deelnemen aan oproep - Achtergrond - Gemarkeerd - Lichte modus
- Knop Deelnemen aan oproep - Rand - Lichte/donkere modus
- PrimaryColorTint20-kleur:
- Knop Deelnemen aan oproep - Achtergrond - Gemarkeerd - Donkere modus
- PrimaryColorTint30-kleur:
- Knop Deelnemen aan oproep - Rand - Gemarkeerd - Lichte/donkere modus
Een thema toepassen
De themastijl wordt toegepast om de resource-id van het thema door te geven in ThemeConfigurationTheme/CallCompositeBuilder.
val callComposite: CallComposite =
CallCompositeBuilder()
.theme(R.style.MyCompany_CallComposite)
.build()
Lichte en donkere modi
Het Android-resourcesysteem verwerkt het nachtthema. Nachtmodus op Android is een systeembrede configuratie. Wanneer u de nachtmodus inschakelt, geeft Android voorkeur aan resources in de -night/ mappen. Als u nachtmoduskleuren wilt opgeven, voegt u een tweede theme.xml bestand toe aan values-night/.
Als u nachtmodus programmatisch wilt inschakelen, biedt Android de volgende functie. Deze configuratie is echter globaal van toepassing op de toepassing. Er is geen betrouwbare manier om de nachtmodus in te stellen voor één activiteit. Als u een donker thema wilt afdwingen, gebruikt u de volgende instelling in uw toepassingen:
AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
Kleur lettertype
Hiermee azure_communication_ui_calling_foreground_on_primary_color kunt u de tekstkleur configureren die wordt weergegeven op elementen met behulp van de primaire kleur. U kunt deze instelling gebruiken als u een specifiek thema of merkrichtlijnen wilt koppelen. Door te wijzigen azure_communication_ui_calling_foreground_on_primary_color, moet u ervoor zorgen dat de tekst leesbaar en visueel aantrekkelijk blijft door een geschikte contrasterende tekstkleur te selecteren voor de primaire gekleurde onderdelen.
Zie de opensource iOS UI-bibliotheek en de voorbeeldtoepassingscode voor meer informatie.
Een thema definiëren
U kunt het thema aanpassen door de primaire kleur en de bijbehorende tinten te wijzigen. U hebt ook de mogelijkheid om de lichte en donkere modi in het kleurenschema te overschrijven.
Betrokken gebruikersinterface
- PrimaryColor:
- Avatar/Video - Rand - Spreekindicatie
- Knop Deelnemen aan oproep - achtergrond
- PrimaryColorTint10-kleur:
- Knop Deelnemen aan oproep - Achtergrond - Gemarkeerd - Lichte modus
- Knop Deelnemen aan oproep - Rand - Lichte/donkere modus
- PrimaryColorTint20-kleur:
- Knop Deelnemen aan oproep - Achtergrond - Gemarkeerd - Donkere modus
- PrimaryColorTint30-kleur:
- Knop Deelnemen aan oproep - Rand - Gemarkeerd - Lichte/donkere modus
Implementatie
U kunt aangepaste themaopties maken waarmee het ThemeOptions protocol wordt geïmplementeerd. U moet een exemplaar van die nieuwe klasse opnemen in 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())
Kleur lettertype
Hiermee foregroundOnPrimaryColor kunt u programmatisch de tekstkleur bijwerken die wordt weergegeven op elementen met behulp van de primaire kleur. U kunt deze methode gebruiken als u een specifiek thema of merkrichtlijnen wilt koppelen. Door aan te foregroundOnPrimaryColorroepen, moet u ervoor zorgen dat de tekst leesbaar en visueel aantrekkelijk blijft door een geschikte contrasterende tekstkleur te selecteren voor de primaire gekleurde onderdelen.
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())
Kleurassets definiëren
Definieer elke kleur in de assets, met een tint voor de lichte en donkere modi. In de volgende referentieafbeelding ziet u hoe u de assets configureert in een Xcode-project.
