تخصيص شريط الأزرار

لتنفيذ إجراءات مخصصة أو تعديل تخطيط الزر الحالي، يمكنك التفاعل مع واجهة برمجة تطبيقات مكتبة واجهة المستخدم الأصلية. تتضمن واجهة برمجة التطبيقات هذه تعريف تكوينات الأزرار المخصصة وتحديد الإجراءات وإدارة الإجراءات الحالية لشريط الأزرار. توفر واجهة برمجة التطبيقات أساليب لإضافة إجراءات مخصصة، وإزالة الأزرار الموجودة، والتي يمكن الوصول إليها جميعا عبر استدعاءات الوظائف المباشرة.

توفر هذه الوظيفة درجة عالية من التخصيص، وتضمن أن تظل واجهة المستخدم متماسكة ومتسقة مع التصميم العام للتطبيق.

المتطلبات الأساسية

• حساب Azure مع اشتراك نشط. أنشئ حساباً مجاناً.
• تم نشر مورد Communication Services. إنشاء مورد Communication Services
• رمز مميز لوصول المستخدم لتمكين عميل المكالمة. الحصول على رمز مميز لوصول المستخدم.
• اختياري: إكمال التشغيل السريع لبدء استخدام المركبات في مكتبة واجهة المستخدم.

إعداد الميزة

إزالة الأزرار

CallCompositeCallScreenControlBarOptions، اسمح بالمرونة لتخصيص شريط الأزرار عن طريق إزالة أزرار معينة مثل الكاميرا والميكروفون وعناصر التحكم في الصوت. تسمح لك واجهة برمجة التطبيقات هذه بتخصيص واجهة المستخدم وفقا لمتطلبات التطبيق الخاصة بها وتصميم تجربة المستخدم. ما عليك سوى تعيين أو visible enabled إلى false للزر CallCompositeButtonViewData لإخفاء أو تعطيل.

كوتلين

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

يمكن تحديث الزر بعد بدء تشغيل مكالمة مركبة.

كوتلين

cameraButton.setVisible(true)

Java

cameraButton.setVisible(true);

إضافة إجراءات مخصصة

Call composite يستخدم أيقونات واجهة مستخدم Fluent. يمكنك تنزيل الأيقونات مباشرة من مستودع Fluent UI GitHub ودمجها في مشروعك حسب الحاجة. يضمن هذا الأسلوب التناسق المرئي عبر جميع عناصر واجهة المستخدم، ما يعزز تجربة المستخدم الشاملة.

كوتلين

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

على Call composite غرار الأزرار المتوفرة، يمكن تحديث الأزرار المخصصة بعد التشغيل.

كوتلين

customButton.setVisible(true)

Java

customButton.setVisible(true);

إزالة الأزرار أو تعطيلها

CallScreenControlBarOptions، اسمح بالمرونة لتخصيص شريط الأزرار عن طريق إزالة أزرار معينة مثل الكاميرا والميكروفون وعناصر التحكم في الصوت. تسمح لك واجهة برمجة التطبيقات هذه بتخصيص واجهة المستخدم وفقا لمتطلبات التطبيق الخاصة بها وتصميم تجربة المستخدم. ما عليك سوى تعيين أو visible enabled إلى false للزر ButtonViewData لإخفاء أو تعطيل.

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)

يمكن تحديث الزر بعد بدء تشغيل مكالمة مركبة.

cameraButton.visible = true

إضافة إجراءات مخصصة

Call composite يستخدم أيقونات واجهة مستخدم Fluent. يمكنك تنزيل الأيقونات مباشرة من مستودع Fluent UI GitHub ودمجها في مشروعك حسب الحاجة. يضمن هذا الأسلوب التناسق المرئي عبر جميع عناصر واجهة المستخدم، ما يعزز تجربة المستخدم الشاملة.

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)

على Call composite غرار الأزرار المتوفرة، يمكن تحديث الأزرار المخصصة بعد التشغيل.

customButton.enabled = true

الخطوات التالية

• تعرف على المزيد حول مكتبة واجهة المستخدم