Question

嗨，大家好，我正在构建一个与tinder类似的Entry的应用程序，是否有人对我如何实现这一想法有所了解。我尝试创建多个条目并将重点放在输入的文本上，但是删除是个问题，因为只有在有文本时才调用TextChaned方法

Answer 1

在Xamarin.Forms中，您可以在 iOS 中自定义条目渲染视图以实现它。

创建自定义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" />

效果：

如何将条目拆分或以Xamarin形式分成小条目

1 个答案: