Personalizzare la barra dei pulsanti

Per implementare le azioni personalizzate o modificare il layout dei pulsanti correnti, è possibile interagire con l'API della libreria dell'interfaccia utente nativa. Questa API comporta la definizione di configurazioni dei pulsanti personalizzate, specificando le azioni e gestendo le azioni correnti della barra dei pulsanti. L'API offre metodi per aggiungere azioni personalizzate e rimuovere pulsanti esistenti, tutti accessibili tramite semplici chiamate di funzioni.

Questa funzionalità offre un livello elevato di personalizzazione e garantisce che l'interfaccia utente rimanga coesa e coerente rispetto al design complessivo dell'applicazione.

Prerequisiti

• Un account Azure con una sottoscrizione attiva. Creare un account gratuitamente.
• Una risorsa di Servizi di comunicazione distribuita. Creare una risorsa di Servizi di comunicazione.
• Token di accesso utente per abilitare il client di chiamata. Ottenere un token di accesso utente.
• Facoltativo: completamento della Guida introduttiva per iniziare a usare i compositi della libreria dell'interfaccia utente.

Configurare la funzionalità

Rimuovere pulsanti

CallCompositeCallScreenControlBarOptions, offrire la flessibilità per personalizzare la barra dei pulsanti rimuovendo pulsanti specifici come fotocamera, microfono e controlli audio. Questa API consente di personalizzare l'interfaccia utente in base ai requisiti specifici dell'applicazione e alla progettazione dell'esperienza utente. Basta impostare visible o enabled su false per CallCompositeButtonViewData per nascondere o disabilitare il pulsante.

Kotlin

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)

Java

CallCompositeCallScreenControlBarOptions controlBarOptions = new CallCompositeCallScreenControlBarOptions();

CallCompositeButtonOptions cameraButton = new CallCompositeButtonViewData()
        .setVisible(false);

controlBarOptions.setCameraButton(cameraButton);

CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions()
        .setControlBarOptions(controlBarOptions);

CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
        .setCallScreenOptions(callScreenOptions);

CallComposite callComposite = new CallCompositeBuilder()
        .build();

callComposite.launch(context, locator, localOptions);

Il pulsante può essere aggiornato dopo l'avvio della chiamata composita.

Kotlin

cameraButton.setVisible(true)

Java

cameraButton.setVisible(true);

Aggiungere azioni personalizzate

Call composite usa icone dell'interfaccia utente di Fluent. È possibile scaricare le icone direttamente dal repository GitHub dell'interfaccia utente di Fluent e incorporarle direttamente nel progetto, secondo necessità. Questo approccio garantisce una coerenza visiva tra tutti gli elementi dell'interfaccia utente, migliorando l'esperienza utente complessiva.

Kotlin

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()
    .setControlBarOptions(controlBarOptions)

val localOptions = CallCompositeLocalOptions()
    .setCallScreenOptions(callScreenOptions)

val callComposite = CallCompositeBuilder()
    .build()

callComposite.launch(context, locator, localOptions)

Java

CallCompositeCallScreenControlBarOptions controlBarOptions = new CallCompositeCallScreenControlBarOptions();

List<CallCompositeCustomButtonViewData> customButtons = new ArrayList<>();
customButtons.add(
        new CallCompositeCustomButtonViewData(
                "customButtonId",
                R.drawable.my_button_image,
                "My button",
                eventArgs -> {
                    // process my button onClick
                }
        )
);

controlBarOptions.setCustomButtons(customButtons);

CallCompositeCallScreenOptions callScreenOptions = new CallCompositeCallScreenOptions()
        .setControlBarOptions(controlBarOptions);

CallCompositeLocalOptions localOptions = new CallCompositeLocalOptions()
        .setCallScreenOptions(callScreenOptions);

CallComposite callComposite = new CallCompositeBuilder()
        .build();

callComposite.launch(context, locator, localOptions);

Analogamente ai pulsanti forniti Call composite, i pulsanti personalizzati sono aggiornabili dopo l'avvio.

Kotlin

customButton.setVisible(true)

Java

customButton.setVisible(true);

Rimuovere o disabilitare i pulsanti

CallScreenControlBarOptions, offrire la flessibilità per personalizzare la barra dei pulsanti rimuovendo pulsanti specifici come fotocamera, microfono e controlli audio. Questa API consente di personalizzare l'interfaccia utente in base ai requisiti specifici dell'applicazione e alla progettazione dell'esperienza utente. Basta impostare visible o enabled su false per ButtonViewData per nascondere o disabilitare il pulsante.

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)

Il pulsante può essere aggiornato dopo l'avvio della chiamata composita.

cameraButton.visible = true

Aggiungere azioni personalizzate

Call composite usa icone dell'interfaccia utente di Fluent. È possibile scaricare le icone direttamente dal repository GitHub dell'interfaccia utente di Fluent e incorporarle direttamente nel progetto, secondo necessità. Questo approccio garantisce una coerenza visiva tra tutti gli elementi dell'interfaccia utente, migliorando l'esperienza utente complessiva.

let customButton = CustomButtonViewData(image: UIImage(named: "...")!,
                                       title: "My button") {_ in
    // Process my button onClick
}

let callScreenControlBarOptions = CallScreenControlBarOptions(
    customButtons: [customButton]
)

let callScreenOptions = CallScreenOptions(controlBarOptions: callScreenControlBarOptions)
let localOptions = LocalOptions(callScreenOptions: callScreenOptions)

let callComposite = CallComposite(credential: credential)
callComposite.launch(locator: .roomCall(roomId: "..."), localOptions: localOptions)

Analogamente ai pulsanti forniti Call composite, i pulsanti personalizzati sono aggiornabili dopo l'avvio.

customButton.enabled = true

Passaggi successivi

• Altre informazioni sulla libreria dell'interfaccia utente