如何在安卓设备上编辑Xamarin Forms的搜索栏(SearchBar)图标？

Question

我需要你的帮助！

我正在进行一个跨平台的移动开发项目。我使用带有Xamarin Forms的Visual Studio。我想要创建一个带有SearchBar（Xamarin.Forms类）的页面，但是我的问题在于个性化SearchBar图标，尤其是在Android平台上。我的搜索没有结果。如果您知道一种编辑图标的方法，我将非常感激。（我有一个模型可供参考，所以我想要更改的是图标而不是颜色）。

提前致谢！ enter image description here

- R.Extrant

Answer 1

自定义渲染器入门

您可以相对容易地子类化Xamarin.Forms控件，以便对控件进行轻微的平台定向更改。

在上面的示例中，我创建了两个SearchBar子类，一个用于允许自定义图标，另一个用于删除图标，Xamarin.Android渲染结果如下：

protected override void OnElementChanged (ElementChangedEventArgs<SearchBar> e)
{
    base.OnElementChanged (e);
    if (Control != null) {
        var searchView = Control;
        searchView.Iconified = true;
        searchView.SetIconifiedByDefault (false);
        // (Resource.Id.search_mag_icon); is wrong / Xammie bug
        int searchIconId = Context.Resources.GetIdentifier ("android:id/search_mag_icon", null, null);
        var icon = searchView.FindViewById (searchIconId);
        (icon as ImageView).SetImageResource (Resource.Drawable.icon);
    }

---

protected override void OnElementChanged (ElementChangedEventArgs<SearchBar> e)
{
    base.OnElementChanged (e);
    if (Control != null) {
        var searchView = Control;
        searchView.Iconified = true;
        searchView.SetIconifiedByDefault (false);
        // (Resource.Id.search_mag_icon); is wrong / Xammie bug
        int searchIconId = Context.Resources.GetIdentifier ("android:id/search_mag_icon", null, null);
        var icon = searchView.FindViewById (searchIconId);
        icon.Visibility = Android.Views.ViewStates.Gone;

    }
}

- SushiHangover

---

嗨，Sushil，我已经按照你的代码进行了操作，它运行得非常好，但是当我开始在搜索栏中输入文本时，它会再次显示搜索图像。现在，请在第一次隐藏搜索图像。我想永久隐藏搜索图像。我该如何实现这一点。 - Deepak

@Deepak 在渲染器中，您可以设置图标的可见性，icon.Visibility = Android.Views.ViewStates.Gone; 当控件包含文本时设置它（在渲染器内使用事件或监听器）。 - SushiHangover

@Deepak 我不确定我理解了，您是想让图标在搜索框获得焦点但用户输入第一个字符之前隐藏吗？ - SushiHangover

是的，Sushil。实际上，我一开始将搜索栏的可见性设置为false，当用户点击一个按钮时，我会展示有焦点的搜索栏。我的问题是，当用户点击按钮时，我会显示搜索栏，但同时也会显示搜索图像。我想要隐藏那个搜索图像。当用户开始输入文本时，它就会被隐藏，但我想在搜索栏可见时就进行隐藏。 - Deepak

使用另一个答案将其完全隐藏：https://dev59.com/-pbfa4cB1Zd3GeqPqzsB#38200193 - SushiHangover

Answer 2

@SushiHangover的方法很好，但是当SearchView获得焦点时，图标会再次出现。 为了解决这个问题，我使用了图标的LayoutParameters:

if(Control!= null){
    ...
    int searchIconId = Context.Resources.GetIdentifier ("android:id/search_mag_icon", null, null);
    var icon = (ImageView)searchView.FindViewById (searchIconId);
    icon.LayoutParameters = new LinearLayout.LayoutParams (0, 0);
    ...
}

- Cuckooshka

Answer 3

         protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                var plateId = Resources.GetIdentifier("android:id/search_plate", null, null);
                var plate = Control.FindViewById(plateId);
                plate.SetBackgroundColor(Android.Graphics.Color.Transparent);

                SearchView searchView = (base.Control as SearchView);
                var searchIconId = searchView.Resources.GetIdentifier("android:id/search_map_icon", null, null);
                var searchIcon = searchView.FindViewById(searchIconId);
                searchView.SetIconifiedByDefault(false);
                searchIcon.RemoveFromParent();

                int textViewId = Resources.GetIdentifier("android:id/search_src_text", null, null);
                EditText textView = (Control.FindViewById(textViewId) as EditText);
                textView.TextAlignment = Android.Views.TextAlignment.ViewStart;
            }
        } 

这对我有用。

- Wimalasuriya

Answer 4

要自定义SearchBar的图标，您需要创建一个自定义渲染器，在其中自定义SearchView Android小部件：

[assembly:ExportRenderer(typeof(MySearchBar), typeof(Some.Namespance.MySearchBar_Droid) )]
namespace Some.Namespace
{
    public class MySearchBar_Droid : SearchBarRenderer
    {
        protected override void OnElementChanged( ElementChangedEventArgs<SearchBar> args )
        {
            base.OnElementChanged(args);    

            SearchView searchView = (base.Control as SearchView);

           //Customize SearchView here
        }
    }
}

请参阅自定义渲染器介绍以获取更多详细信息。

- Giorgi