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 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.

素材の視覚的スクリーンショットMaterial Visual screenshots

アプリケーションで 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 Material Visual in each platform project. 詳細については、「マテリアルビジュアルの初期化」を参照してください。For more information, see Initialize Material Visual.
  3. 素材デザインルールを採用する必要がある任意のページで、 Visualプロパティを Material に設定して、素材ビジュアルコントロールを作成します。Create Material Visual controls 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 Material controls. 詳細については、「マテリアルコントロールをカスタマイズする」を参照してください。For more information, see Customize Material controls.

重要

Android では、マテリアルビジュアルには 5.0 (API 21) 以上のバージョンと、バージョン 9.0 (API 28) の TargetFramework が必要です。On Android, Material Visual requires 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.

素材ビジュアルは現在、次のコントロールをサポートしています。Material Visual currently supports the following controls:

マテリアルコントロールは、マテリアルデザインルールを適用するマテリアルレンダラーによって実現されます。Material controls are realized by Material renderers, which apply the Material Design rules. 機能的には、素材レンダラーは既定のレンダラーとは異なります。Functionally, Material renderers are no different to the default renderers. 詳細については、「素材ビジュアルをカスタマイズする」を参照してください。For more information, see Customize Material Visual.

マテリアルビジュアルの初期化Initialize Material Visual

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);

マテリアルビジュアルの適用Apply Material Visual

アプリケーションでは、ページ、レイアウト、またはビューのVisualElement.Visualプロパティを Materialに設定することによって、素材を視覚的に表示できます。Applications can enable Material Visual 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;

VisualElement.Visual プロパティを Material に設定すると、アプリケーションでは、既定のレンダラーの代わりに素材ビジュアルレンダラーを使用するように指示されます。Setting the VisualElement.Visual property to Material directs your application to use the Material Visual renderers instead of the default renderers. Visualプロパティは、IVisualを実装する任意の型に設定できます。 VisualMarkerクラスでは、次の IVisual プロパティを指定できます。The 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.

重要

VisualプロパティはVisualElementクラスで定義され、ビューは親から Visual プロパティ値を継承します。The Visual property is defined in the VisualElement class, with views inheriting the Visual property value from their parents. したがって、 ContentPageVisual プロパティを設定すると、ページ内のサポートされているすべてのビューでそのビジュアルが使用されるようになります。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 Visual

Material Visual NuGet パッケージは、Xamarin. Forms コントロールを認識するレンダラーのコレクションです。The Material Visual NuGet package is a collection of renderers that realize the Xamarin.Forms controls. カスタマイズ (素材を) ビジュアルコントロールは、既定のコントロールのカスタマイズと同じです。Customizing Material Visual controls is identical to customizing default controls.

既存のコントロールをカスタマイズすることを目標とする場合は、効果が推奨される方法です。Effects are the recommended technique when the goal is to customize an existing control. マテリアルビジュアルレンダラーが存在する場合は、レンダラーをサブクラス化するよりも効果があるため、コントロールをカスタマイズする作業はあまりありません。If a Material Visual renderer exists, it is less work to customize the control with an effect than it is to subclass the renderer. 効果の詳細については、「 Xamarin. フォームの効果」を参照してください。For more information about effects see Xamarin.Forms effects.

カスタムレンダラーは、マテリアルレンダラーが存在しない場合に推奨される方法です。Custom renderers are the recommended technique when a Material renderer does not exist. 次のレンダラークラスは、素材ビジュアルに含まれています。The following renderer classes are included with Material Visual:

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

素材レンダラーのサブクラス化は、非マテリアルレンダラーとほぼ同じです。Subclassing a Material renderer is almost identical to non-Material renderers. ただし、素材レンダラーをサブクラス化するレンダラーをエクスポートする場合は、VisualMarker.MaterialVisual 型を指定する ExportRenderer 属性に3番目の引数を指定する必要があります。However, when exporting a renderer that subclasses a Material renderer, you must provide a third argument to the ExportRenderer attribute that specifies the VisualMarker.MaterialVisual type:

using Xamarin.Forms.Material.Android;

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

この例では、ExportRendererAttribute は、CustomMaterialProgressBarRenderer クラスを使用してProgressBarビューを表示することを指定し、IVisual 型を3番目の引数として登録します。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.

注意

ExportRendererAttributeの一部として IVisual 型を指定するレンダラーは、既定のレンダラーではなくビューにオプトインを表示するために使用されます。A 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.