Xamarin.Forms 素材のビジュアル

Download Sample サンプルのダウンロード

Material Design は、Google によって作成された、ビューやレイアウトの外観と動作のサイズ、色、間隔、その他の側面を規定する、意見に基いた設計システムです。

Xamarin.Forms マテリアル ビジュアルを使用して、マテリアル デザイン ルールをアプリケーションに適用し、iOS と Android でほぼ同じ外観のアプリケーション Xamarin.Forms を作成できます。 Material Visual を有効にすると、サポートされているビューで同じデザインクロスプラットフォームが採用され、統一された外観が作成されます。

Material Visual screenshots

アプリケーションで Material Xamarin.Forms Visual を有効にするプロセスは次の手順です。

  1. Xamarin.Forms を追加します 。Visual.Material/" data-linktype="external">。 Xamarin.FormsVisual.Material NuGet iOS および Android プラットフォーム プロジェクトにパッケージを追加します。 このNuGetは、iOS および Android 上で最適化された Material Design レンダラーを提供します。 iOS では、パッケージは Xamarin.iOS.MaterialComponentsに推移的な依存関係を提供します。これは、Google の iOS用素材コンポーネント への C# バインドです。 Android では、パッケージには、TargetFramework が正しく設定されていることを確認するためのビルド ターゲットが提供されます。
  2. 各プラットフォーム プロジェクトでマテリアル ビジュアルを初期化します。 詳細については、「Initialize Material Visual 」を参照してください
  3. 素材デザインルールを採用する必要があるページで プロパティを に設定して、 VisualMaterial 素材ビジュアル コントロールを作成します。 詳細については、「素材レンダラーを 使用する」を参照してください
  4. [省略可能]素材コントロールをカスタマイズする。 詳細については、「素材コントロールの カスタマイズ」を参照してください

重要

Android では、Material Visual には 5.0 (API 21) 以上の最小バージョンと、バージョン 9.0 (API 28) の TargetFramework が必要です。 さらに、プラットフォーム プロジェクトには Android サポート ライブラリ 28.0.0 以上が必要であり、そのテーマは素材コンポーネント テーマから継承するか、AppCompat テーマから継承し続ける必要があります。 詳細については、「Android 用の 素材コンポーネントの使用」を参照してください

現在、Material Visual では次のコントロールがサポートされています。

素材コントロールは、素材のデザイン ルールを適用する素材レンダラーによって実現されます。 機能的には、素材レンダラーは既定のレンダラーと同じではありません。 詳細については、「マテリアル ビジュアルの カスタマイズ」を参照してください

素材のビジュアルを初期化する

Xamarin.Forms をインストールした後 。Visual.Material/" data-linktype="external">。 Xamarin.FormsVisual.Material NuGetでは、各プラットフォーム プロジェクトで素材レンダラーを初期化する必要があります。

iOS では、 メソッドの後に メソッドを呼び出して 、AppDelegate.csでこれを行 う必要があります。

global::Xamarin.Forms.Forms.Init();
global::Xamarin.Forms.FormsMaterial.Init();

Android では、 メソッドの後に メソッドを呼び出して 、MainActivity.csこれが発生 する必要があります。

global::Xamarin.Forms.Forms.Init(this, savedInstanceState);
global::Xamarin.Forms.FormsMaterial.Init(this, savedInstanceState);

素材のビジュアルを適用する

アプリケーションでは、ページ、レイアウト、またはビューの プロパティを に設定することで、Material Visual VisualElement.Visual を有効にできます Material

<ContentPage Visual="Material"
             ...>
    ...
</ContentPage>

これに相当する C# コードを次に示します。

ContentPage contentPage = new ContentPage();
contentPage.Visual = VisualMarker.Material;

プロパティを VisualElement.Visual に設定すると、既定のレンダラーではなく、Material Visual レンダラーを使用 Material するアプリケーションが指示されます。 プロパティは、次のプロパティを提供する クラスを使用して、 を実装 VisualIVisualVisualMarker する任意の型に設定 IVisual できます。

  • Default – ビューが既定のレンダラーを使用してレンダリングする必要がある場合に示します。
  • MatchParent – ビューが直接の親と同じレンダラーを使用する必要があることを示します。
  • Material – マテリアル レンダラーを使用してビューをレンダリングする必要がある場合に示します。

重要

プロパティ Visual は クラスで定義され、ビューは親からプロパティ VisualElementVisual 値を継承します。 そのため、 に プロパティ Visual を設定すると、ページでサポートされているビューで確実にそのビジュアル ContentPage が使用されます。 さらに、 プロパティ Visual はビューでオーバーライドできます。

次のスクリーンショットは、既定のレンダラーを使用してレンダリングされたユーザー インターフェイスを示しています。

Screenshot of default renderers, on iOS and Android

次のスクリーンショットは、素材レンダラーを使用してレンダリングされたのと同じユーザー インターフェイスを示しています。

Screenshot of Material renderers, on iOS and Android

ここで示す既定のレンダラーと素材レンダラーの主な違いは、素材レンダラーがテキストを大文字にし、境界線の角を丸 ButtonFrame め込む点です。 ただし、素材レンダラーではネイティブ コントロールが使用されるため、フォント、シャドウ、色、昇格などの領域では、プラットフォーム間にユーザー インターフェイスの違いが引き続き存在する可能性があります。

注意

Material Design コンポーネントは、Google のガイドラインに密接に準拠しています。 その結果、Material Design レンダラーは、そのサイズ設定と動作に偏ります。 スタイルまたは動作を細く制御する必要がある場合でも、必要な詳細を実現するために独自の効果、動作、またはカスタム レンダラーを作成できます。

素材のビジュアルをカスタマイズする

Material Visual NuGet パッケージは、コントロールを実現するレンダラーのコレクション Xamarin.Forms です。 Material Visual コントロールのカスタマイズは、既定のコントロールのカスタマイズと同じです。

効果は、既存のコントロールをカスタマイズする場合に推奨される手法です。 Material Visual レンダラーが存在する場合は、レンダラーをサブクラス化するよりも、効果を使用してコントロールをカスタマイズする作業が少ない。 効果の詳細については、「 」を参照してください Xamarin.Forms effects

カスタム レンダラーは、素材レンダラーが存在しない場合に推奨される手法です。 次のレンダラー クラスは、Material Visual に含まれています。

  • MaterialButtonRenderer
  • MaterialCheckBoxRenderer
  • MaterialEntryRenderer
  • MaterialFrameRenderer
  • MaterialProgressBarRenderer
  • MaterialDatePickerRenderer
  • MaterialTimePickerRenderer
  • MaterialPickerRenderer
  • MaterialActivityIndicatorRenderer
  • MaterialEditorRenderer
  • MaterialSliderRenderer
  • MaterialStepperRenderer

素材レンダラーのサブクラス化は、素材以外のレンダラーとほぼ同じです。 ただし、Material レンダラーをサブクラス化するレンダラーをエクスポートする場合は、型を指定する 属性に 3 番目の ExportRenderer 引数を指定する必要 VisualMarker.MaterialVisual があります。

using Xamarin.Forms.Material.Android;

[assembly: ExportRenderer(typeof(ProgressBar), typeof(CustomMaterialProgressBarRenderer), new[] { typeof(VisualMarker.MaterialVisual) })]
namespace MyApp.Android
{
    public class CustomMaterialProgressBarRenderer : MaterialProgressBarRenderer
    {
        //...
    }
}

この例では、 クラスを使用してビューをレンダリングし、型を 3 番目の引数 ExportRendererAttributeCustomMaterialProgressBarRendererProgressBarIVisual として登録します。

注意

の一部として型を指定するレンダラーは、既定のレンダラーではなく、オプトインビューのレンダリング IVisualExportRendererAttribute に使用されます。 レンダラーの選択時に、ビュー Visual の プロパティが検査され、レンダラーの選択プロセスに含まれます。

カスタム レンダラーの詳細については、「カスタム レンダラー」 を参照してください