Xamarin. フォーム素材ビジュアルXamarin.Forms Material Visual

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

マテリアルの設計は、Google によって作成されたこだわりデザインシステムで、ビューやレイアウトの外観と動作について、サイズ、色、スペース、およびその他の側面を規定します。Material Design is an opinionated design system created by Google, that prescribes the size, color, spacing, and other aspects of how views and layouts should look and behave.

Xamarin. Forms Material ビジュアルを使用すると、マテリアルデザインルールを Xamarin. Forms アプリケーションに適用し、同一のアプリケーション、または iOS と Android でほぼ同一のアプリケーションを作成できます。Xamarin.Forms Material Visual can be used to apply Material Design rules to Xamarin.Forms applications, creating applications that look identical, or largely identical, on iOS and Android. 素材ビジュアルが有効になっている場合、サポートされているビューでは、同じデザインクロスプラットフォームが採用されており、統一されたルックアンドフィールが作成されます。When Material Visual is enabled, supported views adopt the same design cross-platform, creating a unified look and feel. これは、マテリアルデザインルールを適用するマテリアルレンダラーで実現されます。This is achieved with material renderers, that apply the Material Design rules.

アプリケーションで Xamarin を有効にするためのプロセスは次のとおりです。The process for enabling Xamarin.Forms Material Visual in your application is:

  1. IOS および Android プラットフォームのプロジェクトに、 Xamarin. Forms. Material NuGet パッケージを追加します。Add the Xamarin.Forms.Visual.Material NuGet package to your iOS and Android platform projects. この NuGet パッケージは、iOS および Android で最適化されたマテリアルデザインレンダラーを提供します。This NuGet package delivers optimized Material Design renderers on iOS and Android. IOS では、パッケージはMaterialComponentsに推移的なC#依存関係を提供します。これは、ios 用の Google のマテリアルコンポーネントへのバインドです。On iOS, the package provides the transitive dependency to Xamarin.iOS.MaterialComponents, which is a C# binding to Google's Material Components for iOS. Android では、TargetFramework が正しくセットアップされていることを確認するために、パッケージにビルドターゲットが用意されています。On Android, the package provides build targets to ensure that your TargetFramework is correctly set up.
  2. 各プラットフォームプロジェクトのマテリアルレンダラーを初期化します。Initialize the material renderers in each platform project. 詳細については、「マテリアルレンダラーの初期化」を参照してください。For more information, see Initialize material renderers.
  3. マテリアルデザインルールを適用するページVisualでプロパティMaterialをに設定して、マテリアルレンダラーを使用します。Consume the material renderers by setting the Visual property to Material on any pages that should adopt the Material Design rules. 詳細については、「マテリアルレンダラーの使用」を参照してください。For more information, see Consume material renderers.
  4. optionalマテリアルレンダラーをカスタマイズします。[optional] Customize the material renderers. 詳細については、「マテリアルレンダラーをカスタマイズする」を参照してください。For more information, see Customize material renderers.

重要

Android では、マテリアルレンダラーには 5.0 (API 21) 以上のバージョンと、バージョン 9.0 (API 28) の TargetFramework が必要です。On Android, the material renderers require a minimum version of 5.0 (API 21) or greater, and a TargetFramework of version 9.0 (API 28). さらに、プラットフォームプロジェクトには Android サポートライブラリ28.0.0 以上が必要です。また、そのテーマは、マテリアルコンポーネントのテーマを継承するか、AppCompat テーマから継承する必要があります。In addition, your platform project requires Android support libraries 28.0.0 or greater, and its theme needs to inherit from a Material Components theme or continue to inherit from an AppCompat theme. 詳細については、次を参照してください。 Android 用資料のコンポーネントの概要します。For more information, see Getting started with Material Components for Android.

次のビューについては、現在、マテリアルレンダラーがXamarin. Forms. material NuGet パッケージに含まれています。Material renderers are currently included in the Xamarin.Forms.Visual.Material NuGet package for the following views:

機能的には、素材のレンダラーは既定のレンダラーと変わりません。Functionally, the material renderers are no different to the default renderers.

マテリアルレンダラーの初期化Initialize material renderers

Xamarin. Forms. material NuGet パッケージをインストールした後、マテリアルレンダラーを各プラットフォームプロジェクトで初期化する必要があります。After installing the Xamarin.Forms.Visual.Material NuGet package, the material renderers must be initialized in each platform project.

IOS では、 Xamarin.Forms.Forms.InitメソッドのにメソッドをXamarin.Forms.FormsMaterial.Init呼び出すことによって、 AppDelegate.csでこれを行う必要があります。On iOS, this should occur in AppDelegate.cs by invoking the Xamarin.Forms.FormsMaterial.Init method after the Xamarin.Forms.Forms.Init method:

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

Android では、 Xamarin.Forms.Forms.InitメソッドのにメソッドをXamarin.Forms.FormsMaterial.Init呼び出すことによって、 MainActivity.csでこれを行う必要があります。On Android, this should occur in MainActivity.cs by invoking the Xamarin.Forms.FormsMaterial.Init method after the Xamarin.Forms.Forms.Init method:

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

素材レンダラーを使用するConsume material renderers

アプリケーションでは、ページ、レイアウト、またはビュー VisualElement.Visualのプロパティを次のように設定するMaterialことによって、マテリアルレンダラーの使用を選択できます。Applications can opt into using the material renderers by setting the VisualElement.Visual property on a page, layout, or view, to Material:

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

これに相当する C# コードを次に示します。The equivalent C# code is:

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

プロパティは、を実装IVisualする任意の型に設定できますVisualMarker 。クラスではIVisual 、次のプロパティを指定します。 VisualThe Visual property can be set to any type that implements IVisual, with the VisualMarker class providing the following IVisual properties:

  • Default–ビューが既定のレンダラーを使用して表示されることを示します。Default – indicates that the view should render using the default renderer.
  • MatchParent–ビューが直接の親と同じレンダラーを使用する必要があることを示します。MatchParent – indicates that the view should use the same renderer as its direct parent.
  • Material–ビューがマテリアルレンダラーを使用して表示されることを示します。Material – indicates that the view should render using a material renderer.

重要

プロパティはVisualElementクラスで定義されVisual 、ビューは親のプロパティ値を継承します。 VisualThe Visual property is defined in the VisualElement class, with views inheriting the Visual property value from their parents. そのため、でVisualプロパティContentPageを設定すると、ページ内のサポートされているすべてのビューでそのビジュアルが使用されるようになります。Therefore, setting the Visual property on a ContentPage ensures that any supported views in the page will use that Visual. さらに、Visualビューのプロパティをオーバーライドできます。In addition, the Visual property can be overridden on a view.

次のスクリーンショットは、既定のレンダラーを使用して表示されるユーザーインターフェイスを示しています。The following screenshots show a user interface rendered using the default renderers:

IOS と Android での既定のレンダラーのスクリーンショットScreenshot of default renderers, on iOS and Android

次のスクリーン ショットは、素材のレンダラーを使用するレンダリングと同じユーザー インターフェイスを表示します。The following screenshots show the same user interface rendered using the material renderers:

IOS と Android でのマテリアルレンダラーのスクリーンショットScreenshot of material renderers, on iOS and Android

ここで示す既定のレンダラーと素材レンダラーの主な違いは、素材レンダラーによってテキストButtonが大文字になり、境界のFrame角が丸くなることです。The main visible differences between the default renderers and material renderers, shown here, are that the material renderers capitalize Button text, and round the corners of Frame borders. ただし、マテリアルレンダラーではネイティブコントロールが使用されるため、フォント、影、色、昇格などの領域では、プラットフォーム間にユーザーインターフェイスの違いが存在する可能性があります。However, material renderers use native controls, and therefore there may still be user interface differences between platforms for areas such as fonts, shadows, colors, and elevation.

注意

マテリアルデザインコンポーネントは、Google のガイドラインに密接に準拠しています。Material Design components adhere closely to Google's guidelines. そのため、素材デザインレンダラーは、そのサイズと動作にバイアスをかけます。As a result, Material Design renderers are biased towards that sizing and behavior. スタイルまたは動作をより細かく制御する必要がある場合でも、独自の効果動作、またはカスタムレンダラーを作成して、必要な詳細を実現できます。When you require greater control of styles or behavior, you can still create your own Effect, Behavior, or Custom Renderer to achieve the detail you require.

素材レンダラーをカスタマイズするCustomize material renderers

必要に応じて、次の基本クラスを使用して、既定のレンダラーと同様に、マテリアルレンダラーをカスタマイズすることもできます。Material renderers can optionally be customized, just like the default renderers, through the following base classes:

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

次のコードは、クラスをMaterialProgressBarRendererカスタマイズする例を示しています。The following code shows an example of customizing the MaterialProgressBarRenderer class:

using Xamarin.Forms.Material.Android;

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

この例では、 ExportRendererAttributeは、3 CustomMaterialProgressBarRenderer番目の引数としてProgressBar登録されたIVisual型を使用して、ビューを表示するためにクラスを使用することを指定しています。In this example, the ExportRendererAttribute specifies that the CustomMaterialProgressBarRenderer class will be used to render the ProgressBar view, with the IVisual type registered as the third argument.

注意

の一部としてIVisual型を指定するレンダラーは、既定のレンダラーではなくビューでの表示に使用されます。 ExportRendererAttributeA renderer that specifies an IVisual type, as part of its ExportRendererAttribute, will be used to render opted in views, rather than the default renderer. レンダラーの選択時に、Visualビューのプロパティを検査および表示機能の選択プロセスに含まれています。At renderer selection time, the Visual property of the view is inspected and included in the renderer selection process.

カスタムレンダラーの詳細については、「カスタムレンダラー」を参照してください。For more information about custom renderers, see Custom Renderers.