تخصيص شريط الأزرار
لتنفيذ إجراءات مخصصة أو تعديل تخطيط الزر الحالي، يمكنك التفاعل مع واجهة برمجة تطبيقات مكتبة واجهة المستخدم الأصلية. تتضمن واجهة برمجة التطبيقات هذه تعريف تكوينات الأزرار المخصصة وتحديد الإجراءات وإدارة الإجراءات الحالية لشريط الأزرار. توفر واجهة برمجة التطبيقات أساليب لإضافة إجراءات مخصصة، وإزالة الأزرار الموجودة، والتي يمكن الوصول إليها جميعا عبر استدعاءات الوظائف المباشرة.
توفر هذه الوظيفة درجة عالية من التخصيص، وتضمن أن تظل واجهة المستخدم متماسكة ومتسقة مع التصميم العام للتطبيق.
المتطلبات الأساسية
- حساب 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)
يمكن تحديث الزر بعد بدء تشغيل مكالمة مركبة.
إضافة إجراءات مخصصة
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)
على Call composite
غرار الأزرار المتوفرة، يمكن تحديث الأزرار المخصصة بعد التشغيل.
إزالة الأزرار أو تعطيلها
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