Xamarin.Android Designer のマテリアル デザイン機能
このトピックでは、開発者がマテリアル デザインに準拠したレイアウトを簡単に作成できるようにする Designer の機能について説明します。 このセクションでは、マテリアル グリッド、マテリアル カラー パレット、タイポグラフィ スケール、およびテーマ エディターの使用方法について説明します。
Evolve 2016: マテリアル デザインで誰でも美しいアプリを作成できます
概要
Xamarin.Android Designer には、マテリアル デザインに準拠したレイアウトを簡単に作成できる機能が含まれています。 マテリアル デザインに慣れていない場合は、マテリアル デザインの概要に関する記事を参照してください。
このガイドでは、次の 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 キーを押して、現在のテーマに変更を保存します。
次の例では、CTRL+S キーを押して、AppTheme に変更を保存しました。
まとめ
このトピックでは、Xamarin.Android Designer で使用できるマテリアル デザイン機能について説明しました。 マテリアル デザイン グリッドを有効にして構成する方法と、テーマ エディターを使用して、マテリアル デザインのガイドラインに準拠した新しいカスタム テーマを作成する方法について説明しました。 Xamarin.Android でのマテリアル デザインのサポートの詳細については、「マテリアル テーマ」を参照してください。
