Пользовательская панель поиска с закругленными углами xamarin forms android

Пользовательское средство визуализации 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;
                }
            }

Средство визуализации Custom SearchBar: Android?

Мне нужно сделать то же самое, что и для ios, с настраиваемой панелью поиска с закругленными углами и другими небольшими настройками, для Android я не получил достаточной информации, чтобы исправить это. Кто-нибудь даст какие-нибудь инструкции или идеи.

Заранее спасибо.


android xamarin xamarin.forms c# custom-renderer
person Riyas    schedule 03.10.2017    source источник

Ответы (2)


arrow_upward
7
arrow_downward

В своем SearchBarRenderer подклассе назначьте Android SearchView настраиваемую фигуру, которую можно рисовать:

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:

Re: 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>
person SushiHangover    schedule 03.10.2017
comment
@Riyas Рад, что это помогло. ???? - person SushiHangover; 04.10.2017
comment
Два вопроса, один (1) представление, которое я использую, - это C #, так как бы вы реализовали это в коде C # ... два (2). Двигаясь вперед, следует ли мне использовать xaml для всех представлений вместо уже представленных в C #? Является ли xaml более стандартным? - person Tim Maxey; 19.03.2018
comment
или!!! lol, это высказывание создает XML-файл с именем custom_search_view в папке ресурсов ?? Благодарность! - person Tim Maxey; 19.03.2018
comment
Вы создали custom_search_view в папке с возможностью переноса в проекте платформы Android? - person Anthony; 28.04.2019
comment
@Anthony Да, это можно сделать - person SushiHangover; 28.04.2019

arrow_upward
4
arrow_downward

Не слишком уверен в ваших точных требованиях, но как насчет того, чтобы просто окружить панель поиска рамкой?

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

панель поиска внутри обрезанного изображения кадра

person t.shikanai    schedule 09.08.2019