настраиваемое поле ввода со значком формы xamarin (android, ios)

Question

Поле ввода должно быть округлено со значком влево или вправо. Я использую код, представленный здесь для создания этой пользовательской записи.

Answer 1

1. Удалите прямоугольник angular границы Entry

Используется CustomRender для достижения этого.

Forms

public class NoUnderlineEntry : Entry
{
    public NoUnderlineEntry()
    {
    }
}

Android Установите Background на null

public class NoUnderLineEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.Background = null;
    }
}

iOS

Установите BorderStyle на None

public class NoUnderlineEntryRenderer : EntryRenderer
{
    protected override void OnElementChanged(ElementChangedEventArgs<Entry> e)
    {
        base.OnElementChanged(e);
        this.Control.BorderStyle = UIKit.UITextBorderStyle.None;
    }
}

2. Размещение Image рядом с Entry

Добавление изображения и запись в одну и ту же сетку в двух столбцах.

3. Добавление закругленной границы к Entry и Image

Добавьте их в рамку с помощью CornerRadius.

XAML

<StackLayout>
        <Frame
            Padding="10, 5, 10, 5"
            HasShadow="False"
            BorderColor="Gray"
            CornerRadius="30">
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="50"/>
                </Grid.ColumnDefinitions>
                <local:NoUnderlineEntry/>
                <Image Source="icon.png" Grid.Column="1" WidthRequest="50" Aspect="AspectFit"/>
            </Grid>
        </Frame>
    </StackLayout>

Результат интерфейса:

Answer 2

Пожалуйста, обратите внимание: Я не буду представлять ответ с возможностью копирования и вставки, а скорее схему того, как добавлять изображения. Вам нужно будет самостоятельно интегрировать код в свое решение.

Вкл. iOS

Уже есть вопрос о том, как этого добиться с помощью Swift на iOS, * 1007. * вы можете найти его здесь .

В основном, что вам нужно сделать, это установить правый (или левый, соответственно) вид на UITextField из вашего пользовательского средства визуализации (в OnElementChanged).

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

    var imageView = new UIImageView(new CGRect(0, 0, 20, 20));
    var image = UIImage.FromFile("ic_location.png");
    imageView.Image = image;
    this.Control.RightView = imageView;
    this.Control.RightViewMode = UITextFieldViewMode.Always;
}

Устанавливает вид справа от UITextField на UIImageView. Если вы хотите вместо этого отобразить значок перед текстом , вам нужно вместо этого установить LeftView и LeftViewMode. Вот как это выглядит. (Я намеренно не вставил изображение, потому что оно сделало ответ менее читаемым.)

Конечно, файл ic_location.png должен быть на вашей платформе ресурсы проектов.

Вам может потребоваться какая-то тонкая настройка, но в основном это все.

Вкл. Android

TextView.setCompoundDrawablesWithIntrinsicBounds

Устанавливает Drawables (если таковые имеются), чтобы появиться слева, сверху, справа от, и под текстом. Используйте null, если вы не хотите рисовать там. Границы Drawables будут установлены на их внутренние c границы. ( source )

Загрузив значок из ресурса и установив его с помощью SetCompoundDrawablesWithIntrinsicBounds (заглавными буквами, так как мы сейчас на C#), вы можете отобразить Entry со значком:

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

    this.Control.SetCompoundDrawablesWithIntrinsicBounds(null, null, this.GetIcon(), null);
    this.Control.CompoundDrawablePadding = 25;
}

private Drawable GetIcon()
{
    int resID = Resources.GetIdentifier("ic_location", "drawable", this.Context.PackageName);
    var drawable = ContextCompat.GetDrawable(this.Context, resID);
    var bitmap = ((BitmapDrawable)drawable).Bitmap;

    return new BitmapDrawable(Resources, Bitmap.CreateScaledBitmap(bitmap, 20, 20, true));
}

Так выглядит версия Android.

Чтобы показать значок слева слева, передайте отрисовку к первому параметру вместо третьего.