Personnaliser les boutons
Pour implémenter des actions personnalisées ou modifier la disposition actuelle des boutons, vous pouvez interagir avec l’API de la bibliothèque d’interface utilisateur native. Cette API implique la définition de configurations de bouton personnalisées, en spécifiant les actions et en gérant les actions actuelles de la barre de boutons. L’API fournit des méthodes pour ajouter des actions personnalisées et supprimer des boutons existants, qui sont tous accessibles via des appels de fonction simples.
Cette fonctionnalité offre un haut degré de personnalisation et veille à ce que l’interface utilisateur reste cohérent et uniforme avec la conception générale de l’application.
Prérequis
- Compte Azure avec un abonnement actif. Créez un compte gratuitement.
- Une ressource Communication Services déployée. Créez une ressource Communication Services.
- Un jeton d’accès utilisateur pour activer le client d’appel. Obtenez un jeton d’accès utilisateur.
- Facultatif : Complétion du guide de démarrage rapide pour prendre en main les composites de la bibliothèque d’interface utilisateur.
Paramétrage de la fonctionnalité
Supprimer des boutons
CallCompositeCallScreenControlBarOptions, offre la flexibilité nécessaire pour personnaliser des boutons en supprimant des boutons spécifiques, tels que les contrôles audio, de microphone et de caméra. Cette API vous permet de personnaliser l’interface utilisateur en fonction de ses exigences d’application spécifiques et de la conception de l’expérience utilisateur. Définissez simplement visible ou enabled sur false pour CallCompositeButtonViewData afin de masquer ou désactiver le bouton.
val controlBarOptions = CallCompositeCallScreenControlBarOptions()
val cameraButton = CallCompositeButtonViewData()
.setVisible(false)
controlBarOptions.setCameraButton(cameraButton)
val callScreenOptions = CallCompositeCallScreenOptions()
.setControlBarOptions(controlBarOptions)
val localOptions = CallCompositeLocalOptions()
.setCallScreenOptions(callScreenOptions)
val callComposite = CallCompositeBuilder()
.build()
callComposite.launch(context, locator, localOptions)
Le bouton peut être mis à jour après le lancement de l’appel composite.
Ajouter des actions personnalisées
Call composite utilise des icônes Fluent UI. Vous pouvez télécharger les icônes directement à partir du référentiel GitHub Fluent UI et les incorporer dans votre projet, le cas échéant. Cette approche assure une cohérence visuelle sur tous les éléments de l’interface utilisateur, ce qui améliorer l’expérience utilisateur globale.
// Custom header button
val headerCustomButton =
CallCompositeCustomButtonViewData(
"headerCustomButton",
R.drawable.my_header_button_icon,
"My header button",
fun(it: CallCompositeCustomButtonClickEvent) {
// process my button onClick
}
)
val headerOptions = CallCompositeCallScreenHeaderViewData()
.setCustomButtons(listOf(headerCustomButton))
// Custom control bar button
val controlBarOptions = CallCompositeCallScreenControlBarOptions()
controlBarOptions.setCustomButtons(
listOf(
CallCompositeCustomButtonViewData(
"customButtonId",
R.drawable.my_button_image,
"My button",
fun(it: CallCompositeCustomButtonClickEvent) {
// Process my button onClick
},
)
)
)
val callScreenOptions = CallCompositeCallScreenOptions()
.setHeaderViewData(headerOptions)
.setControlBarOptions(controlBarOptions)
val localOptions = CallCompositeLocalOptions()
.setCallScreenOptions(callScreenOptions)
val callComposite = CallCompositeBuilder()
.build()
callComposite.launch(context, locator, localOptions)
Comme pour les boutons fournis par Call composite, les boutons personnalisés peuvent être mis à jour après le lancement.
Supprimer ou désactiver des boutons
CallScreenControlBarOptions, offre la flexibilité nécessaire pour personnaliser des boutons en supprimant des boutons spécifiques, tels que les contrôles audio, de microphone et de caméra. Cette API vous permet de personnaliser l’interface utilisateur en fonction de ses exigences d’application spécifiques et de la conception de l’expérience utilisateur. Définissez simplement visible ou enabled sur false pour ButtonViewData afin de masquer ou désactiver le bouton.
let cameraButton = ButtonViewData(visible: false)
let callScreenControlBarOptions = CallScreenControlBarOptions(
cameraButton: cameraButton
)
let callScreenOptions = CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
let localOptions = LocalOptions(callScreenOptions: callScreenOptions)
let callComposite = CallComposite(credential: credential)
callComposite.launch(locator: .roomCall(roomId: "..."), localOptions: localOptions)
Le bouton peut être mis à jour après le lancement de l’appel composite.
cameraButton.visible = true
Ajouter des actions personnalisées
Call composite utilise des icônes Fluent UI. Vous pouvez télécharger les icônes directement à partir du référentiel GitHub Fluent UI et les incorporer dans votre projet, le cas échéant. Cette approche assure une cohérence visuelle sur tous les éléments de l’interface utilisateur, ce qui améliorer l’expérience utilisateur globale.
// Custom header button
let headerCustomButton = CustomButtonViewData(image: UIImage(named: "...")!,
title: "My header button") {_ in
// Process my button onClick
}
let callScreenHeaderViewData = CallScreenHeaderViewData(
customButtons: [headerCustomButton]
)
// Custom control bar button
let customButton = CustomButtonViewData(image: UIImage(named: "...")!,
title: "My button") {_ in
// Process my button onClick
}
let callScreenControlBarOptions = CallScreenControlBarOptions(
customButtons: [customButton]
)
let callScreenOptions = CallScreenOptions(
controlBarOptions: callScreenControlBarOptions, headerViewData: callScreenHeaderViewData)
let localOptions = LocalOptions(callScreenOptions: callScreenOptions)
let callComposite = CallComposite(credential: credential)
callComposite.launch(locator: .roomCall(roomId: "..."), localOptions: localOptions)
Comme pour les boutons fournis par Call composite, les boutons personnalisés peuvent être mis à jour après le lancement.
customButton.enabled = true