第二十七章:自定义渲染器(三)-阿里云开发者社区

开发者社区> 开发与运维> 正文

第二十七章:自定义渲染器(三)

简介: 渲染器和属性(1) Xamarin.Forms包含一个BoxView元素,用于显示矩形颜色块。 你有没有希望你有类似的东西画一个圆圈,或使它更通用,椭圆?这就是EllipseView的目的。 但是,因为您可能希望在多个应用程序中使用EllipseView,所以它在第20章“异步和文件I / O”中介绍的Xamarin.FormsBook.Platform库中实现。

渲染器和属性(1)

Xamarin.Forms包含一个BoxView元素,用于显示矩形颜色块。 你有没有希望你有类似的东西画一个圆圈,或使它更通用,椭圆?
这就是EllipseView的目的。 但是,因为您可能希望在多个应用程序中使用EllipseView,所以它在第20章“异步和文件I / O”中介绍的Xamarin.FormsBook.Platform库中实现。
BoxView自己定义了一个属性 - Color类型的Color属性 - EllipseView也可以这样做。 它不需要属性来设置椭圆的宽度和高度,因为它从VisualElement继承WidthRequest和HeightRequest。
所以这里是Xamarin.FormsBook.Platform库项目中定义的EllipseView:

namespace Xamarin.FormsBook.Platform
{
    public class EllipseView : View
    {
        public static readonly BindableProperty ColorProperty =
            BindableProperty.Create(
                "Color",
                typeof(Color),
                typeof(EllipseView),
                Color.Default);
        public Color Color
        {
            set { SetValue(ColorProperty, value); }
            get { return (Color)GetValue(ColorProperty); }
        }
        protected override SizeRequest OnSizeRequest(double widthConstraint,
                                                     double heightConstraint)
        {
            return new SizeRequest(new Size(40, 40));
        }
    }
}

Color属性只涉及可绑定属性的基本定义,没有propertychanged处理程序。属性已定义,但似乎没有做任何事情。不知何故,EllipseView中定义的Color属性必须与渲染器渲染的对象上的属性相关联。
EllipseView中唯一的其他代码是OnSizeRequest的覆盖,用于设置椭圆的默认大小,与BoxView相同。
让我们从Windows平台开始吧。事实证明,EllipseView的Windows渲染器比iOS和Android渲染器更简单。
您可能还记得,第20章中创建的Xamarin.FormsBook.Platform解决方案具有允许在各种Windows平台之间共享代码的工具:Xamarin.FormsBook.Platform.UWP库,Xamarin.FormsBook.Platform.Windows库,和Xamarin.FormsBook.Platform.WinPhone库都引用了Xamarin.FormsBook.Platform.WinRT库,它根本不是一个库,而是一个共享项目。这个共享项目是所有Windows平台的EllipseViewRenderer类可以驻留的位置。
在Windows平台上,EllipseView可以由Windows.UI.Xaml.Shapes命名空间中名为Ellipse的强制Windows元素呈现,因为Ellipse满足从Windows.UI.Xaml.FrameworkElement派生的条件。
Ellipse被指定为ViewRenderer类的第二个泛型参数。由于此文件由所有Windows平台共享,因此需要一些预处理指令来包含ExportRendererAttribute和ViewRenderer类的正确名称空间:

using System.ComponentModel;
using Windows.UI.Xaml.Media;
using Windows.UI.Xaml.Shapes;
#if WINDOWS_UWP
using Xamarin.Forms.Platform.UWP;
#else
using Xamarin.Forms.Platform.WinRT;
#endif
[assembly: ExportRenderer(typeof(Xamarin.FormsBook.Platform.EllipseView), 
                          typeof(Xamarin.FormsBook.Platform.WinRT.EllipseViewRenderer))]
namespace Xamarin.FormsBook.Platform.WinRT
{
    public class EllipseViewRenderer : ViewRenderer<EllipseView, Ellipse>
    {
        protected override void OnElementChanged(ElementChangedEventArgs<EllipseView> args)
        {
            base.OnElementChanged(args);
            if (Control == null)
            {
                SetNativeControl(new Ellipse());
            }
            if (args.NewElement != null)
            {
                SetColor();
            }
        }
        __
    }
}

正如您现在所期望的那样,OnElementChanged覆盖首先检查Control属性是否为null,如果是,则创建本机对象,在本例中为Ellipse,并将其传递给SetNativeControl。 此后,Control属性设置为此Ellipse对象。
此OnElementChanged重写还包含一些涉及ElementChangedEventArgs参数的附加代码。 这需要一点解释:
每个渲染器实例在此示例中,此EllipseViewRenderer类的实例包含本机对象的单个实例,在此示例中为Ellipse。
但是,渲染基础结构具有将渲染器实例附加到Xamarin.Forms元素并将其分离并将另一个Xamarin.Forms元素附加到同一渲染器的功能。 也许Xamarin.Forms需要重新创建元素或替换另一个元素,以准备与渲染器关联的元素。
通过调用OnElementChanged将此类更改传递给渲染器。 ElementChangedEventArgs参数包括两个属性,OldElement和NewElement,两者都是ElementChangedEventArgs的泛型参数中指示的类型,在本例中为EllipseView。在许多情况下,您不必担心从单个渲染器实例附加和分离的不同Xamarin.Forms元素。但在某些情况下,您可能希望利用此机会清理或释放渲染器使用的某些资源。
在最简单和最常见的情况下,每个渲染器实例将为使用该渲染器的Xamarin.Forms视图调用OnElementChanged。您将使用对OnElementChanged的调用来创建本机元素并将其传递给SetNativeControl,如您所见。在调用SetNativeControl之后,ViewRenderer定义的Control属性是本机对象,在本例中是Ellipse。
在您调用OnElementChanged时,可能已经创建了Xamarin.Forms对象(在本例中为EllipseView),并且可能还设置了一些属性。 (换句话说,在渲染器需要显示元素时,可能会使用一些属性设置初始化该元素。)但系统的设计使其不一定如此。随后对OnElementChanged的调用可能表明已创建了EllipseView。
重要的是事件参数的NewElement属性。 如果该属性不为null(这是正常情况),则该属性是Xamarin.Forms元素,您应该将该Xamarin.Forms元素的属性设置传输到本机对象。 这是调用上面显示的SetColor方法的目的。 你很快就会看到那种方法的主体。
ViewRenderer定义了一个名为Element的属性,它将其设置为Xamarin.Forms元素,在本例中为EllipseView。 如果最近对OnElementChanged的调用包含非null的NewElement属性,则Element是同一个对象。
总之,这些是您可以在整个渲染器类中使用的两个基本属性:

  • Element - Xamarin.Forms元素,如果最近的OnElementChanged调用具有非null的NewElement属性,则该元素有效。
  • Control-本机视图,窗口小部件或控件对象,在调用SetNativeView后有效。

如您所知,Xamarin.Forms元素的属性可以更改。 例如,EllipseView的Color属性可能是动画的。 如果Color等属性由可绑定属性支持,则对该属性的任何更改都会导致触发PropertyChanged事件。
还会向渲染器通知该属性更改。 附加到渲染器的Xamarin.Forms元素中对可绑定属性的任何更改也会导致在ViewRenderer类中调用受保护的虚拟OnElementPropertyChanged方法。 在此特定示例中,对EllipseView中任何可绑定属性的任何更改(包括Color属性)都会生成对OnElementPropertyChanged的调用。 您的渲染器应覆盖该方法并检查哪个属性已更改:

namespace Xamarin.FormsBook.Platform.WinRT
{
    public class EllipseViewRenderer : ViewRenderer<EllipseView, Ellipse>
    {
        __
        protected override void OnElementPropertyChanged(object sender,
        PropertyChangedEventArgs args)
        {
            base.OnElementPropertyChanged(sender, args);
            if (args.PropertyName == EllipseView.ColorProperty.PropertyName)
            {
                SetColor();
            }
        }
        __
    }
}

如果Color属性已更改,则事件参数的PropertyName属性为“Color”,即创建EllipseView.ColorProperty可绑定属性时指定的文本名称。但为了避免拼写错误的名称,OnElementPropertyChanged方法检查可绑定属性中的实际字符串值。渲染器必须通过将Color属性的新设置传输到本机对象(在本例中为Windows Ellipse对象)来进行响应。
仅从两个位置调用此SetColor方法 - OnElementChanged覆盖和OnElementPropertyChanged覆盖。在假设在调用OnElementChanged之前属性没有更改的情况下,不要认为您可以跳过OnElementChanged中的调用。通常情况下,在使用属性设置初始化元素后调用OnElementChanged。
但是,SetColor可以对Xamarin.Forms元素和本机控件的存在做出一些有效的假设:当从OnElementChanged调用SetColor时,已创建本机控件且NewElement为非null。这意味着Control和Element属性都是有效的。调用OnElementPropertyChanged时,Element属性也有效,因为这是刚刚更改其属性的对象。
这意味着SetColor方法可以简单地将颜色从Element(Xamarin.Forms元素)传输到Control(本机对象)。为了避免名称空间冲突,此SetColor方法完全限定对名为Color的任何结构的所有引用:

namespace Xamarin.FormsBook.Platform.WinRT
{
    public class EllipseViewRenderer : ViewRenderer<EllipseView, Ellipse>
    {

        void SetColor()
        {
            if (Element.Color == Xamarin.Forms.Color.Default)
            {
                Control.Fill = null;
            }
            else
            {
                Xamarin.Forms.Color color = Element.Color;
                global::Windows.UI.Color winColor =
                global::Windows.UI.Color.FromArgb((byte)(color.A * 255),
                                                  (byte)(color.R * 255),
                                                  (byte)(color.G * 255),
                                                  (byte)(color.B * 255));
                Control.Fill = new SolidColorBrush(winColor);
            }
        }
    }
}

Windows Ellipse对象具有名为Fill的属性Brush属性。 默认情况下,此属性为null,如果EllipseView的Color属性为Color.Default,则SetColor方法将其设置为null。 否则,必须将Xamarin.Forms Color转换为Windows Color,然后将其传递给SolidColorBrush构造函数。 SolidColorBrush对象设置为Ellipse的Fill属性。
这是Windows版本,但是当需要为EllipseView创建iOS和Android渲染器时,您可能会感到有些不安。 这里再次是ViewRenderer的第二个泛型参数的约束:

  • iOS:TNativeView受限于UIKit.UIView
  • Android:TNativeView仅限于Android.View.Views
  • Windows:TNativeElement仅限于Windows.UI.Xaml.FrameworkElement

这意味着要为iOS制作EllipseView渲染器,您需要一个显示椭圆的UIView衍生物。 这样的事情存在吗? 不,不是的。 因此,你必须自己制作一个。 这是制作iOS渲染器的第一步。
出于这个原因,Xamarin.FormsBook.Platform.iOS库包含一个名为EllipseUIView的类,它从UIView派生,其唯一目的是绘制一个椭圆:

using CoreGraphics;
using UIKit;
namespace Xamarin.FormsBook.Platform.iOS
{
    public class EllipseUIView : UIView
    {
        UIColor color = UIColor.Clear;
        public EllipseUIView()
        {
            BackgroundColor = UIColor.Clear;
        }
        public override void Draw(CGRect rect)
        {
            base.Draw(rect);
            using (CGContext graphics = UIGraphics.GetCurrentContext())
            {
                //Create ellipse geometry based on rect field.
                CGPath path = new CGPath();
                path.AddEllipseInRect(rect);
                path.CloseSubpath();
                //Add geometry to graphics context and draw it.
                color.SetFill();
                graphics.AddPath(path);
                graphics.DrawPath(CGPathDrawingMode.Fill);
            }
        }
        public void SetColor(UIColor color)
        {
            this.color = color;
            SetNeedsDisplay();
        }
    }
}

该类重写OnDraw方法以创建椭圆的图形路径,然后在图形上下文中绘制它。 它使用的颜色存储为一个字段,最初设置为UIColor.Clear,它是透明的。 但是,您会注意到底部的SetColor方法。 这为类提供了新的颜色,然后调用SetNeedsDisplay,它使绘图表面无效并生成对OnDraw的另一个调用。
另请注意,UIView的BackgroundColor在UIColor.Clear的构造函数中设置。 如果没有该设置,视图在椭圆未覆盖的区域中具有黑色背景。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章