このガイドでは、次の Designer 機能について説明します。
マテリアル グリッド – グリッド、間隔、キーラインを表示するデザイン サーフェイス上のオーバーレイで、マテリアル デザインのガイドラインに従ってレイアウト ウィジェットを配置するのに役立ちます。
テーマ エディター – テーマのサブセットの色情報を設定できる小さなカラー リソース エディター。 たとえば、colorPrimary、colorPrimaryDark、colorAccent など、マテリアルの色をプレビューおよび変更できます。
これらの各機能について説明し、それらを使用する方法の例を示します。
マテリアル デザイン グリッド
[Material Design Grid]\(マテリアル デザイン グリッド\) メニューは、Designer の上部にあるツールバーから使用できます。
[Material Design Grid]\(マテリアル デザイン グリッド\) アイコンをクリックすると、Designer で、次の要素を含むオーバーレイがデザイン サーフェイスに表示されます。
キーライン (オレンジ色の線)
間隔 (緑色の領域)
グリッド (青色の線)
これらの要素は、前のスクリーンショットで確認できます。 これらのオーバーレイ項目はそれぞれ構成可能です。 [Material Design Grid]\(マテリアル デザイン グリッド\) メニューの横にある省略記号をクリックすると、ダイアログ ポップオーバーが開き、グリッドの無効化/有効化、キーラインの配置の構成、間隔の設定を行うことができます。 すべての値は dp (密度に依存しないピクセル) で表されることに注意してください。
新しいキーラインを追加するには、[Offset]\(オフセット\) ボックスに新しいオフセット値を入力し、位置 (左、上、右、または下) を選択し、[+] アイコンをクリックして新しいキーラインを追加します。 同様に、新しい間隔を追加するには、[Size]\(サイズ\) ボックスと [Offset]\(オフセット\) ボックスにそれぞれサイズとオフセット (dp) を入力します。 場所 (左、上、右、または下) を選択し、[+] アイコンをクリックして新しい間隔を追加します。
これらの構成値を変更すると、レイアウト XML ファイルに保存され、レイアウトをもう一度開いたときに再利用されます。
テーマ エディター
テーマ エディターを使用すると、テーマ属性のサブセットの色情報をカスタマイズできます。 テーマ エディターを開くには、ツールバーのペイントブラシ アイコンをクリックします。
テーマ エディターには、すべてのターゲット Android バージョンと API レベルのツール バーからアクセスできますが、ターゲット API レベルが API 21 (Android 5.0 Lollipop) より前の場合は、以下に示す機能のサブセットのみを使用できます。
テーマ エディターの左側のパネルには、現在選択されているテーマを構成する色のリストが表示されます (この例では、Default Theme を使用)。
左側で色を選択すると、右側のパネルに次のタブが表示され、その色を編集するのに役立ちます。
継承 – 選択した色のスタイル継承図と、そのテーマの色に割り当てられている解決済みの色および色コードのリストが表示されます。
カラー ピッカー – 選択した色を任意の値に変更できます。
マテリアル パレット – 選択した色を、マテリアル デザインに準拠する値に変更できます。
リソース – 選択した色をテーマ内の他の既存のカラー リソースのいずれかに変更できます。
これらの各タブの詳細を見てみましょう。
[継承] タブ
次の例に示すように、[継承] タブには、既定のテーマの背景色のスタイルの継承がリストされます。
この例では、既定のテーマは、@color/background_material_light を使用するスタイルから継承しますが、color/material_grey_50 でオーバーライドします。この色コード値は #fffafafa です。
スタイルの継承の詳細については、「スタイルとテーマ」を参照してください。
カラー ピッカー
次のスクリーンショットは、カラー ピッカーを示しています。
この例では、さまざまな方法で背景色を任意の値に変更できます。
- 色を直接クリックする。
- 色相、彩度、明度の値を入力する。
- RGB (赤、緑、青) の値を 10 進数で入力する。
- 選択した色のアルファ (不透明度) を設定する。
- 16 進数の色コードを直接入力する。
カラー ピッカーで選択した色は、マテリアル デザインのガイドラインや使用可能なカラー リソースのセットに "限定されません"。
リソース
[リソース] タブには、テーマ内に既に存在するカラー リソースのリストが表示されます。
[リソース] タブを使用すると、選択対象がこのリスト内の色に制限されます。 テーマの別の部分に既に割り当てられているカラー リソースを選択した場合、隣接する 2 つの UI 要素が (同じ色を持つため) "一体化" して、ユーザーが区別することが難しくなる可能性があるので注意してください。
マテリアル パレット
[マテリアル パレット] タブで、マテリアル デザイン カラー パレットを開きます。 このパレットから色の値を選択する場合、選択できる色がマテリアル デザインのガイドラインと一致するものに制限されます。
カラー パレットの上部にはマテリアル デザインのプライマリ カラーが表示され、パレットの下部には選択したプライマリ カラーの色相の範囲が表示されます。 たとえば、Indigo を選択すると、ダイアログの下部に Indigo 色相のコレクションが表示されます。
色相を選択すると、プロパティの色が選択した色相に変更されます。 次の例では、ボタンの Background Tint が Indigo 500 に変更されています。
Background Tint は Indigo 500 の色コード (#ff3f51b5) に設定され、Designer はこの変更を反映するように背景色を更新します。
マテリアル デザイン カラー パレットの詳細については、マテリアル デザインのカラー パレット ガイドを参照してください。
新しいテーマの作成
次の例では、マテリアル パレットを使用して新しいカスタム テーマを作成します。 まず、背景色を "青色の 900" に変更します。
カラー リソースが変更されると、"現在のテーマに未保存の変更がある" というメッセージを示すポップアップが表示されます。
Designer の背景色が新しい色選択に変更されましたが、この変更はまだ保存されていません。 この時点で、次のいずれかを実行できます。
次の例では、CTRL+S キーを押して、AppTheme に変更を保存しました。
まとめ
このトピックでは、Xamarin.Android Designer で使用できるマテリアル デザイン機能について説明しました。 マテリアル デザイン グリッドを有効にして構成する方法と、テーマ エディターを使用して、マテリアル デザインのガイドラインに準拠した新しいカスタム テーマを作成する方法について説明しました。
Xamarin.Android でのマテリアル デザインのサポートの詳細については、「マテリアル テーマ」を参照してください。
このガイドでは、次の Designer 機能について説明します。
マテリアル デザイン グリッド – グリッド、間隔、キーラインを表示するデザイン サーフェイス上のオーバーレイで、マテリアル デザインのガイドラインに従ってレイアウト ウィジェットを配置するのに役立ちます。
マテリアル デザイン カラー パレット – 公式のマテリアル デザイン パレットから色を選択する際に役立つプロパティ パッド ダイアログ。
タイポグラフィ スケール – テキスト フィールドの textAppearance プロパティに対してマテリアル デザインに準拠した設定を選択できるプロパティ パッド ダイアログ。
テーマ エディター – テーマのサブセットの色情報を設定できる小さなカラー リソース エディター。 たとえば、colorPrimary、colorPrimaryDark、colorAccent など、マテリアルの色をプレビューおよび変更できます。
これらの各機能について説明し、それらを使用する方法の例を示します。
マテリアル デザイン グリッド
[Material Design Grid]\(マテリアル デザイン グリッド\) メニューは、Designer の上部にあるツールバーから使用できます。
[Material Design Grid]\(マテリアル デザイン グリッド\) アイコンをクリックすると、Designer で、次の要素を含むオーバーレイがデザイン サーフェイスに表示されます。
キーライン (オレンジ色の線)
間隔 (緑色の領域)
グリッド (青色の線)
これらの要素は、次のスクリーンショットで確認できます。
これらのオーバーレイ項目はそれぞれ構成可能です。 [Material Design Grid]\(マテリアル デザイン グリッド\) メニューの横にある省略記号 (...) をクリックすると、ダイアログ ポップオーバーが開き、グリッドの無効化/有効化、キーラインの配置の構成、間隔の設定を行うことができます。 すべての値は dp (密度に依存しないピクセル) で表されることに注意してください。
新しいキーラインを追加するには、[Offset]\(オフセット\) ボックスに新しいオフセット値を入力し、位置 (左、上、右、または下) を選択し、[+] アイコン (値が入力されると右側に表示されます) をクリックして新しいキーラインを追加します。 同様に、新しい間隔を追加するには、[Size]\(サイズ\) ボックスと [Offset]\(オフセット\) ボックスにそれぞれサイズとオフセット (dp) を入力します。 場所 (左、上、右、または下) を選択し、[+] アイコンをクリックして新しい間隔を追加します。
これらの構成値を変更すると、レイアウト XML ファイルに保存され、レイアウトをもう一度開いたときに再利用されます。
マテリアル デザイン カラー パレット
色を受け入れるすべてのプロパティ パネル項目に、次のスクリーンショットに示すように、マテリアル デザイン カラー パレットを開くために使用できるパレット アイコンが追加されました。
このアイコンをクリックすると、ダイアログ ポップオーバーが開き、マテリアル デザイン カラー パレットからそのプロパティの色を構成できます。
カラー パレットの上部にはマテリアル デザインのプライマリ カラーが表示され、パレットの下部には選択したプライマリ カラーの色相の範囲が表示されます。 たとえば、Indigo を選択すると、ダイアログの下部に Indigo 色相のコレクションが表示されます。
色相を選択すると、プロパティの色が選択した色相に変更されます。 次の例では、ボタンの Background Tint が Indigo 500 に変更されています。
Background Tint は Indigo 500 の色コード (#ff3f51b5) に設定され、Designer はこの変更を反映するようにボタンの背景色を更新します。
マテリアル デザイン カラー パレットの詳細については、マテリアル デザインのカラー パレット ガイドを参照してください。
タイポグラフィ スケール
[プロパティ] パッドの [スタイル] タブの [Text Appearance]\(テキストの外観\) セクションには、マテリアル デザイン仕様に準拠した TextAppearance スタイルから選択できるアイコンがあります。
このアイコンをクリックすると、[タイポグラフィ スケール] ダイアログ ポップオーバーが開き、事前構成済みのテキスト スタイルのリストが表示され、ここから選択することができます。
次の例では、[表示 1] をクリックして、ボタンのテキストが大きいフォントの[表示 1] に変更します。
[タイポグラフィ スケール] ダイアログのテキスト スタイルは、[テーマ] 設定に従います。 たとえば、Designer で [Light] テーマを選択した場合、使用可能なテキスト スタイルのリストは[Light] テーマをミラーします。
テーマ エディター
テーマ エディターを使用すると、テーマ属性のサブセットの色情報をカスタマイズできます。 テーマ エディターを開くには、ツールバーのペイントブラシ アイコンをクリックします。
テーマ エディターには、すべてのターゲット Android バージョンと API レベルのツール バーからアクセスできますが、ターゲット API レベルが API 21 (Android 5.0 Lollipop) より前の場合は、以下に示す機能のサブセットのみを使用できます。
テーマ エディターの左側のパネルには、現在選択されているテーマを構成する色のリストが表示されます (この例では、Default Theme を使用)。
左側で色を選択すると、右側のパネルに次のタブが表示され、その色を編集するのに役立ちます。
継承 – 選択した色のスタイル継承図と、そのテーマの色に割り当てられている解決済みの色および色コードのリストが表示されます。
カラー ピッカー – 選択した色を任意の値に変更できます。
マテリアル パレット – 選択した色を、マテリアル デザインに準拠する値に変更できます。
リソース – 選択した色をテーマ内の他の既存のカラー リソースのいずれかに変更できます。
これらの各タブの詳細を見てみましょう。
[継承] タブ
次の例に示すように、[継承] タブには、既定のテーマの背景色のスタイルの継承がリストされます。
この例では、既定のテーマは、@color/background_material_dark を使用するスタイルから継承しますが、color/material_grey_850 でオーバーライドします。この色コード値は #ff303030 です。
スタイルの継承の詳細については、「スタイルとテーマ」を参照してください。
カラー ピッカー
次のスクリーンショットは、カラー ピッカーを示しています。
この例では、さまざまな方法で背景色を任意の値に変更できます。
- 色を直接クリックする。
- 色相、彩度、明度の値を入力する。
- RGB (赤、緑、青) の値を 10 進数で入力する。
- 選択した色のアルファ (不透明度) を設定する。
- 16 進数の色コードを直接入力する。
カラー ピッカーで選択した色は、マテリアル デザインのガイドラインや使用可能なカラー リソースのセットに "限定されません"。
リソース
[リソース] タブには、テーマ内に既に存在するカラー リソースのリストが表示されます。
[リソース] タブを使用すると、選択対象がこのリスト内の色に制限されます。 テーマの別の部分に既に割り当てられているカラー リソースを選択した場合、隣接する 2 つの UI 要素が (同じ色を持つため) "一体化" して、ユーザーが区別することが難しくなる可能性があるので注意してください。
マテリアル パレット
[マテリアル パレット] タブで、上記のマテリアル デザイン カラー パレットを開きます。 このパレットから色の値を選択する場合、選択できる色がマテリアル デザインのガイドラインと一致するものに制限されます。
新しいテーマの作成
次の例では、マテリアル パレットを使用して新しいカスタム テーマを作成します。 まず、背景色を "青色の 900" に変更します。
カラー リソースが変更されると、"現在のテーマに未保存の変更がある" というメッセージを示すポップアップが表示されます。
Designer で色の変更が行われましたが、この変更はまだ保存されていません。 この時点で、次のいずれかを実行できます。
まとめ
このトピックでは、Xamarin.Android Designer で使用できるマテリアル デザイン機能について説明しました。 マテリアル デザイン グリッドを有効にして構成する方法、マテリアル デザイン カラー パレットを使用してカラー プロパティを編集する方法、およびタイポグラフィ スケール セレクターを使用してテキスト プロパティを構成する方法について説明しました。 また、テーマ エディターを使用して、マテリアル デザインのガイドラインに準拠した新しいカスタム テーマを作成する方法についても説明しました。 Xamarin.Android でのマテリアル デザインのサポートの詳細については、「マテリアル テーマ」を参照してください。
