关于 xamarin.forms:Xamarin Forms: Add Clear Entry

Xamarin Forms: Add Clear Entry

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

默认情况下入口控件没有这个。

enter

相关讨论

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

缩小的地方是你必须在Android项目和iOS项目上分开做。

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

在 android 项目方面，您可以通过添加如下所示的效果来做到这一点：

注意：在分享代码之前，我必须通知您，您必须在资源/drawable 中有一个图标，名称为 ic_clear_icon.png。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

/// <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项目方面就更简单了。因为它本身就有：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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 项目)。

需要此效果类，因此可以从您声明条目的 XAML 文件中引用它。

1
2
3
4
5
6

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

现在您只需将共享表单项目(在我的情况下为 PCL)上的它引用到 xaml 中：

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

2) 为条目添加效果：

1
2
3
4
5
6

相关讨论

这适用于 Android 和 iOS。

这是我的 xaml。

1
2
3
4
5
6
7
8

这是我的c#

1
2
3
4

private void OnSearchTap(object sender, EventArgs args)
{
search.Text ="";
}

我认为你需要为此渲染器，例如在 android 平台集 android:drawableRight 中。在 iOS 平台上设置 UITextview.

的 RightView 属性

另一种选择是用 Image 将 Entry 包裹在 Grid 中。

1
2
3
4
5
6
7
8
9

ClearButtonVisibility 属性已添加到新的 Xamarin.Forms 中，因此现在不需要自定义呈现器。例如：

1 2	<Entry Text="Xamarin.Forms" ClearButtonVisibility="WhileEditing" />

请参阅在 Xamarin.Forms 文档中显示清除按钮。