Xamarin.Android Designer マテリアル デザイン機能
このトピックでは、開発者がマテリアル デザインに準拠したレイアウトを簡単に作成できるようにするDesigner機能について説明します。 このセクションでは、マテリアル グリッド、マテリアル カラー パレット、文字体裁スケール、テーマ エディターの使用方法について説明します。
2016 年の進化: 誰もがマテリアル デザインで美しいアプリを作成できる
概要
Xamarin.Android Designerには、マテリアル デザインに準拠したレイアウトを簡単に作成できる機能が含まれています。 マテリアル デザインに慣れていない場合は、 マテリアル デザインの概要に関するページを参照してください。
このガイドでは、次のDesigner機能について説明します。
マテリアル グリッド – マテリアル デザインガイドラインに従ってレイアウト ウィジェットを配置するのに役立つグリッド、間隔、およびキーラインを表示するデザイン サーフェイス上のオーバーレイ。
テーマ エディター – テーマ のサブセットの色情報を設定できる小さなカラー リソース エディター。 たとえば、 などの
colorPrimarycolorPrimaryDark素材の色をプレビューおよびcolorAccent変更できます。
これらの各機能を見て、その使用方法の例を示します。
マテリアル デザイン グリッド
[マテリアル デザイン グリッド] メニューは、Designerの上部にあるツールバーから使用できます。
[マテリアル デザイン グリッド]アイコンをクリックすると、Designerは次の要素を含むオーバーレイをデザイン サーフェイスに表示します。
キーライン (オレンジ色の線)
間隔 (緑の領域)
グリッド (青い線)
これらの要素は、前のスクリーンショットで確認できます。 これらの各オーバーレイ項目は構成可能です。 [マテリアル デザイン グリッド] メニューの横にある省略記号をクリックすると、ダイアログ ポップオーバーが開き、グリッドの無効化/有効化、キーラインの配置の構成、間隔の設定を行うことができます。 すべての値は (密度に依存しないピクセル) で dp 表されることに注意してください。
新しいキーラインを追加するには、[ オフセット ] ボックスに新しいオフセット値を入力し、位置 (左、 上、 右、または 下) を選択し、[+] アイコンをクリックして新しいキーラインを追加します。 同様に、新しい間隔を追加するには、[サイズ] ボックスと [オフセット] ボックスにそれぞれ サイズ と オフセット (dp) を入力します。 場所 (左、 上、 右、 または下) を選択し、[+] アイコンをクリックして新しい間隔を追加します。
これらの構成値を変更すると、レイアウト XML ファイルに保存され、レイアウトを再度開いたときに再利用されます。
テーマ エディター
テーマ エディターを使用すると、テーマ属性のサブセットの色情報をカスタマイズできます。 テーマ エディターを開くには、ツール バーのペイントブラシ アイコンをクリックします。
テーマ エディターには、すべてのターゲット Android バージョンと API レベルのツール バーからアクセスできますが、ターゲット API レベルが API 21 (Android 5.0 Lollipop) より前の場合は、以下に示す機能のサブセットのみを使用できます。
テーマ エディターの左側のパネルには、現在選択されているテーマを構成する色の一覧が表示されます (この例では、 をDefault Theme使用しています)。
左側の色を選択すると、右側のパネルに次のタブが表示され、その色の編集に役立ちます。
継承 – 選択した色のスタイル継承図を表示し、そのテーマの色に割り当てられた解決済みの色と色コードを一覧表示します。
カラー ピッカー – 選択した色を任意の値に変更できます。
[マテリアル パレット] – 選択した色を、マテリアル デザインに準拠する値に変更できます。
リソース – 選択した色を、テーマ内の他の既存のカラー リソースのいずれかに変更できます。
これらのタブのそれぞれについて詳しく見てみましょう。
[継承] タブ
次の例に示すように、[継承] タブには、既定のテーマの [背景色] のスタイルの継承が一覧表示されます。
![[継承] タブ](material-design-features-images/vs/06-inherit-tab-w158.png#lightbox)
この例では、 既定のテーマ は を使用 @color/background_material_light するスタイルから継承しますが、色 color/material_grey_50コード値が の #fffafafaでオーバーライドします。
スタイルの継承の詳細については、「 スタイルとテーマ」を参照してください。
カラー ピッカー
次のスクリーンショットは、 カラー ピッカーを示しています。
この例では、さまざまな方法で 背景色 を任意の値に変更できます。
- 色を直接クリックする。
- 色相、彩度、明るさの値を入力します。
- RGB (赤、緑、青) の値を 10 進数で入力します。
- 選択した色のアルファ (不透明度) を設定します。
- 16 進数のカラー コードを直接入力します。
カラー ピッカーで選択した色は、マテリアル デザインのガイドラインや使用可能なカラー リソースのセットに限定 されません 。
リソース
[ リソース ] タブには、テーマに既に存在するカラー リソースの一覧が表示されます。
[ リソース ] タブを使用すると、選択した色の一覧が制限されます。 テーマの別の部分に既に割り当てられている色リソースを選択した場合、UI の 2 つの隣接する要素が (同じ色を持つため) "一緒に実行" され、ユーザーが区別しにくくなる可能性があることに注意してください。
マテリアル パレット
[ マテリアル パレット ]タブで、[ マテリアル デザイン]カラー パレットが開きます。 このパレットから色の値を選択すると、マテリアル デザインのガイドラインと一致するように色の選択が制限されます。
カラー パレットの上部にはプライマリ マテリアル デザインの色が表示され、パレットの下部には、選択した主色の色相の範囲が表示されます。 たとえば、[ Indigo] を選択すると、ダイアログの下部に Indigo の色合いのコレクションが表示されます。
色相を選択すると、プロパティの色が選択した色相に変更されます。 次の例では、 ボタンの が Background TintIndigo 500 に変更されています。
![[Indigo 500] を選択します](material-design-features-images/vs/10-indigo-w158.png)
Background Tintは Indigo 500 (#ff3f51b5) のカラー コードに設定され、Designerはこの変更を反映するように背景色を更新します。
マテリアル デザイン カラー パレットの詳細については、「マテリアル デザイン カラー パレット ガイド」を参照してください。
新しいテーマの作成
次の例では、マテリアル パレットを使用して新しいカスタム テーマを作成します。 まず、[ 背景色] を [青 900] に変更します。
カラー リソースが変更されると、メッセージがポップアップ表示され、メッセージが表示されます。 現在のテーマには、未保存の変更があります。
Designerの背景色が新しい色の選択に変更されましたが、この変更はまだ保存されていません。 この時点で、次のいずれかの操作を行うことができます。
[ 変更の破棄 ] をクリックして新しい色の選択 (または選択肢) を破棄し、テーマを元の状態に戻します。
Ctrl キーを押しながら S キーを押して、現在のテーマに対する変更を保存します。
次の例では、 Ctrl + S キーを押して、変更が AppTheme に保存されました。
まとめ
このトピックでは、Xamarin.Android Designerで使用できるマテリアル デザイン機能について説明しました。 マテリアル デザイン グリッドを有効にして構成する方法と、テーマ エディターを使用して、マテリアル デザインガイドラインに準拠した新しいカスタム テーマを作成する方法について説明しました。 Xamarin.Android でのマテリアル デザインのサポートの詳細については、「 マテリアル テーマ」を参照してください。
![[色] アイコン](material-design-features-images/xs/04-new-color-icon.png#lightbox){kind=icon}
![[スタイル] タブ](material-design-features-images/xs/08-typo-scale-icon.png#lightbox){kind=icon}
![[継承] タブ](material-design-features-images/xs/13-inherit.png#lightbox)
