Knoppen aanpassen

Als u aangepaste acties wilt implementeren of de huidige knopindeling wilt wijzigen, kunt u communiceren met de API van de systeemeigen gebruikersinterfacebibliotheek. Deze API omvat het definiëren van aangepaste knopconfiguraties, het opgeven van acties en het beheren van de huidige acties van de knopbalk. De API biedt methoden voor het toevoegen van aangepaste acties en het verwijderen van bestaande knoppen, die allemaal toegankelijk zijn via eenvoudige functieaanroepen.

Deze functionaliteit biedt een hoge mate van aanpassing en zorgt ervoor dat de gebruikersinterface coherent en consistent blijft met het algehele ontwerp van de toepassing.

Vereisten

• Een Azure-account met een actief abonnement. Gratis een account maken
• Een uitgerolde Communication Services-resource. Een Communication Services-resource maken.
• Een gebruikerstoegangstoken om de aanroepclient in te schakelen. Een toegangstoken voor gebruikers ophalen.
• Optioneel: Voltooi de quickstart om aan de slag te gaan met de samengestelde onderdelen van de UI-bibliotheek.

De functie configureren

Knoppen verwijderen

CallCompositeCallScreenControlBarOptions, biedt de flexibiliteit om knoppen aan te passen door specifieke knoppen, zoals camera, microfoon en audiobediening, te verwijderen. Met deze API kunt u de gebruikersinterface aanpassen aan de specifieke toepassingsvereisten en het ontwerp van de gebruikerservaring. Stel gewoon de visible of enabled in op false zodat de CallCompositeButtonViewData wordt verborgen of uitgeschakeld.

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

De knop kan geüpdatet worden na het starten van de samengestelde oproep.

Kotlin

cameraButton.setVisible(true)

Java

cameraButton.setVisible(true);

Aangepaste acties toevoegen

Call composite maakt gebruik van Fluent UI-pictogrammen. U kunt de pictogrammen rechtstreeks downloaden vanuit de Fluent UI GitHub-opslagplaats en deze indien nodig opnemen in uw project. Deze aanpak garandeert visuele consistentie in alle elementen van de gebruikersinterface, waardoor de algehele gebruikerservaring wordt verbeterd.

Kotlin

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

Java

// Custom header button
List<CallCompositeCustomButtonViewData> headerCustomButtons = new ArrayList<>();
headerCustomButtons.add(
        new CallCompositeCustomButtonViewData(
                "headerCustomButton",
                R.drawable.my_header_button_icon,
                "My header button",
                eventArgs -> {
                    // process my button onClick
                }
        )
);
CallCompositeCallScreenHeaderViewData headerOptions = new CallCompositeCallScreenHeaderViewData()
        .setCustomButtons(headerCustomButtons);

// Custom control bar button
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()
        .setHeaderViewData(headerOptions)
        .setControlBarOptions(controlBarOptions);

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

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

callComposite.launch(context, locator, localOptions);

Net als bij Call composite geleverde knoppen kunnen aangepaste knoppen na de lancering worden geüpdatet.

Kotlin

customButton.setVisible(true)

Java

customButton.setVisible(true);

Knoppen verwijderen of uitschakelen

Sta met CallScreenControlBarOptions de flexibiliteit toe om knoppen aan te passen door specifieke knoppen zoals camera, microfoon en audioknoppen te verwijderen. Met deze API kunt u de gebruikersinterface aanpassen aan de specifieke toepassingsvereisten en het ontwerp van de gebruikerservaring. Stel eenvoudig visible of enabled in op false om de ButtonViewData te verbergen of uit te schakelen.

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)

De knop kan worden bijgewerkt nadat het oproepcomposiet is gestart.

cameraButton.visible = true

Aangepaste acties toevoegen

Call composite maakt gebruik van Fluent UI-pictogrammen. U kunt de pictogrammen rechtstreeks downloaden vanuit de Fluent UI GitHub-opslagplaats en deze indien nodig opnemen in uw project. Deze aanpak garandeert visuele consistentie in alle elementen van de gebruikersinterface, waardoor de algehele gebruikerservaring wordt verbeterd.

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

Net als de vooraf ingestelde knoppen kunnen aangepaste knoppen na de lancering worden bijgewerkt.

customButton.enabled = true

Volgende stappen

• Meer informatie over de UI-bibliotheek