Dostosowywanie przycisków

Aby zaimplementować akcje niestandardowe lub zmodyfikować bieżący układ przycisku, możesz wchodzić w interakcje z interfejsem API biblioteki interfejsu użytkownika natywnego. Ten interfejs API obejmuje definiowanie niestandardowych konfiguracji przycisków, określanie akcji i zarządzanie bieżącymi akcjami paska przycisków. Interfejs API udostępnia metody dodawania akcji niestandardowych i usuwania istniejących przycisków, z których wszystkie są dostępne za pośrednictwem prostych wywołań funkcji.

Ta funkcja zapewnia wysoki stopień dostosowywania i zapewnia, że interfejs użytkownika pozostaje spójny i spójny z ogólnym projektem aplikacji.

Wymagania wstępne

Konto platformy Azure z aktywną subskrypcją. Utwórz konto bezpłatnie.
Wdrożony zasób usług komunikacyjnych. Utwórz zasób usług komunikacyjnych.
Token dostępu użytkownika umożliwiający włączenie klienta połączeń. Uzyskiwanie tokenu dostępu użytkownika.
Opcjonalnie: ukończenie przewodnika Szybki Start w zakresie rozpoczynania pracy z komponentami biblioteki UI.

Konfiguracja funkcji

Usuń przyciski

CallCompositeCallScreenControlBarOptions, umożliwiają elastyczność dostosowywania przycisków przez usunięcie określonych przycisków, takich jak aparat, mikrofon i kontrolki audio. Ten interfejs API umożliwia dostosowanie interfejsu użytkownika zgodnie z ich konkretnymi wymaganiami aplikacji i projektowaniem środowiska użytkownika. Wystarczy ustawić visible lub enabled na false, aby CallCompositeButtonViewData ukryć lub wyłączyć przycisk.

Kotlin
Java

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)

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

Przycisk można zaktualizować po uruchomieniu złożonego wywołania.

Kotlin
Java

cameraButton.setVisible(true)

cameraButton.setVisible(true);

Dodawanie akcji niestandardowych

Call composite używa ikon interfejsu użytkownika Fluent. Ikony można pobrać bezpośrednio z repozytorium GitHub fluent UI i dołączyć je do projektu zgodnie z potrzebami. Takie podejście gwarantuje spójność wizualną we wszystkich elementach interfejsu użytkownika, poprawiając ogólne doświadczenie użytkownika.

Zrzut ekranu przedstawiający doświadczenie związane z dodawaniem nowego przycisku do biblioteki interfejsu użytkownika.

Kotlin
Java


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

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

Podobnie jak Call composite w przypadku udostępnionych przycisków, przyciski niestandardowe można aktualizować po uruchomieniu.

Kotlin
Java

customButton.setVisible(true)

customButton.setVisible(true);

Usuwanie lub wyłączanie przycisków

CallScreenControlBarOptions, umożliwiają elastyczność dostosowywania przycisków przez usunięcie określonych przycisków, takich jak aparat, mikrofon i kontrolki audio. Ten interfejs API umożliwia dostosowanie interfejsu użytkownika zgodnie z ich konkretnymi wymaganiami aplikacji i projektowaniem środowiska użytkownika. Wystarczy ustawić visible lub enabled na false, aby ButtonViewData ukryć lub wyłączyć przycisk.

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)

Przycisk można zaktualizować po uruchomieniu złożonego wywołania.

cameraButton.visible = true

Dodawanie akcji niestandardowych

Zrzut ekranu przedstawiający doświadczenie związane z dodawaniem nowego przycisku do biblioteki interfejsu użytkownika.

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

Podobnie jak Call composite w przypadku udostępnionych przycisków, przyciski niestandardowe można aktualizować po uruchomieniu.

customButton.enabled = true

Następne kroki

Dowiedz się więcej o bibliotece interfejsu użytkownika

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-10-08

Udostępnij przez

Dostosowywanie przycisków

Wymagania wstępne

Konfiguracja funkcji

Usuń przyciski

Dodawanie akcji niestandardowych

Usuwanie lub wyłączanie przycisków

Dodawanie akcji niestandardowych

Następne kroki

Sprzężenie zwrotne

Dodatkowe źródła