Question

我目前在我的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）时，边框会出现在应有的位置，但是在键入多行时，边框会按文本顺序在编辑器中向上移动。如何避免这种情况，以使底部边框仅停留在同一位置？

Answer 1

解决方案

在Xamarin表单编辑器的自定义渲染器中，您需要做两件事：

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时对其进行编辑的原因是，如果您的Editor（iOS中的UITextField）的尺寸扩大或收缩，则边框将跟随容器本身。如果用户添加了此附加功能以允许这样做，这一点很重要。

希望这对遇到至少与我拔头发至少一天相同的问题的人有帮助！

在iOS的Xamarin Forms的底部和Editor上添加边框

1 个答案: