항목 사용자 지정Customizing an Entry

샘플 다운로드 샘플 다운로드Download Sample Download the sample

Xamarin.Forms 항목 컨트롤을 사용하면 한 줄 텍스트를 편집할 수 있습니다. 이 문서에서는 개발자가 자체적인 플랫폼별 사용자 지정을 통해 기본 네이티브 렌더링을 재정의할 수 있도록 항목 컨트롤에 대한 사용자 지정 렌더러를 만드는 방법을 보여줍니다.The Xamarin.Forms Entry control allows a single line of text to be edited. This article demonstrates how to create a custom renderer for the Entry control, enabling developers to override the default native rendering with their own platform-specific customization.

모든 Xamarin.Forms 컨트롤에는 네이티브 컨트롤의 인스턴스를 만드는 각 플랫폼에 대해 함께 제공되는 렌더러가 있습니다.Every Xamarin.Forms control has an accompanying renderer for each platform that creates an instance of a native control. Entry 컨트롤이 Xamarin.Forms 애플리케이션에 의해 렌더링되면 iOS에서 EntryRenderer 클래스가 인스턴스화되며, 차례로 네이티브 UITextField 컨트롤이 인스턴스화됩니다.When an Entry control is rendered by a Xamarin.Forms application, in iOS the EntryRenderer class is instantiated, which in turns instantiates a native UITextField control. Android 플랫폼에서 EntryRenderer 클래스는 EditText 컨트롤을 인스턴스화합니다.On the Android platform, the EntryRenderer class instantiates an EditText control. UWP(유니버설 Windows 플랫폼)에서 EntryRenderer 클래스는 TextBox 컨트롤을 인스턴스화합니다.On the Universal Windows Platform (UWP), the EntryRenderer class instantiates a TextBox control. Xamarin.Forms 컨트롤에 매핑되는 렌더러 및 네이티브 컨트롤 클래스에 대한 자세한 내용은 렌더러 기본 클래스 및 네이티브 컨트롤을 참조하세요.For more information about the renderer and native control classes that Xamarin.Forms controls map to, see Renderer Base Classes and Native Controls.

다음 다이어그램은 Entry 컨트롤 및 이를 구현하는 해당 네이티브 컨트롤 간의 관계를 보여줍니다.The following diagram illustrates the relationship between the Entry control and the corresponding native controls that implement it:

렌더링 프로세스는 각 플랫폼에서 Entry 컨트롤에 대한 사용자 지정 렌더러를 만들어 플랫폼별 사용자 지정을 구현하는 데 활용할 수 있습니다.The rendering process can be taken advantage of to implement platform-specific customizations by creating a custom renderer for the Entry control on each platform. 이 작업을 수행하는 프로세스는 다음과 같습니다.The process for doing this is as follows:

  1. Xamarin.Forms 사용자 지정 컨트롤을 만듭니다.Create a Xamarin.Forms custom control.
  2. Xamarin.Forms에서 사용자 지정 컨트롤을 사용합니다.Consume the custom control from Xamarin.Forms.
  3. 각 플랫폼의 컨트롤에 대한 사용자 지정 렌더러를 만듭니다.Create the custom renderer for the control on each platform.

이제 각 플랫폼에 서로 다른 배경색을 가진 Entry 컨트롤을 구현하기 위해 각 항목을 차례로 설명합니다.Each item will now be discussed in turn, to implement an Entry control that has a different background color on each platform.

중요

이 문서에서는 간단한 사용자 지정 렌더러를 만드는 방법을 설명합니다.This article explains how to create a simple custom renderer. 그러나 각 플랫폼에 서로 다른 배경색을 가진 Entry를 구현하기 위해 사용자 지정 렌더러를 만들 필요는 없습니다.However, it's not necessary to create a custom renderer to implement an Entry that has a different background color on each platform. 플랫폼별 값을 제공하기 위해 Device 클래스 또는 OnPlatform 태그 확장을 사용하면 더 쉽게 수행할 수 있습니다.This can be more easily accomplished by using the Device class, or the OnPlatform markup extension, to provide platform-specific values. 자세한 내용은 플랫폼별 값 제공OnPlatform 태그 확장을 참조하세요.For more information, see Providing Platform-Specific Values and OnPlatform Markup Extension.

사용자 지정 항목 컨트롤 만들기Creating the Custom Entry Control

다음 코드 예제와 같이 Entry 컨트롤을 서브클래싱하여 사용자 지정 Entry 컨트롤을 만들 수 있습니다.A custom Entry control can be created by subclassing the Entry control, as shown in the following code example:

public class MyEntry : Entry
{
}

MyEntry 컨트롤은 .NET Standard 라이브러리 프로젝트에서 만들어지며 단순히 Entry 컨트롤입니다.The MyEntry control is created in the .NET Standard library project and is simply an Entry control. 컨트롤의 사용자 지정은 사용자 지정 렌더러에서 수행되므로 MyEntry 컨트롤에서 추가 구현이 필요하지 않습니다.Customization of the control will be carried out in the custom renderer, so no additional implementation is required in the MyEntry control.

사용자 지정 컨트롤 사용Consuming the Custom Control

MyEntry 컨트롤은 해당 위치의 네임스페이스를 선언하고 컨트롤 요소의 네임스페이스 접두사를 사용하여 .NET Standard 라이브러리 프로젝트의 XAML에서 참조할 수 있습니다.The MyEntry control can be referenced in XAML in the .NET Standard library project by declaring a namespace for its location and using the namespace prefix on the control element. 다음 코드 예제에서는 MyEntry 컨트롤을 XAML 페이지에서 사용하는 방법을 보여줍니다.The following code example shows how the MyEntry control can be consumed by a XAML page:

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

local 네임스페이스 접두사는 원하는 것으로 이름을 지정할 수 있습니다.The local namespace prefix can be named anything. 그러나 clr-namespaceassembly 값은 사용자 지정 컨트롤의 세부 정보와 일치해야 합니다.However, the clr-namespace and assembly values must match the details of the custom control. 네임스페이스가 선언되면 사용자 지정 컨트롤을 참조하는 데 사용됩니다.Once the namespace is declared the prefix is used to reference the custom control.

다음 코드 예제에서는 C# 페이지에서 MyEntry 컨트롤을 사용하는 방법을 보여줍니다.The following code example shows how the MyEntry control can be consumed by a C# page:

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,
    };
  }
}

이 코드는 페이지에 가로 및 세로 모두 중앙에 있는 LabelMyEntry 컨트롤을 표시할 새 ContentPage 개체를 인스턴스화합니다.This code instantiates a new ContentPage object that will display a Label and MyEntry control centered both vertically and horizontally on the page.

이제 각 애플리케이션 프로젝트에 사용자 지정 렌더러를 추가하여 각 플랫폼에서 컨트롤의 모양을 사용자 지정할 수 있습니다.A custom renderer can now be added to each application project to customize the control's appearance on each platform.

각 플랫폼에서 사용자 지정 렌더러 만들기Creating the Custom Renderer on each Platform

사용자 지정 렌더러 클래스를 만드는 프로세스는 다음과 같습니다.The process for creating the custom renderer class is as follows:

  1. 네이티브 컨트롤을 렌더링하는 EntryRenderer 클래스의 서브클래스를 만듭니다.Create a subclass of the EntryRenderer class that renders the native control.
  2. 네이티브 컨트롤을 렌더링하고 컨트롤을 사용자 지정하기 위한 논리를 작성하는 OnElementChanged 메서드를 재정의합니다.Override the OnElementChanged method that renders the native control and write logic to customize the control. 이 메서드는 해당 Xamarin.Forms 컨트롤이 생성될 때 호출됩니다.This method is called when the corresponding Xamarin.Forms control is created.
  3. 사용자 지정 렌더러 클래스에 ExportRenderer 특성을 추가하여 Xamarin.Forms 컨트롤을 렌더링하는 데 사용하도록 지정합니다.Add an ExportRenderer attribute to the custom renderer class to specify that it will be used to render the Xamarin.Forms control. 이 특성은 사용자 지정 랜더러를 Xamarin.Forms에 등록하는 데 사용됩니다.This attribute is used to register the custom renderer with Xamarin.Forms.

참고

각 플랫폼 프로젝트에서 사용자 지정 렌더러를 제공하는 것은 선택 사항입니다.It is optional to provide a custom renderer in each platform project. 사용자 지정 렌더러가 등록되지 않은 경우 컨트롤의 기본 클래스에 대한 기본 렌더러가 사용됩니다.If a custom renderer isn't registered, then the default renderer for the control's base class will be used.

다음 다이어그램은 샘플 애플리케이션에서 각 프로젝트의 책임과 이들 간의 관계를 보여줍니다.The following diagram illustrates the responsibilities of each project in the sample application, along with the relationships between them:

MyEntry 컨트롤은 각 플랫폼의 EntryRenderer 클래스에서 모두 파생되는 플랫폼별 MyEntryRenderer 클래스에 의해 렌더링됩니다.The MyEntry control is rendered by platform-specific MyEntryRenderer classes, which all derive from the EntryRenderer class for each platform. 그러면 다음 스크린샷과 같이 각 MyEntry 컨트롤이 플랫폼별 배경색으로 렌더링됩니다.This results in each MyEntry control being rendered with a platform-specific background color, as shown in the following screenshots:

EntryRenderer 클래스는 해당 네이티브 컨트롤을 렌더링하기 위해 Xamarin.Forms 컨트롤이 생성될 때 호출되는 OnElementChanged 메서드를 노출합니다.The EntryRenderer class exposes the OnElementChanged method, which is called when the Xamarin.Forms control is created to render the corresponding native control. 이 메서드는 OldElementNewElement 속성이 포함된 ElementChangedEventArgs 매개 변수를 가져옵니다.This method takes an ElementChangedEventArgs parameter that contains OldElement and NewElement properties. 이러한 속성은 랜더러가 연결 Xamarin.Forms 요소와 렌더러가 연결되는 Xamarin.Forms 요소를 각각 나타냅니다.These properties represent the Xamarin.Forms element that the renderer was attached to, and the Xamarin.Forms element that the renderer is attached to, respectively. 샘플 애플리케이션에서 OldElement 속성은 null이고, NewElement 속성은 MyEntry 컨트롤에 대한 참조를 포함합니다.In the sample application the OldElement property will be null and the NewElement property will contain a reference to the MyEntry control.

MyEntryRenderer 클래스에서 OnElementChanged 메서드의 재정의된 버전은 네이티브 컨트롤 사용자 지정을 수행하는 위치입니다.An overridden version of the OnElementChanged method in the MyEntryRenderer class is the place to perform the native control customization. 플랫폼에서 사용되는 네이티브 컨트롤에 대한 형식화된 참조는 Control 속성을 통해 액세스할 수 있습니다.A typed reference to the native control being used on the platform can be accessed through the Control property. 또한 랜더링되는 Xamarin.Forms 컨트롤에 대한 참조는 샘플 애플리케이션에서는 사용되지 않지만 Element 속성을 통해 얻을 수 있습니다.In addition, a reference to the Xamarin.Forms control that's being rendered can be obtained through the Element property, although it's not used in the sample application.

각 사용자 지정 렌더러 클래스는 랜더러를 Xamarin.Forms에 등록하는 ExportRenderer 속성으로 데코레이트됩니다.Each custom renderer class is decorated with an ExportRenderer attribute that registers the renderer with Xamarin.Forms. 이 특성은 렌더링되는 Xamarin.Forms 컨트롤의 형식 이름과 지정 렌더러의 형식 이름이라는 두 가지 매개 변수를 사용합니다.The attribute takes two parameters – the type name of the Xamarin.Forms control being rendered, and the type name of the custom renderer. 특성의 assembly 접두사는 특성이 전체 어셈블리에 적용되도록 지정합니다.The assembly prefix to the attribute specifies that the attribute applies to the entire assembly.

다음 섹션에서는 각 플랫폼별 MyEntryRenderer 사용자 지정 렌더러 클래스의 구현을 설명합니다.The following sections discuss the implementation of each platform-specific MyEntryRenderer custom renderer class.

iOS에서 사용자 지정 렌더러 만들기Creating the Custom Renderer on iOS

다음 코드 예제에서는 iOS 플랫폼용 사용자 지정 렌더러를 보여줍니다.The following code example shows the custom renderer for the iOS platform:

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 컨트롤을 인스턴스화합니다.The call to the base class's OnElementChanged method instantiates an iOS UITextField control, with a reference to the control being assigned to the renderer's Control property. 그런 다음, 배경색은 UIColor.FromRGB 메서드를 사용하여 밝은 보라색으로 설정됩니다.The background color is then set to light purple with the UIColor.FromRGB method.

Android에서 사용자 지정 렌더러 만들기Creating the Custom Renderer on Android

다음 코드 예제에서는 Android 플랫폼용 사용자 지정 렌더러를 보여줍니다.The following code example shows the custom renderer for the Android platform:

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 컨트롤을 인스턴스화합니다.The call to the base class's OnElementChanged method instantiates an Android EditText control, with a reference to the control being assigned to the renderer's Control property. 그런 다음, 배경색은 Control.SetBackgroundColor 메서드를 사용하여 밝은 녹색으로 설정됩니다.The background color is then set to light green with the Control.SetBackgroundColor method.

UWP에서 사용자 지정 렌더러 만들기Creating the Custom Renderer on UWP

다음 코드 예제는 UWP용 사용자 지정 렌더러를 보여줍니다.The following code example shows the custom renderer for 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 컨트롤을 인스턴스화합니다.The call to the base class's OnElementChanged method instantiates a TextBox control, with a reference to the control being assigned to the renderer's Control property. 그런 다음, 배경색은 SolidColorBrush 인스턴스를 생성하여 청록색으로 설정합니다.The background color is then set to cyan by creating a SolidColorBrush instance.

요약Summary

이 문서에서는 개발자가 자체적인 플랫폼별 렌더링을 통해 기본 네이티브 렌더링을 재정의할 수 있도록 하는 Xamarin.Forms Entry 컨트롤에 대한 사용자 지정 렌더러를 만드는 방법을 보여줍니다.This article has demonstrated how to create a custom control renderer for the Xamarin.Forms Entry control, enabling developers to override the default native rendering with their own platform-specific rendering. 사용자 지정 렌더러는 Xamarin.Forms 컨트롤의 모양을 사용자 지정하는 강력한 방법을 제공합니다.Custom renderers provide a powerful approach to customizing the appearance of Xamarin.Forms controls. 작은 스타일 변경 또는 정교한 플랫폼별 레이아웃 및 동작 사용자 지정에 사용할 수 있습니다.They can be used for small styling changes or sophisticated platform-specific layout and behavior customization.