アプリケーションで UI ライブラリのテーマを設定する

  • [アーティクル]

Azure Communication Services UI ライブラリは、一連のコンポーネント、アイコン、および複合要素であり、プロジェクトの高品質なユーザー インターフェイスを簡単に構築できます。 UI ライブラリでは、Microsoft が使用するクロスプラットフォーム 設計システムである Fluent UI のコンポーネントとアイコンを使用します。 その結果、使いやすさ、アクセシビリティ、ローカリゼーションを念頭に置いてコンポーネントが構築されます。

この記事では、アプリケーションを構成するときに UI ライブラリ コンポーネントのテーマを変更する方法について説明します。

UI ライブラリは、別のサイトの開発者向けに完全に文書化されています。 このドキュメントは対話型であり、Web ページから直接試してみる機能を提供することで、API のしくみを理解するのに役立ちます。 詳細については、UI ライブラリのドキュメントを 参照してください。

前提条件

テーマを設定する

Web UI ライブラリに関する詳細なドキュメントとクイック スタートについては、Web UI ライブラリのストーリーブックを参照してください。

詳細については、Web UI ライブラリのテーマを参照してください。

詳細については、オープンソースの Android UI ライブラリとサンプル アプリケーション コードを参照してください。

テーマの定義

Android でのテーマは、XML リソース ファイルを介して処理されます。 Microsoft では、次のリソース ID をパブリック スコープに公開しています。

<resources>
    <public name="AzureCommunicationUICalling.Theme" type="style" />
    <public name="azure_communication_ui_calling_primary_color" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint10" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint20" type="attr" />
    <public name="azure_communication_ui_calling_primary_color_tint30" type="attr" />
</resources>

次のようなテーマをアプリに実装して、主な色と濃淡を指定できます。

<style name="MyCompany.CallComposite" parent="AzureCommunicationUICalling.Theme">
    <item name="azure_communication_ui_calling_primary_color">#7800D4</item>
    <item name="azure_communication_ui_calling_primary_color_tint10">#882BD8</item>
    <item name="azure_communication_ui_calling_primary_color_tint20">#E0C7F4</item>
    <item name="azure_communication_ui_calling_primary_color_tint30">#ECDEF9</item>
</style>

前の例は、次の UI 要素に影響します。

  • PrimaryColor:
    • アバター/ビデオ - 境界線 - 発話の表示
    • [通話に参加] ボタン - 背景
  • PrimaryColorTint10 Color:
    • [通話に参加] ボタン - 背景 - 強調表示 - ライト モード
    • [通話に参加] ボタン - 境界線 - ライト/ダーク モード
  • PrimaryColorTint20 Color:
    • [通話に参加] ボタン - 背景 - 強調表示 - ダーク モード
  • PrimaryColorTint30 Color:
    • [通話に参加] ボタン - 境界線 - 強調表示 - ライト/ダーク モード

テーマの適用

テーマ のスタイルは、テーマ リソース ID ThemeConfiguration/ThemeCallCompositeBuilderを渡すために適用されます。

val callComposite: CallComposite =
        CallCompositeBuilder()
            .theme(R.style.MyCompany_CallComposite)
            .build()

明るいモードと暗いモード

Android リソース システムでは、夜間テーマが処理されます。 Android のナイト モードは、システム全体の構成です。 夜間モードを有効にすると、Android はフォルダー内の -night/ リソースを優先します。 ナイトモードの色を指定するには、2 番目 theme.xml のファイルを values-night/.

ナイト モードをプログラムで有効にする場合、Android では次の関数を使用できます。 ただし、この構成はアプリケーションにグローバルに適用されます。 1 つのアクティビティに対してナイト モードを設定するための、信頼性の高い方法はありません。 ダーク テーマを適用するには、アプリケーションで次の設定を使用します。

AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)

詳細については、オープンソースの iOS UI ライブラリとサンプル アプリケーション コードを参照してください。

テーマの定義

テーマをカスタマイズするには、主色とそれに関連付けられている濃淡を変更します。 配色では、明るいモードと暗いモードをオーバーライドすることもできます。

影響を受ける UI

  • PrimaryColor:
    • アバター/ビデオ - 境界線 - 発話の表示
    • [通話に参加] ボタン - 背景
  • PrimaryColorTint10 Color:
    • [通話に参加] ボタン - 背景 - 強調表示 - ライト モード
    • [通話に参加] ボタン - 境界線 - ライト/ダーク モード
  • PrimaryColorTint20 Color:
    • [通話に参加] ボタン - 背景 - 強調表示 - ダーク モード
  • PrimaryColorTint30 Color:
    • [通話に参加] ボタン - 境界線 - 強調表示 - ライト/ダーク モード

実装

プロトコルを実装するカスタム テーマ オプションを ThemeOptions 作成できます。 その新しいクラス CallCompositeOptionsのインスタンスを .

class CustomThemeOptions: ThemeOptions {

 var primaryColor: UIColor {
  return UIColor(named: "primaryColor")
 }
 
 var primaryColorTint10: UIColor {
  return UIColor(named: "primaryColorTint10")
 }
 
 var primaryColorTint20: UIColor {
  return UIColor(named: "primaryColorTint20")
 }
 
 var primaryColorTint30: UIColor {
  return UIColor(named: "primaryColorTint30")
 }

 var colorSchemeOverride: UIUserInterfaceStyle {
  return UIUserInterfaceStyle.dark
 }
}

let callCompositeOptions = CallCompositeOptions(theme: CustomThemeOptions())

カラー アセットの定義

ライト モードとダーク モードの網掛けを使用して、アセット内の各色を定義します。 次の参照画像は、Xcode プロジェクトでアセットを構成する方法を示しています。

Screenshot of an example configuration of iOS color assets.

次のステップ