エントリのカスタマイズ

[アーティクル]
07/13/2023

Xamarin.Forms の Entry コントロールによって、1 行のテキストを編集対象にできます。この記事では、Entry コントロール用のカスタムレンダラーを作成する方法を示します。これにより、開発者は既定のネイティブレンダリングを、各自のプラットフォームに固有のカスタマイズでオーバーライドできるようになります。

すべての Xamarin.Forms コントロールには、ネイティブコントロールのインスタンスを作成する各プラットフォーム用のレンダラーが付属しています。 Entry コントロールが Xamarin.Forms アプリケーションによってレンダリングされると、iOS で EntryRenderer クラスがインスタンス化され、それによってネイティブの UITextField コントロールもインスタンス化されます。 Android プラットフォーム上では、EntryRenderer クラスによって EditText コントロールがインスタンス化されます。ユニバーサル Windows プラットフォーム (UWP) 上では、EntryRenderer クラスによって TextBox コントロールがインスタンス化されます。 Xamarin.Forms コントロールによってマップされるレンダラーとネイティブコントロールクラスの詳細については、「Renderer Base Classes and Native Controls」(レンダラーの基底クラスおよびネイティブコントロール) を参照してください。

次の図は、Entry コントロールと、それを実装する、対応するネイティブコントロールの関係を示しています。

Relationship Between Entry Control and Implementing Native Controls

レンダリングプロセスを活用して各プラットフォーム上の Entry コントロールにカスタムレンダラーを作成することで、プラットフォーム固有のカスタマイズを実装することができます。これを行うための実行プロセスは次のとおりです。

Xamarin.Forms カスタムコントロールを作成します。
Xamarin.Forms からカスタムコントロールを使用します。
各プラットフォーム上でコントロールのカスタムレンダラーを作成します。

プラットフォームごとに背景色が異なる Entry コントロールを実装するため、項目ごとに順番に説明します。

重要

この記事では、単純なカスタムレンダラーを作成する方法について説明します。ただし、プラットフォームごとに背景色が異なる Entry を実装するためにカスタムレンダラーを作成する必要はありません。これは、Device クラス、またはプラットフォーム固有の値を提供する OnPlatform マークアップ拡張を使用すると、より簡単に実行できます。詳細については、「Providing Platform-Specific Values」(プラットフォーム固有の値の提供) と「OnPlatform マークアップ拡張機能」を参照してください。

カスタムの Enrty コントロールの作成

カスタムの Entry コントロールは、次のコード例のように、Entry コントロールをサブクラス化することで作成できます。

public class MyEntry : Entry
{
}

MyEntry コントロールは .NET Standard ライブラリプロジェクトに作成されます。これは、単純に Entry コントロールです。コントロールのカスタマイズはカスタムレンダラーで実行されるため、MyEntry コントロールに追加の実装は必要ありません。

カスタムコントロールの使用

MyEntry コントロールは、その場所の名前空間を宣言し、コントロール要素上で名前空間プレフィックスを使用することで .NET Standard ライブラリプロジェクトの XAML で参照することができます。次のコード例は、XAML ページでどのように MyEntry コントロールを使用できるかを示しています。

<ContentPage ...
    xmlns:local="clr-namespace:CustomRenderer;assembly=CustomRenderer"
    ...>
    ...
    <local:MyEntry Text="In Shared Code" />
    ...
</ContentPage>

local 名前空間プレフィックスには任意の名前を付けることができます。ただし、clr-namespace と assembly の値は、カスタムコントロールの詳細と一致させる必要があります。名前空間が宣言されると、プレフィックスを使用してカスタムコントロールが参照されます。

次のコード例は、C# ページでどのように MyEntry コントロールを使用できるかを示しています。

public class MainPage : ContentPage
{
  public MainPage ()
  {
    Content = new StackLayout {
      Children = {
        new Label {
          Text = "Hello, Custom Renderer !",
        },
        new MyEntry {
          Text = "In Shared Code",
        }
      },
      VerticalOptions = LayoutOptions.CenterAndExpand,
      HorizontalOptions = LayoutOptions.CenterAndExpand,
    };
  }
}

このコードは、ページ上で垂直および水平の両方向に対して中央に配置される Label と MyEntry コントロールを表示する新しい ContentPage オブジェクトをインスタンス化します。

これで、カスタムレンダラーを各アプリケーションプロジェクトに追加して、各プラットフォーム上でコントロールの外観をカスタマイズできるようになります。

各プラットフォームでのカスタムレンダラーの作成

カスタムレンダラークラスを作成するプロセスは次のとおりです。

ネイティブコントロールをレンダリングする EntryRenderer クラスのサブクラスを作成します。
ネイティブコントロールをレンダリングする OnElementChanged メソッドをオーバーライドして、ロジックを書き込み、コントロールをカスタマイズします。対応する Xamarin.Forms コントロールが作成されると、このメソッドが呼び出されます。
ExportRenderer 属性をカスタムレンダラークラスに追加して、Xamarin.Forms コントロールのレンダリングに使用されるように指定します。この属性は、Xamarin.Forms にカスタムレンダラーを登録するために使用されます。

Note

プラットフォームプロジェクトごとにカスタムレンダラーを指定するかどうかは任意です。カスタムレンダラーが登録されていない場合は、コントロールの基底クラスの既定のレンダラーが使用されます。

次の図に、サンプルアプリケーション内の各プロジェクトの役割と、それらの関係を示します。

MyEntry Custom Renderer Project Responsibilities

MyEntry コントロールはプラットフォーム固有の MyEntryRenderer クラスによってレンダリングされます。このクラスはすべて各プラットフォームの EntryRenderer クラスから派生しています。この結果、次のスクリーンショットに示すように、プラットフォーム固有の背景色を使用してそれぞれの MyEntry コントロールがレンダリングされます。

MyEntry Control on each Platform

EntryRenderer クラスは OnElementChanged メソッドを公開します。このメソッドは、該当するネイティブコントロールをレンダリングするために、Xamarin.Forms コントロールの作成時に呼び出されます。このメソッドは、OldElement および NewElement プロパティを含む ElementChangedEventArgs パラメーターを取得します。これらのプロパティは、レンダラーがアタッチされていたXamarin.Forms 要素と、レンダラーが現在アタッチされているXamarin.Forms 要素をそれぞれ表しています。サンプルアプリケーションでは、OldElement プロパティが null になり、NewElement プロパティに MyEntry コントロールへの参照が含まれます。

MyEntryRenderer クラスの OnElementChanged メソッドのオーバーライドされたバージョンで、ネイティブコントロールのカスタマイズが実行されます。プラットフォーム上で使用されているネイティブコントロールへの型指定された参照には、Control プロパティを使用してアクセスすることができます。さらに、サンプルアプリケーションでは使用されていませんが、レンダリングされている Xamarin.Forms コントロールへの参照は、Element プロパティを使用して取得することができます。

各カスタムレンダラークラスは、レンダラーを Xamarin.Forms に登録する ExportRenderer 属性で修飾されます。この属性は、レンダリングされている Xamarin.Forms コントロールの型名と、カスタムレンダラーの型名という 2 つのパラメーターを受け取ります。属性の assembly プレフィックスにより、属性がアセンブリ全体に適用されることが指定されます。

次のセクションで、各プラットフォーム固有の MyEntryRenderer カスタムレンダラークラスの実装について説明します。

iOS 上でのカスタムレンダラーの作成

次のコード例は、iOS プラットフォーム用のカスタムレンダラーを示します。

using Xamarin.Forms.Platform.iOS;

[assembly: ExportRenderer (typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.iOS
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged (e);

            if (Control != null) {
                // do whatever you want to the UITextField here!
                Control.BackgroundColor = UIColor.FromRGB (204, 153, 255);
                Control.BorderStyle = UITextBorderStyle.Line;
            }
        }
    }
}

基底クラスの OnElementChanged メソッドの呼び出しにより、レンダラーの Control プロパティに割り当てられているコントロールを参照して、iOS の UITextField コントロールがインスタンス化されます。これで、UIColor.FromRGB メソッドを使用して背景色が薄い紫に設定されます。

Android 上でのカスタムレンダラーの作成

次のコード例は、Android プラットフォーム用のカスタムレンダラーを示します。

using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.Android
{
    class MyEntryRenderer : EntryRenderer
    {
        public MyEntryRenderer(Context context) : base(context)
        {
        }

        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.SetBackgroundColor(global::Android.Graphics.Color.LightGreen);
            }
        }
    }
}

基底クラスの OnElementChanged メソッドの呼び出しにより、レンダラーの Control プロパティに割り当てられているコントロールを参照して、Android の EditText コントロールがインスタンス化されます。これで、Control.SetBackgroundColor メソッドを使用して背景色が薄い緑に設定されます。

UWP 上でのカスタムレンダラーの作成

次のコード例は、UWP 用のカスタムレンダラーを示します。

[assembly: ExportRenderer(typeof(MyEntry), typeof(MyEntryRenderer))]
namespace CustomRenderer.UWP
{
    public class MyEntryRenderer : EntryRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                Control.Background = new SolidColorBrush(Colors.Cyan);
            }
        }
    }
}

基底クラスの OnElementChanged メソッドの呼び出しにより、レンダラーの Control プロパティに割り当てられているコントロールを参照して、TextBox コントロールがインスタンス化されます。これで、SolidColorBrush インスタンスが作成され、背景色がシアンに設定されます。

まとめ

この記事では、Xamarin.Forms の Entry コントロール用のカスタムコントロールレンダラーを作成する方法を示しました。これにより、開発者は既定のネイティブレンダリングを、各自のプラットフォーム固有のレンダリングでオーバーライドできるようになります。カスタムレンダラーにより、Xamarin.Forms コントロールの外観をカスタマイズするための強力な方法が提供されます。それらは、スタイルに関する小さな変更や、洗練されたプラットフォーム固有のレイアウトおよびビヘイビアーのカスタマイズのために使用できます。

CustomRendererEntry (サンプル)

エントリのカスタマイズ

カスタムの Enrty コントロールの作成

カスタム コントロールの使用

各プラットフォームでのカスタム レンダラーの作成

iOS 上でのカスタム レンダラーの作成

Android 上でのカスタム レンダラーの作成

UWP 上でのカスタム レンダラーの作成

まとめ

関連リンク

その他のリソース

カスタムコントロールの使用

各プラットフォームでのカスタムレンダラーの作成

iOS 上でのカスタムレンダラーの作成

Android 上でのカスタムレンダラーの作成

UWP 上でのカスタムレンダラーの作成