带有圆角 xamarin 的自定义搜索栏形成 android答案

【问题标题】：Custom search bar with rounded corner xamarin forms android带有圆角 xamarin 的自定义搜索栏形成 android
【发布时间】：2018-03-14 12:00:02
【问题描述】：

带圆角的自定义 searchBar 渲染器：iOS

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

                var searchbar = (UISearchBar)Control;                
                if (e.NewElement != null)
                {                    
                    searchbar.Layer.CornerRadius = 20;
                    searchbar.Layer.BorderWidth =14;
                    searchbar.Layer.BorderColor =  UIColor.FromRGB(240,240,240).CGColor;
                }
            }

自定义搜索栏渲染器：Android ?

我需要像对 ios 所做的那样做同样的事情，带有圆角的自定义搜索栏和其他一些自定义项，对于 android，我没有得到足够的信息来解决这个问题。任何人都可以提供一些指导或想法。

提前致谢。

【问题讨论】：

标签： c# android xamarin xamarin.forms custom-renderer

【解决方案1】：

在您的 SearchBarRenderer 子类中，为 Android SearchView 分配一个自定义 shape 可绘制对象：

class CustomSearchBar : SearchBarRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<SearchBar> e)
    {
        base.OnElementChanged(e);
        if (Control != null)
            Control.Background = ContextCompat.GetDrawable(Forms.Context, Resource.Drawable.custom_search_view);
    }
}

在可绘制对象中，根据您的要求对其进行自定义：

<?xml version="1.0" encoding="UTF-8" ?>
 <shape xmlns:android="http://schemas.android.com/apk/res/android"
 android:padding="10dp"
 android:shape="rectangle" >
 <corners android:radius="10dp" /> 
 <solid android:color="#baf4ed" />
  <stroke
    android:width="5.0dp"
    android:color="#800000" />
 </shape>

有关可绘制对象的更多信息，请查看 Android 文档：

回复：https://developer.android.com/guide/topics/resources/drawable-resource.html#Shape

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape=["rectangle" | "oval" | "line" | "ring"] >
    <corners
        android:radius="integer"
        android:topLeftRadius="integer"
        android:topRightRadius="integer"
        android:bottomLeftRadius="integer"
        android:bottomRightRadius="integer" />
    <gradient
        android:angle="integer"
        android:centerX="float"
        android:centerY="float"
        android:centerColor="integer"
        android:endColor="color"
        android:gradientRadius="integer"
        android:startColor="color"
        android:type=["linear" | "radial" | "sweep"]
        android:useLevel=["true" | "false"] />
    <padding
        android:left="integer"
        android:top="integer"
        android:right="integer"
        android:bottom="integer" />
    <size
        android:width="integer"
        android:height="integer" />
    <solid
        android:color="color" />
    <stroke
        android:width="integer"
        android:color="color"
        android:dashWidth="integer"
        android:dashGap="integer" />
</shape>

【讨论】：

@Riyas 很高兴它有帮助。 ?
两个问题，一 (1) 我正在使用的视图是 c#，那么您将如何在 c# 代码中实现它...两 (2)。展望未来，我应该对所有视图使用 xaml 而不是已经使用的 c# 视图吗？ xaml 更像是一个“标准”吗？
或者！！！大声笑，这句话是在资源文件夹下创建一个名为“custom_search_view”的xml文件吗？谢谢！
你在android平台项目的drawable文件夹中创建了custom_search_view吗？
@Anthony 是的，它是一个可绘制对象

【解决方案2】：

不太确定您的确切要求，但是简单地用框架包围搜索栏怎么样？

<Frame Padding="0" Margin="0" BackgroundColor="White" HasShadow="False" BorderColor="Black" CornerRadius="15" HeightRequest="30">
   <SearchBar BackgroundColor="Transparent"/>
</Frame>

searchbar inside trimmed frame image

【讨论】：