Personalizar botões

Para implementar ações personalizadas ou modificar o layout do botão atual, você pode interagir com a API da Biblioteca Nativa da Interface do Usuário. Essa API envolve a definição de configurações de botão personalizadas, a especificação de ações e o gerenciamento das ações atuais da barra de botões. A API fornece métodos para adicionar ações personalizadas e remover botões existentes, todos acessíveis por meio de chamadas de função simples.

Essa funcionalidade fornece um alto grau de personalização e garante que a interface do usuário permaneça coesa e consistente com o design geral do aplicativo.

Pré-requisitos

• Uma conta do Azure com uma subscrição ativa. Crie uma conta gratuitamente.
• Um recurso de Serviços de Comunicação implantado. Crie um recurso de Serviços de Comunicação.
• Um token de acesso de usuário para habilitar o cliente de chamada. Obtenha um token de acesso de usuário.
• Opcional: conclusão do início rápido para começar a usar os compostos da Biblioteca da Interface do Usuário.

Configurar o recurso

Remover botões

CallCompositeCallScreenControlBarOptions, permita a flexibilidade de personalizar botões removendo botões específicos, como câmera, microfone e controles de áudio. Essa API permite que você personalize a interface do usuário de acordo com seus requisitos específicos de aplicativo e design de experiência do usuário. Basta definir o visible ou enabled para false o CallCompositeButtonViewData botão para ocultar ou desativar.

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

O botão pode ser atualizado após o lançamento do composto de chamadas.

Kotlin

cameraButton.setVisible(true)

Java

cameraButton.setVisible(true);

Adicionar ações personalizadas

Call composite está usando ícones de interface do usuário Fluent. Você pode baixar os ícones diretamente do repositório Fluent UI GitHub e incorporá-los ao seu projeto, conforme necessário. Essa abordagem garante a consistência visual em todos os elementos da interface do usuário, melhorando a experiência geral do usuário.

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

Semelhante aos Call composite botões fornecidos, os botões personalizados são atualizáveis após o lançamento.

Kotlin

customButton.setVisible(true)

Java

customButton.setVisible(true);

Remover ou desativar botões

CallScreenControlBarOptions, permita a flexibilidade de personalizar botões removendo botões específicos, como câmera, microfone e controles de áudio. Essa API permite que você personalize a interface do usuário de acordo com seus requisitos específicos de aplicativo e design de experiência do usuário. Basta definir o visible ou enabled para false o ButtonViewData botão para ocultar ou desativar.

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)

O botão pode ser atualizado após o lançamento do composto de chamadas.

cameraButton.visible = true

Adicionar ações personalizadas

Call composite está usando ícones de interface do usuário Fluent. Você pode baixar os ícones diretamente do repositório Fluent UI GitHub e incorporá-los ao seu projeto, conforme necessário. Essa abordagem garante a consistência visual em todos os elementos da interface do usuário, melhorando a experiência geral do usuário.

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

Semelhante aos Call composite botões fornecidos, os botões personalizados são atualizáveis após o lançamento.

customButton.enabled = true

Próximos passos

• Saiba mais sobre a biblioteca da interface do usuário