How to edit icon of SearchBar Xamarin Forms on And

问题:

I need your help !

I work on a mobile development project, cross-platform. I use Visual Studio with Xamarin Forms. I want to make a page with a SearchBar (Xamarin.Forms class), but, my problem is the personalisation of the SearchBar icon, especially on the Platform Android. My search led me to nothing. I would be very grateful if you know of a way to edit icon. (I have a model to follow, so It’s well the icon that I want to change and not the color).

Thank you in advance !

enter image description here

回答1:

Introduction to Custom Renderers

You can subclass the stock Xamarin.Forms controls fairly easily for making minor platform-oriented changes to the controls.

In the examples above, I create two SearchBar subclasses, one to allow a custom icon and the other to remove the icon, the Xamarin.Android renders look like:

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;

    }
}

回答2:

@SushiHangover's method works fine, but icon appears again once SearchView get focus. To fix this, I use LayoutParameters for icon:

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);
    ...
}

回答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;
            }
        } 

This worked for me

回答4:

To customize the icon of the SearchBar you need to create a custom renderer where you will customize the SearchView android widget:

[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
        }
    }
}

See Introduction to Custom Renderers for more details.