Xamarin 表单 : Add Clear Entry

Question

您能否指出正确的方向:如何在 Xamarin.Forms 中实现具有行为的清晰输入按钮。行为是:当点击清除图标时，Android 和 iOS 端的条目内容将被删除。

默认情况下，输入控件没有此功能。

结果将是:

Answer 1

经过一些研究，我设法用效果来做到这一点。

缩小规模的是，您必须分别在 Android 项目和 iOS 项目上执行此操作。

喜欢Jason建议也可以使用自定义渲染器来完成。但您仍然必须在每个 Android/iOS 项目上实现它。

在 Android 项目方面，您可以通过添加如下所示的效果来实现此目的:

注意:在分享代码之前，我必须通知您，您必须在资源/绘图中添加一个名为 ic_clear_icon.png 的图标。

/// <summary>
    /// Adding a clear entry effect.
    /// </summary>
    public class ClearEntryEffect : PlatformEffect
    {
        /// <summary>
        /// Attach the effect to the control.
        /// </summary>
        protected override void OnAttached()
        {
            ConfigureControl();
        }

        protected override void OnDetached()
        {
        }

        private void ConfigureControl()
        {
            EditText editText = ((EditText)Control);
            editText.AddTextChangedListener(new OnTextChangedListener(editText));
            editText.FocusChange += EditText_FocusChange;
        }

        /// <summary>
        /// If the entry looses focus, delete the x icon.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        private void EditText_FocusChange(object sender, Android.Views.View.FocusChangeEventArgs e)
        {
            var editText = (EditText)sender;
            if (e.HasFocus == false)
                editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, 0, 0);
        }
    }

    /// <summary>
    /// Adding an OnTextChangedListener to my entry.
    /// </summary>
    public class OnTextChangedListener : Java.Lang.Object, Android.Text.ITextWatcher
    {
        private EditText _editText;
        public OnTextChangedListener(EditText editText)
        {
            _editText = editText;
        }
        public void AfterTextChanged(IEditable s)
        {
        }

        public void BeforeTextChanged(ICharSequence s, int start, int count, int after)
        {
        }

        public void OnTextChanged(ICharSequence s, int start, int before, int count)
        {
            if (count != 0)
            {
                _editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.ic_clear_icon, 0);
                _editText.SetOnTouchListener(new OnDrawableTouchListener());
            }
            else
                _editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, 0, 0);
        }
    }

    /// <summary>
    /// Adding a Touch listener so it can be clicked in order to remove the text.
    /// </summary>
    public class OnDrawableTouchListener : Java.Lang.Object, Android.Views.View.IOnTouchListener
    {
        public bool OnTouch(Android.Views.View v, MotionEvent e)
        {
            if (v is EditText && e.Action == MotionEventActions.Up)
            {
                EditText editText = (EditText)v;

                if (editText.Text != null)
                    editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(0, 0, Resource.Drawable.ic_clear_icon, 0);

                if (editText.GetCompoundDrawables()[2] != null)
                {
                    //If the region on which i tapped is the region with the X the text will be cleaned
                    if (e.RawX >= (editText.Right - editText.GetCompoundDrawables()[2].Bounds.Width()))
                    {
                        editText.Text = string.Empty;
                        return true;
                    }
                }
            }

            return false;
        }
    }

在iOS项目端更简单。因为它本身就有:

 public class ClearEntryEffect : PlatformEffect
    {
        protected override void OnAttached()
        {
            ConfigureControl();
        }

        protected override void OnDetached()
        {
        }

        private void ConfigureControl()
        {
            ((UITextField)Control).ClearButtonMode = UITextFieldViewMode.WhileEditing;
        }
    } 

现在，您在 PCL 项目上创建一个效果类，并引用两个 ClearEntryEffect 类(来自 Android/iOS 项目)。

需要此效果类，以便可以从声明 Entry 的 XAML 文件中引用它。

public class ClearEntryEffect : RoutingEffect
    {
       public ClearEntryEffect() : base("Effects.ClearEntryEffect")
        {
        }
    }

现在您只需将共享表单项目(在我的例子中为 PCL)上的它引用到 xaml 中即可:

1) 引用效果所在的命名空间:xmlns:effects="clr-namespace:YourNamespace.Common.Effects"

2)为条目添加效果:

<Entry x:Name="OrderNo"
Text="{Binding OrderNo, Mode=TwoWay}"
   <Entry.Effects>
       <effects:ClearEntryEffect/>
   </Entry.Effects>
</Entry>