Xamarin.Forms Custom Renderer介紹

Xamarin.Forms 開發(fā)過程中需要平臺特殊定制時可以同過Custom Renderer實現(xiàn)拍柒。定義自己的Custom Renderer應(yīng)繼承ViewRenderer類,ViewRenderer是一個泛型類借嗽。ViewRenderer單獨(dú)定義在不同平臺中柴底,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的運(yùn)行效果:

原本iOS和Android中很容易實現(xiàn)的功能救鲤,再Xamarin.Forms中卻變得有些復(fù)雜久窟。。本缠。斥扛。。,考慮開發(fā)成本和維護(hù)成本丹锹,這點痛算什么稀颁!三方庫支持完善起來時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)系作者
  • 序言:七十年代末麸折,一起剝皮案震驚了整個濱河市锡凝,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌垢啼,老刑警劉巖窜锯,帶你破解...
    沈念sama閱讀 216,591評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異芭析,居然都是意外死亡锚扎,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,448評論 3 392
  • 文/潘曉璐 我一進(jìn)店門馁启,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驾孔,“玉大人,你說我怎么就攤上這事惯疙〈涿悖” “怎么了?”我有些...
    開封第一講書人閱讀 162,823評論 0 353
  • 文/不壞的土叔 我叫張陵霉颠,是天一觀的道長对碌。 經(jīng)常有香客問我,道長蒿偎,這世上最難降的妖魔是什么朽们? 我笑而不...
    開封第一講書人閱讀 58,204評論 1 292
  • 正文 為了忘掉前任怀读,我火速辦了婚禮,結(jié)果婚禮上骑脱,老公的妹妹穿的比我還像新娘菜枷。我一直安慰自己,他們只是感情好叁丧,可當(dāng)我...
    茶點故事閱讀 67,228評論 6 388
  • 文/花漫 我一把揭開白布犁跪。 她就那樣靜靜地躺著,像睡著了一般歹袁。 火紅的嫁衣襯著肌膚如雪坷衍。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,190評論 1 299
  • 那天条舔,我揣著相機(jī)與錄音枫耳,去河邊找鬼。 笑死孟抗,一個胖子當(dāng)著我的面吹牛迁杨,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播凄硼,決...
    沈念sama閱讀 40,078評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼铅协,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了摊沉?” 一聲冷哼從身側(cè)響起狐史,我...
    開封第一講書人閱讀 38,923評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎说墨,沒想到半個月后骏全,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,334評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡尼斧,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,550評論 2 333
  • 正文 我和宋清朗相戀三年姜贡,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片棺棵。...
    茶點故事閱讀 39,727評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡楼咳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出烛恤,到底是詐尸還是另有隱情母怜,我是刑警寧澤,帶...
    沈念sama閱讀 35,428評論 5 343
  • 正文 年R本政府宣布棒动,位于F島的核電站糙申,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜柜裸,卻給世界環(huán)境...
    茶點故事閱讀 41,022評論 3 326
  • 文/蒙蒙 一缕陕、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧疙挺,春花似錦扛邑、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,672評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至搀暑,卻和暖如春沥阳,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背自点。 一陣腳步聲響...
    開封第一講書人閱讀 32,826評論 1 269
  • 我被黑心中介騙來泰國打工桐罕, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人桂敛。 一個月前我還...
    沈念sama閱讀 47,734評論 2 368
  • 正文 我出身青樓功炮,卻偏偏與公主長得像,于是被迫代替她去往敵國和親术唬。 傳聞我的和親對象是個殘疾皇子薪伏,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,619評論 2 354

推薦閱讀更多精彩內(nèi)容