Xamarin.Forms Custom Renderer介紹

Xamarin.Forms 開發(fā)過程中需要平臺特殊定制時可以同過Custom Renderer實現(xiàn)。定義自己的Custom Renderer應(yīng)繼承ViewRenderer類,ViewRenderer是一個泛型類。ViewRenderer單獨定義在不同平臺中,Android平臺在Xamarin.Forms.Platform.Android下,iOS平臺在Xamarin.Forms.Platform.iOS下。ViewRenderer包含的兩個范型參數(shù)TViewTNativeView(UWP下為TElement和TNativeElement),TView對應(yīng)的是Xamarin.Forms中定義的視圖元素,TNativeView則對應(yīng)的是平臺中定義的視圖元素。

通過Renderer自定義Label

借助Renderer實現(xiàn)下帶劃線、刪除線的Label。

Custom Renderer學(xué)習(xí)更多實例參靠:https://github.com/XLabs/Xamarin-Forms-Labs


在PCL項目中添加CustomLabel定義,如下:

public class CustomLabel:Label
{
    public CustomLabel()
    {
    }

    public static readonly BindableProperty IsUnderlineProperty =
        BindableProperty.Create("IsUnderline",typeof(bool), typeof(CustomLabel), false);

    public static readonly BindableProperty IsStrikeThroughProperty = 
        BindableProperty.Create("IsStrikeThrough", typeof(bool), typeof(CustomLabel), false);

    public bool IsUnderline
    {
        get
        {
            return (bool)GetValue(IsUnderlineProperty);
        }
        set
        {
            SetValue(IsUnderlineProperty, value);
        }
    }

    public bool IsStrikeThrough
    {
        get
        {
            return (bool)GetValue(IsStrikeThroughProperty);
        }
        set
        {
            SetValue(IsStrikeThroughProperty, value);
        }
    }
}

接下來就是在相應(yīng)的平臺定義Renderer。一定要為定義好的Renderer添加ExportRenderer特性,ExportRenderer同Dependency特性一樣是程序集特性,需要標(biāo)記在命名空間塊之外。

When a Xamarin.Forms application starts up, Xamarin.Forms uses .NET reflection to search through the various assemblies that comprise the application, looking for assembly attributes named ExportRenderer. An ExportRenderer attribute indicates the presence of a custom renderer that can supply support for a Xamarin.Forms element.

本文示例會有如下特性定義在namespace上:

[assembly: ExportRenderer(typeof(renderer.CustomLabel), typeof(renderer.iOS.CustomLabelRenderer))]

繼承ViewRenderer的同時一定要重寫OnElementChanged方法。該方法的作用是創(chuàng)建平臺視圖元素,會在CustomLabel初始化時調(diào)用。ViewRenderer定義了一個TNativeView類型屬性Control,本示例中為UILabel。OnElementChanged第一次調(diào)用時Control屬性為null,應(yīng)該在OnElementChanged中初始化一個TNativeView元素,通過SetNativeControl方法賦值給Control屬性。每一個Renderer實例都管理著一個平臺視圖對象(native object)即Control屬性。

ViewRenderer還定義了一個Element屬性,Element是我們定義的Xamarin.Forms元素,本示例中為CustomLabel類型。

OnElementChanged方法傳入一個ElementChangedEventArgs范型參數(shù),ElementChangedEventArgs<T>有兩個OldElementNewElement屬性,類型由ElementChangedEventArgs傳入的T決定。如果NewElement不為null,NewElement與ViewRenderer的Element屬性表示同一對象,根據(jù)NewElement的屬性,為Control(Natice)設(shè)置相應(yīng)屬性。而OldElement屬性通常用作回收資源。

if (e.OldElement != null) {
    // Unsubscribe from event handlers and cleanup any resources
}

if (e.NewElement != null) {
    // Configure the native control and subscribe to event handlers
}

Android 自定義Renderer中OnElementChanged方法

CustomLabel中屬性定義為BindableProperty類型,當(dāng)BindableProperty類型屬性改變時會觸發(fā)PropertyChanged事件。Renderer對象同樣會接收到BindableProperty發(fā)生改變的通知調(diào)用OnElementPropertyChanged方法。在OnElementPropertyChanged方法中判斷e.PropertyName的值,為Control對應(yīng)的原生視圖元素設(shè)置相應(yīng)屬性。

根據(jù)以上介紹寫出Android下自定義Renderer:

[assembly: ExportRenderer(typeof(renderer.CustomLabel), typeof(renderer.Droid.CustomLabelRenderer))]
namespace renderer.Droid
{
    public class CustomLabelRenderer : ViewRenderer<CustomLabel, TextView>
    {
        public CustomLabelRenderer()
        {
        }

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

            if (Control == null)
            {
                SetNativeControl(new TextView(Context));
            }

            if (e.NewElement != null)
            {
                Control.Text = e.NewElement.Text;

                if (e.NewElement.IsUnderline)
                {
                    Control.PaintFlags = Control.PaintFlags | PaintFlags.UnderlineText;
                }

                if (e.NewElement.IsStrikeThrough)
                {
                    Control.PaintFlags = Control.PaintFlags | PaintFlags.StrikeThruText;
                }
            }


        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == CustomLabel.IsUnderlineProperty.PropertyName)
            {
                Control.PaintFlags = Control.PaintFlags | PaintFlags.UnderlineText;
            }
            else if (e.PropertyName == CustomLabel.IsStrikeThroughProperty.PropertyName)
            {
                Control.PaintFlags = Control.PaintFlags | PaintFlags.StrikeThruText;
            }
            else if (e.PropertyName == CustomLabel.TextProperty.PropertyName)
            {
                Control.Text = Element.Text;
            }
        }

    }
}

iOS同理Android不再過多說明。iOS項目中自定義Renderer:

[assembly: ExportRenderer(typeof(renderer.CustomLabel), typeof(renderer.iOS.CustomLabelRenderer))]
namespace renderer.iOS
{
    public class CustomLabelRenderer : ViewRenderer<CustomLabel, UILabel>
    {
        public CustomLabelRenderer()
        {
        }


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

            if (Control == null)
            {
                SetNativeControl(new UILabel());
            }

            if (e.NewElement != null)
            {
                InitView(e.NewElement);
            }

        }

        protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
        {
            base.OnElementPropertyChanged(sender, e);
            if (e.PropertyName == CustomLabel.IsUnderlineProperty.PropertyName ||
                e.PropertyName == CustomLabel.IsStrikeThroughProperty.PropertyName ||
                e.PropertyName == CustomLabel.TextProperty.PropertyName)
            {
                InitView(Element);
            }

        }

        private void InitView(CustomLabel element)
        {
            var underline = element.IsUnderline ? NSUnderlineStyle.Single : NSUnderlineStyle.None;
            var strikethrough = element.IsStrikeThrough ? NSUnderlineStyle.Single : NSUnderlineStyle.None;

            Control.AttributedText = new NSMutableAttributedString(element.Text,
            Control.Font,
            underlineStyle: underline,
            strikethroughStyle: strikethrough);
        }
    }
}

XAML測試代碼,CustomLabel定義在項目內(nèi),所以直接用上文定義好的local命名空間:

Android 和iOS的運行效果:

原本iOS和Android中很容易實現(xiàn)的功能,再Xamarin.Forms中卻變得有些復(fù)雜。。。。。,考慮開發(fā)成本和維護成本,這點痛算什么!三方庫支持完善起來時Xamarin.Forms開發(fā)應(yīng)該會比較樂觀吧。


Xamarin.Forms中的每個視圖(page, layout, view)都對應(yīng)一個原生視圖渲染,我們自定義時可以直接使用Xamarin.Forms提供的Renderer類。
對應(yīng)關(guān)系查看:https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/renderers/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容