[英]Adding a border to the bottom of and Editor on Xamarin Forms for iOS
我目前在我的Xamarin表單應用程序中有輸入字段,在iOS上只有底部邊框,可以使用以下自定義渲染器完美地工作:
using Xamarin.Forms.Platform.iOS;
using Xamarin.Forms;
using UIKit;
using YOUTNAMESPACE.iOS;
using System.ComponentModel;
using CoreAnimation;
using Foundation;
[assembly: ExportRenderer (typeof(YOUTNAMESPACE.LineEntry), typeof(LineEntryRenderer))]
namespace YOUTNAMESPACE.iOS
{
public class LineEntryRenderer: EntryRenderer
{
protected override void OnElementChanged (ElementChangedEventArgs<Entry> e)
{
base.OnElementChanged (e);
if (Control != null) {
Control.BorderStyle = UITextBorderStyle.None;
var view = (Element as LineEntry);
if (view != null) {
DrawBorder (view);
SetFontSize (view);
SetPlaceholderTextColor (view);
}
}
}
protected override void OnElementPropertyChanged (object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged (sender, e);
var view = (LineEntry)Element;
if (e.PropertyName.Equals (view.BorderColor))
DrawBorder (view);
if (e.PropertyName.Equals (view.FontSize))
SetFontSize (view);
if (e.PropertyName.Equals (view.PlaceholderColor))
SetPlaceholderTextColor (view);
}
void DrawBorder (LineEntry view)
{
var borderLayer = new CALayer ();
borderLayer.MasksToBounds = true;
borderLayer.Frame = new CoreGraphics.CGRect (0f, Frame.Height / 2, Frame.Width, 1f);
borderLayer.BorderColor = view.BorderColor.ToCGColor ();
borderLayer.BorderWidth = 1.0f;
Control.Layer.AddSublayer (borderLayer);
Control.BorderStyle = UITextBorderStyle.None;
}
void SetFontSize (LineEntry view)
{
if (view.FontSize != Font.Default.FontSize)
Control.Font = UIFont.SystemFontOfSize ((System.nfloat)view.FontSize);
else if (view.FontSize == Font.Default.FontSize)
Control.Font = UIFont.SystemFontOfSize (17f);
}
void SetPlaceholderTextColor (LineEntry view)
{
if (string.IsNullOrEmpty (view.Placeholder) == false && view.PlaceholderColor != Color.Default) {
var placeholderString = new NSAttributedString (view.Placeholder,
new UIStringAttributes { ForegroundColor = view.PlaceholderColor.ToUIColor () });
Control.AttributedPlaceholder = placeholderString;
}
}
}
}
但是,當我將相同的邏輯應用於編輯器(多行UITextField)時,邊框會出現在應有的位置,但是在鍵入多行時,邊框會在編輯器中按下按下順序的文本。 我怎樣才能避免這種情況,以便底部邊框只停留在同一個地方?
解
在Xamarin Forms Editor的自定義渲染器中,您需要做兩件事:
private CALayer borderLayer; int sublayerNumber = 0; protected override void OnElementChanged(ElementChangedEventArgs<Editor> e) { base.OnElementChanged(e); if (Control != null) { borderLayer = new CALayer(); Control.Layer.AddSublayer(borderLayer); sublayerNumber = Control.Layer.Sublayers.Length - 1;
您必須使borderLayer全局化,然后創建另一個名為sublayerNumber的全局變量,然后在OnElementChanged內部,檢查控件是否存在后,實例化CALayer,然后將空白層添加到子層並在子層數組中獲取其索引。
2。
public override void LayoutSubviews()
{
base.LayoutSubviews();
Control.Layer.Sublayers[sublayerNumber].MasksToBounds = true;
Control.Layer.Sublayers[sublayerNumber].Frame = new CoreGraphics.CGRect(0f, Frame.Height - 5, Frame.Width, 1f);
Control.Layer.Sublayers[sublayerNumber].BorderColor = Color.FromHex("YOUR-HEX-CODE-HERE").ToCGColor();
Control.Layer.Sublayers[sublayerNumber].BorderWidth = 1.0f;
}
重寫方法LayoutSubviews,然后編輯我們在OnElementChanged中創建的具有最新幀高度和寬度等的特定圖層。
原因
在我們在調用layoutsubviews方法之前添加子視圖之前,導致它顯示不正確。
我們創建一個CALayer然后將其添加到子圖層然后每次調用LayoutSubviews時編輯它的原因是,如果您的編輯器(iOS中的UITextField)擴展大小或合同大小,邊框將跟隨容器本身。 如果用戶已添加此附加功能以允許此操作,則這很重要。
希望這能幫助任何遇到同樣問題的人,因為我拉頭發至少一天!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.