如何在 xamarin 表单中更改搜索栏取消按钮图像

Posted 2023-02-22

【中文标题】如何在 xamarin 表单中更改搜索栏取消按钮图像

【英文标题】：How to change searchbar cancel button image in xamarin forms

【发布时间】：2018-05-05 17:02:47

【问题描述】：

我使用自定义渲染器来更改搜索栏下划线颜色。但我不知道如何将取消按钮十字符号（X）更改为图像，如随附的屏幕截图所示。我的自定义渲染器如下，

 public class CustomSearchBarRenderer : SearchBarRenderer
    
        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        
            base.OnElementChanged(e);

            if (e.OldElement == null)
            
                LinearLayout linearLayout = this.Control.GetChildAt(0) as LinearLayout;
                linearLayout = linearLayout.GetChildAt(2) as LinearLayout;
                linearLayout = linearLayout.GetChildAt(1) as LinearLayout;

                GradientDrawable gd = new GradientDrawable();
                gd.SetStroke(0, android.Graphics.Color.LightGray);

                linearLayout.Background = gd;                 

                AutoCompleteTextView textView = linearLayout.GetChildAt(0) as AutoCompleteTextView;
            
        

    

【问题讨论】：

How to edit icon of SearchBar Xamarin Forms on Android?的可能重复

感谢您的回复@Shiwanka Chathuranga。我想更改搜索栏取消按钮图标，如屏幕截图所示。

【参考方案1】：

您可以在代码中使用这样的渲染器

using System;
using Android.Content;
using Android.Graphics.Drawables;
using Android.Support.V4.Content;
using Android.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using CustomRenderers

[assembly: ExportRenderer(typeof(SearchBar), typeof(CustomSearchBarRenderer))]
namespace CustomRenderers

    public class CustomSearchBarRenderer : SearchBarRenderer
    
        Context context;
        public CustomSearchBarRenderer(Context context) : base(context)
        
            this.context = context;
        

        protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
        
            base.OnElementChanged(e);

            if (Control == null)
            
                return;
            

            if (e.OldElement == null)
            
                //remove the underline line of the edittext
                LinearLayout linearLayout = this.Control.GetChildAt(0) as LinearLayout;
                linearLayout = linearLayout?.GetChildAt(2) as LinearLayout;
                linearLayout = linearLayout?.GetChildAt(1) as LinearLayout;

                if (linearLayout != null)
                
                    //set transparent to remove the underline line of edittext
                    linearLayout.SetBackground(new ColorDrawable(Android.Graphics.Color.Transparent));
                
            

            //set rounded background
            Control.Background = ContextCompat.GetDrawable(Context, Resource.Drawable.RoundedSearchViewRectangle);

            //abc_ic_clear_material is system clear icon which is in gray color
            ImageView searchClose = (ImageView)Control.FindViewById(context.Resources.GetIdentifier("android:id/search_close_btn", null, null));
            searchClose?.SetImageResource(Resource.Drawable.abc_ic_clear_material);

        
    

这是 Resources\Drawable\RoundedSearchViewRectangle.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" 
       android:shape="rectangle">
    <corners android:radius="20dp" />
    <solid android:color="#ffff80" />
</shape>

在应用此代码之前，我们有

在应用这些代码之前和之后看起来像这样：

您可以使用此代码更改它的图标

searchClose?.SetImageResource(Resource.Drawable.ic_stop);

它看起来像这样

如果你想要一个带有灰色圆圈的清晰按钮，你可以设置背景：

searchClose.SetBackgroundResource(Resource.Drawable.SearchViewClearButton);

Resources\Drawable\SearchViewClearButton.xml

<?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape 
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="12dp"
            android:useLevel="false">
            <solid android:color="#a9a9a9" />
        </shape>        
    </item>   
</layer-list>

它看起来像这样：

如果你想隐藏取消按钮，你可以使用这个代码

Control.ShowsCancelButton = false;

【讨论】：

可以参考searchview的这个来源android.googlesource.com/platform/frameworks/base/+/master/core/…，

更多源代码android.googlesource.com/platform/frameworks/base/+/master/core/…

【参考方案2】：

如何在 xamarin 表单中更改搜索栏取消按钮图像

像这样修改你的代码：

public class MySearchBarRenderer : SearchBarRenderer

    protected override void OnElementChanged(ElementChangedEventArgs<Xamarin.Forms.SearchBar> e)
    
        base.OnElementChanged(e);

        if (Control != null)
        
            var searchView = Control;

            int searchViewCloseButtonId = Control.Resources.GetIdentifier("android:id/search_close_btn", null, null);
            var closeIcon = searchView.FindViewById(searchViewCloseButtonId);
            (closeIcon as ImageView).SetImageResource(Resource.Drawable.cancel_icon);
        
    

Effect.