Xamarin.Forms Custom Renderer介绍

Xamarin.Forms 开发过程中需要平台特殊定制时可以同过Custom Renderer实现。定义自己的Custom Renderer应继承ViewRenderer类,ViewRenderer是一个泛型类。ViewRenderer单独定义在不同平台中,Android平台在Xamarin.Forms.Platform.Android下,iOS平台在Xamarin.Forms.Platform.iOS下。ViewRenderer包含的两个范型参数TViewTNativeView(UWP下为TElement和TNativeElement),TView对应的是Xamarin.Forms中定义的视图元素,TNativeView则对应的是平台中定义的视图元素。

通过Renderer自定义Label

借助Renderer实现下带划线、删除线的Label。

Custom Renderer学习更多实例参靠: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);
        }
    }
}

接下来就是在相应的平台定义Renderer。一定要为定义好的Renderer添加ExportRenderer特性,ExportRenderer同Dependency特性一样是程序集特性,需要标记在命名空间块之外。

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方法。该方法的作用是创建平台视图元素,会在CustomLabel初始化时调用。ViewRenderer定义了一个TNativeView类型属性Control,本示例中为UILabel。OnElementChanged第一次调用时Control属性为null,应该在OnElementChanged中初始化一个TNativeView元素,通过SetNativeControl方法赋值给Control属性。每一个Renderer实例都管理着一个平台视图对象(native object)即Control属性。

ViewRenderer还定义了一个Element属性,Element是我们定义的Xamarin.Forms元素,本示例中为CustomLabel类型。

OnElementChanged方法传入一个ElementChangedEventArgs范型参数,ElementChangedEventArgs<T>有两个OldElementNewElement属性,类型由ElementChangedEventArgs传入的T决定。如果NewElement不为null,NewElement与ViewRenderer的Element属性表示同一对象,根据NewElement的属性,为Control(Natice)设置相应属性。而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类型,当BindableProperty类型属性改变时会触发PropertyChanged事件。Renderer对象同样会接收到BindableProperty发生改变的通知调用OnElementPropertyChanged方法。在OnElementPropertyChanged方法中判断e.PropertyName的值,为Control对应的原生视图元素设置相应属性。

根据以上介绍写出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定义在项目内,所以直接用上文定义好的local命名空间:

Android 和iOS的运行效果:

原本iOS和Android中很容易实现的功能,再Xamarin.Forms中却变得有些复杂。。。。。,考虑开发成本和维护成本,这点痛算什么!三方库支持完善起来时Xamarin.Forms开发应该会比较乐观吧。


Xamarin.Forms中的每个视图(page, layout, view)都对应一个原生视图渲染,我们自定义时可以直接使用Xamarin.Forms提供的Renderer类。
对应关系查看:https://developer.xamarin.com/guides/xamarin-forms/custom-renderer/renderers/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容