ボタンをカスタマイズする

[アーティクル]
09/27/2024

カスタムアクションを実装したり、現在のボタンレイアウトを変更したりするには、ネイティブ UI ライブラリの API を操作します。この API には、カスタムボタン構成の定義、アクションの指定、ボタンバーの現在のアクションの管理が含まれています。この API には、カスタムアクションを追加したり、既存のボタンを削除したりするためのメソッドが用意されており、これらはすべて、単純な関数呼び出しを介してアクセスできます。

この機能により、高度なカスタマイズが可能になり、ユーザーインターフェイスを統一され、アプリケーションの全体的な設計と一貫したものに保つことができます。

前提条件

アクティブなサブスクリプションが含まれる Azure アカウント。無料でアカウントを作成できます。
デプロイ済みの Communication Services リソース。 Communication Services リソースを作成します。
通話クライアントを有効にするためのユーザーアクセストークン。ユーザーアクセストークンを取得します。
省略可能: UI ライブラリの複合の概要に関するクイックスタートの完了。

機能を設定する

ボタンを削除する

CallCompositeCallScreenControlBarOptions を使用すると、カメラ、マイク、オーディオコントロールなどの特定のボタンを削除することで、ボタンを柔軟にカスタマイズできます。この API を使用すると、具体的なアプリケーション要件とユーザーエクスペリエンス設計に合わせてユーザーインターフェイスを調整できます。 CallCompositeButtonViewData の visible または enabled を false に設定して、ボタンを非表示または無効にします。

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

ボタンは、通話複合を起動した後に更新できます。

Kotlin
Java

cameraButton.setVisible(true)

cameraButton.setVisible(true);

カスタムアクションを追加する

Call composite は Fluent UI アイコンを使用しています。アイコンは、Fluent UI GitHub リポジトリから直接ダウンロードして、必要に応じてプロジェクトに組み込むことができます。このアプローチは、すべてのユーザーインターフェイス要素にわたる視覚的な一貫性を保証して、全体的なユーザーエクスペリエンスを向上させます。

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

Call composite が指定されたボタンと同様に、カスタムボタンは起動後に更新できます。

Kotlin
Java

customButton.setVisible(true)

customButton.setVisible(true);

ボタンの削除または無効化

CallScreenControlBarOptions を使用すると、カメラ、マイク、オーディオコントロールなどの特定のボタンを削除することで、ボタンを柔軟にカスタマイズできます。この API を使用すると、具体的なアプリケーション要件とユーザーエクスペリエンス設計に合わせてユーザーインターフェイスを調整できます。 ButtonViewData の visible または enabled を false に設定して、ボタンを非表示または無効にします。

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

カスタムアクションを追加する

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

Call composite が指定されたボタンと同様に、カスタムボタンは起動後に更新できます。

customButton.enabled = true

次のステップ

UI ライブラリの詳細情報

次の方法で共有

ボタンをカスタマイズする

前提条件

機能を設定する

ボタンを削除する

カスタムアクションを追加する

ボタンの削除または無効化

カスタムアクションを追加する

次のステップ

フィードバック

その他のリソース

次の方法で共有

ボタンをカスタマイズする

前提条件

機能を設定する

ボタンを削除する

カスタム アクションを追加する

ボタンの削除または無効化

カスタム アクションを追加する

次のステップ

フィードバック

その他のリソース

カスタムアクションを追加する

カスタムアクションを追加する