Mengkustomisasi bilah tombol

Untuk menerapkan tindakan kustom atau mengubah tata letak tombol saat ini, Anda dapat berinteraksi dengan API Pustaka Antarmuka Pengguna Asli. API ini melibatkan penentuan konfigurasi tombol kustom, menentukan tindakan, dan mengelola tindakan bilah tombol saat ini. API menyediakan metode untuk menambahkan tindakan kustom, dan menghapus tombol yang ada, yang semuanya dapat diakses melalui panggilan fungsi langsung.

Fungsionalitas ini memberikan tingkat kustomisasi yang tinggi, dan memastikan bahwa antarmuka pengguna tetap kohesif dan konsisten dengan desain keseluruhan aplikasi.

Prasyarat

• Akun Azure dengan langganan aktif. Buat akun secara gratis.
• Sumber daya Communication Services yang disebarkan. Buat sumber daya Azure Communication Services.
• Token akses pengguna untuk mengaktifkan klien panggilan. Dapatkan token akses pengguna.
• Opsional: Penyelesaian mulai cepat untuk memulai komposit Pustaka UI.

Menyiapkan fitur

Hapus tombol

CallCompositeCallScreenControlBarOptions, izinkan fleksibilitas untuk menyesuaikan bilah tombol dengan menghapus tombol tertentu seperti kamera, mikrofon, dan kontrol audio. API ini memungkinkan Anda menyesuaikan antarmuka pengguna sesuai dengan persyaratan aplikasi dan desain pengalaman pengguna spesifik mereka. Cukup atur visible atau enabled ke false untuk CallCompositeButtonViewData tombol sembunyikan atau nonaktifkan.

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

Tombol dapat diperbarui setelah meluncurkan komposit panggilan.

Kotlin

cameraButton.setVisible(true)

Java

cameraButton.setVisible(true);

Menambahkan tindakan kustom

Call composite menggunakan ikon UI Fasih. Anda dapat mengunduh ikon langsung dari repositori GitHub UI Fasih dan memasukkannya ke dalam proyek Anda sesuai kebutuhan. Pendekatan ini menjamin konsistensi visual di semua elemen antarmuka pengguna, meningkatkan pengalaman pengguna secara keseluruhan.

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

Mirip Call composite dengan tombol yang disediakan, tombol kustom dapat diperbarui setelah peluncuran.

Kotlin

customButton.setVisible(true)

Java

customButton.setVisible(true);

Menghapus atau menonaktifkan tombol

CallScreenControlBarOptions, izinkan fleksibilitas untuk menyesuaikan bilah tombol dengan menghapus tombol tertentu seperti kamera, mikrofon, dan kontrol audio. API ini memungkinkan Anda menyesuaikan antarmuka pengguna sesuai dengan persyaratan aplikasi dan desain pengalaman pengguna spesifik mereka. Cukup atur visible atau enabled ke false untuk ButtonViewData tombol sembunyikan atau nonaktifkan.

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)

Tombol dapat diperbarui setelah meluncurkan komposit panggilan.

cameraButton.visible = true

Menambahkan tindakan kustom

Call composite menggunakan ikon UI Fasih. Anda dapat mengunduh ikon langsung dari repositori GitHub UI Fasih dan memasukkannya ke dalam proyek Anda sesuai kebutuhan. Pendekatan ini menjamin konsistensi visual di semua elemen antarmuka pengguna, meningkatkan pengalaman pengguna secara keseluruhan.

let customButton = CustomButtonOptions(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)

Mirip Call composite dengan tombol yang disediakan, tombol kustom dapat diperbarui setelah peluncuran.

customButton.enabled = true

Langkah berikutnya

• Pelajari selengkapnya tentang Pustaka UI