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

De functie configureren

Knoppen verwijderen

CallCompositeCallScreenControlBarOptions, de flexibiliteit om knoppen aan te passen door specifieke knoppen zoals camera, microfoon en audiobesturingselementen te verwijderen. Met deze API kunt u de gebruikersinterface aanpassen aan de specifieke toepassingsvereisten en het ontwerp van de gebruikerservaring. U hoeft alleen de visible knop falseenabledCallCompositeButtonViewData te verbergen of uit te schakelen.

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 worden bijgewerkt nadat de oproep samengesteld is gestart.

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 Call composite bij de opgegeven knoppen kunnen aangepaste knoppen na de lancering worden bijgewerkt.

Kotlin

customButton.setVisible(true)

Java

customButton.setVisible(true);

Knoppen verwijderen of uitschakelen

CallScreenControlBarOptions, de flexibiliteit om knoppen aan te passen door specifieke knoppen zoals camera, microfoon en audiobesturingselementen te verwijderen. Met deze API kunt u de gebruikersinterface aanpassen aan de specifieke toepassingsvereisten en het ontwerp van de gebruikerservaring. U hoeft alleen de visible knop falseenabledButtonViewData 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 de oproep samengesteld 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 Call composite bij de opgegeven knoppen kunnen aangepaste knoppen na de lancering worden bijgewerkt.

customButton.enabled = true

Volgende stappen

• Meer informatie over de UI-bibliotheek