如何将条目拆分或设备为 Xamarin 表单中的小条目答案

【问题标题】：How to split or device an Entry into small entries in Xamarin forms如何将条目拆分或设备为 Xamarin 表单中的小条目
【发布时间】：2019-12-26 15:32:05
【问题描述】：

大家好，我正在构建一个应用程序，其条目类似于 tinder，有没有人知道我如何实现这一点。我尝试创建多个条目并将焦点移到输入的文本上，但删除是问题，因为仅在有文本时才调用 TextChaned 方法

【问题讨论】：

您好，您可以自定义Entry Renderer在Native iOS中实现。
不是，TextChanged其实在没有文本的时候也调用了，你可以注意到有OldValue和NewValue在文本变化的时候。也许您可以在文本更改部分显示您的代码。

标签： xamarin.forms

【解决方案1】：

在 Xamarin.Forms 中，您可以在 iOS 中自定义一个 Entry Render View 来实现它。

创建自定义Entry：

public class CustomEntry : Entry
{

}

然后在Native iOS中，创建一个CustomEntryRenderer：

public class CustomEntryRenderer : EntryRenderer
{
    private UITextField textField;
    int numberCount = 6;
    nfloat itemMargin =20;
    List<UILabel> labels = new List<UILabel>();
    List<UIView> lines = new List<UIView>();
    UIControl maskView = new UIControl();

    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        textField = (UITextField)this.Control;
        //textField.ReturnKeyType = UIReturnKeyType.Done;
        textField.KeyboardType = UIKeyboardType.NumberPad;
        textField.AutocapitalizationType = UITextAutocapitalizationType.None;
        textField.TextColor = UIColor.Clear;
        textField.TintColor = UIColor.Clear;
        textField.EditingChanged += TextField_EditingChanged;

        UIButton maskView = new UIButton();
        maskView.BackgroundColor = UIColor.White;
        maskView.TouchUpInside += MaskView_TouchUpInside;
        textField.AddSubview(maskView);
        this.maskView = maskView;

        for (int i = 0; i < numberCount; i++)
        {
            UILabel label = new UILabel();
            label.TextAlignment = UITextAlignment.Center;
            label.TextColor = UIColor.DarkTextColor;
            label.Font = UIFont.FromName("PingFangSC-Regular", 41);
            textField.AddSubview(label);
            labels.Add(label);
        }

        for(int i = 0; i < numberCount; i++)
        {
            UIView line = new UIView();
            line.BackgroundColor = UIColor.Purple;
            textField.AddSubview(line);
            lines.Add(line);
        }

    }

    public override void LayoutSubviews()
    {
        base.LayoutSubviews();
        nfloat temp = textField.Bounds.Size.Width - (itemMargin * (numberCount - 1));
        nfloat w = temp / numberCount;
        nfloat x = 0;

        for(int i = 0; i < labels.Count; i++)
        {
            x = i * (w + itemMargin);
            UILabel label = labels[i];
            label.Frame = new CGRect(x, 0, w, textField.Bounds.Size.Height);

            UIView line = lines[i];
            line.Frame = new CGRect(x, textField.Bounds.Size.Height - 1, w, 1);
        }
        maskView.Frame = textField.Bounds;

    }

    private void MaskView_TouchUpInside(object sender, EventArgs e)
    {
        textField.BecomeFirstResponder();
    }

    private void TextField_EditingChanged(object sender, EventArgs e)
    {
        if(textField.Text.Length > numberCount)
        {
            //Range range = new Range(0, numberCount);

            textField.Text = textField.Text.Substring(0, numberCount);
        }

        for(int i = 0; i < numberCount; i++)
        {
            UILabel label = labels[i];
            if(i< textField.Text.Length)
            {
                label.Text = textField.Text.Substring(i, 1);
            }
            else
            {
                label.Text = "";
            }
        }

        if (textField.Text.Length >= numberCount)
        {
            textField.ResignFirstResponder();
        }
    }
}

最后，你可以在 Xaml 中使用它了：

<ProjectNameSpace:CustomEntry x:Name="customEntry" WidthRequest="300" />

效果：

【讨论】：

@Java_Dude 很高兴能提供帮助。感谢您有空时提前标记。