요약 - 27장. 사용자 지정 렌더러

  • 아티클

Download Sample 샘플 다운로드

참고 항목

이 책은 2016년 봄에 출간되었으며, 그 후로 업데이트되지 않았습니다. 이 책의 많은 내용이 지금까지도 무척 유용하나, 일부 내용은 오래되었고 올바르지 않거나 완전하지 않은 주제도 있습니다.

Button와 같은 Xamarin.Forms 요소는 ButtonRenderer라는 클래스에 캡슐화된 플랫폼별 단추로 렌더링됩니다. ButtonRenderer의 iOS 버전, ButtonRenderer의 Android 버전 및 ButtonRenderer의 UWP 버전이 있습니다.

이 장에서는 고유한 렌더러를 작성하여 플랫폼별 개체에 매핑되는 사용자 지정 보기를 만드는 방법을 설명합니다.

전체 클래스 계층 구조

Xamarin.Forms 플랫폼별 코드를 포함하는 4개의 어셈블리가 있습니다. 다음 링크를 사용하여 GitHub에서 원본을 볼 수 있습니다.

참고 항목

이 책에 언급된 WinRT 어셈블리는 더 이상 이 솔루션에 포함되지 않습니다.

PlatformClassHierarchy 샘플은 실행 중인 플랫폼에 유효한 어셈블리에 대한 클래스 계층 구조를 표시합니다.

ViewRenderer라는 중요한 클래스를 확인할 수 있습니다. 이는 플랫폼별 렌더러를 만들 때 파생되는 클래스입니다. 대상 플랫폼의 뷰 시스템에 연결되어 있기 때문에 세 가지 버전으로 존재합니다.

iOS ViewRenderer<TView, TNativeView>에는 다음과 같은 제네릭 인수가 있습니다.

Android ViewRenderer<TView, TNativeView>에는 다음과 같은 제네릭 인수가 있습니다.

UWP ViewRenderer<TElement, TNativeElement>에는 서로 다르게 명명된 제네릭 인수가 있습니다.

렌더러를 작성할 때는 View에서 클래스를 파생한 후 지원되는 각 플랫폼당 하나씩 여러 개의 ViewRenderer 클래스를 작성합니다. 각 플랫폼별 구현은 TNativeView 또는 TNativeElement 매개 변수로 지정하는 형식에서 파생되는 네이티브 클래스를 참조합니다.

Hello, 사용자 지정 렌더러!

HelloRenderers 프로그램은 App 클래스의 HelloView라는 사용자 지정 뷰를 참조합니다.

HelloView 클래스는 HelloRenderers 프로젝트에 포함되며 View에서 간단히 파생됩니다.

HelloRenderers.iOS 프로젝트의 HelloViewRenderer 클래스는 ViewRenderer<HelloView, UILabel>에서 파생됩니다. OnElementChanged 재정의에서는 네이티브 iOS UILabel을 만들고 SetNativeControl을 호출합니다.

HelloRenderers.Droid 프로젝트의 HelloViewRenderer 클래스는 ViewRenderer<HelloView, TextView>에서 파생됩니다. OnElementChanged 재정의에서는 Android TextView를 만들고 SetNativeControl을 호출합니다.

HelloRenderers.UWP 및 기타 Windows 프로젝트의 HelloViewRenderer 클래스는 ViewRenderer<HelloView, TextBlock>에서 파생됩니다. OnElementChanged 재정의에서는 Windows TextBlock을 만들고 SetNativeControl을 호출합니다.

모든 ViewRenderer 파생 항목에는 HelloView 클래스를 특정 HelloViewRenderer 클래스와 연결하는 어셈블리 수준에 대한 ExportRenderer 특성이 포함되어 있습니다. 이는 Xamarin.Forms가 개별 플랫폼 프로젝트에서 렌더러를 찾는 방법입니다.

Triple screenshot of Hello View

렌더러 및 속성

다음 렌더러 세트는 타원 그리기를 구현하며, Xamarin.FormsBook.Platform 솔루션의 다양한 프로젝트에 있습니다.

EllipseView 클래스는 Xamarin.FormsBook.Platform 플랫폼에 있습니다. 이 클래스는 BoxView와 비슷하며 Color 형식의 Color라는 단일 속성만 정의합니다.

렌더러는 렌더러의 OnElementPropertyChanged 메서드를 재정의하여 View에 설정된 속성 값을 네이티브 개체로 전송할 수 있습니다. 이 메서드(및 대부분의 렌더러) 내에서 다음 두 가지 속성을 사용할 수 있습니다.

  • Element, Xamarin.Forms 요소
  • Control, 네이티브 뷰 또는 위젯 또는 컨트롤 개체

이러한 속성의 형식은 ViewRenderer에 대한 제네릭 매개 변수에 의해 결정됩니다. 이 예에서 Element는 EllipseView 형식입니다.

따라서 OnElementPropertyChanged 재정의는 일종의 변환을 통해 Element의 Color 값을 네이티브 Control 개체로 전송할 수 있습니다. 3개의 렌더러는 다음과 같습니다.

EllipseDemo 클래스는 다음과 같은 몇 가지 EllipseView 개체를 표시합니다.

Triple screenshot of Ellipse Demo

BouncingBall은 화면 양쪽에서 EllipseView를 튕깁니다.

렌더러 및 이벤트

또한 렌더러에서 이벤트를 간접적으로 생성할 수 있습니다. StepSlider 클래스는 일반 Xamarin.FormsSlider 과 비슷하지만 값 간에 MinimumMaximum 여러 개별 단계를 지정할 수 있습니다.

3개의 렌더러는 다음과 같습니다.

렌더러는 네이티브 컨트롤의 변경 내용을 검색한 다음, StepSlider에 정의된 바인딩 가능한 속성을 참조하는 SetValueFromRenderer를 호출합니다. 이 항목이 변경되면 StepSlider가 ValueChanged 이벤트를 발생시킵니다.

StepSliderDemo 샘플에서는 이 새 슬라이더를 보여줍니다.