Xamarin.Forms Material Visual

マテリアル デザインは、ビューやレイアウトの外観や動作についてサイズ、色、間隔、その他の側面を規定する、Googleによって作成された限定機能の設計システムです。

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

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

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

Material Visual は現在、次のコントロールをサポートしています。

• ActivityIndicator
• Button
• CheckBox
• DatePicker
• Editor
• Entry
• Frame
• Picker
• ProgressBar
• Slider
• Stepper
• TimePicker

Material コントロールは、マテリアル デザイン ルールを適用するマテリアル レンダラーによって実現されます。 機能的には、マテリアル レンダラーは既定のレンダラーと何も変わりません。 詳細については、「Material Visual をカスタマイズする」を参照してください。

Material Visual を初期化する

Xamarin.FormsVisual.Material NuGet パッケージをインストールしたら、各プラットフォーム プロジェクトでマテリアル レンダラーを初期化する必要があります。

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

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

Android では、これは Xamarin.Forms.Forms.Init メソッドの "後" に Xamarin.Forms.FormsMaterial.Init メソッドを呼び出して、MainActivity.cs 内で行う必要があります。

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

Material Visual を適用する

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

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

同等の C# コードを次に示します。

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

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

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

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

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

既定のレンダラーとマテリアル レンダラーの間の主な目に見える違いは、マテリアル レンダラーが Button テキストを大文字にし、Frame 境界線の角を丸めるということです。 ただし、マテリアル レンダラーはネイティブ コントロールを使用するため、フォント、シャドウ、色、エレベーションなどの領域についてプラットフォーム間にユーザー インターフェイスの違いがまだ存在する場合があります。

Material Visual をカスタマイズする

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

エフェクトは、目標が既存のコントロールをカスタマイズすることであるときにお勧めの手法です。 Material Visual レンダラーが存在する場合は、レンダラーをサブクラス化するよりも、エフェクトを使用してコントロールをカスタマイズする方が作業が少なくなります。 エフェクトの詳細については、「Xamarin.Forms のエフェクト」を参照してください。

カスタム レンダラーは、マテリアル レンダラーが存在しないときにお勧めの手法です。 Material Visual には、次のレンダラー クラスが含まれています。

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

マテリアル レンダラーのサブクラス化は、非マテリアル レンダラーとほぼ同じです。 ただし、マテリアル レンダラーをサブクラス化するレンダラーをエクスポートするときは、ExportRenderer 属性に、VisualMarker.MaterialVisual 型を指定する 3 番めの引数を指定する必要があります。

using Xamarin.Forms.Material.Android;

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

この例では、ExportRendererAttribute は、ProgressBar ビューをレンダリングするために CustomMaterialProgressBarRenderer クラスが使用されることを指定していて、3 番めの引数として IVisual 型が登録されています。

カスタム レンダラーの詳細については、カスタム レンダラーに関するページを参照してください。

関連リンク

• Xamarin.Forms Visual Renderer を作成する
• Xamarin.Forms のエフェクト
• カスタム レンダラー