带有 xamarin 表单图标的自定义输入框（android，ios）答案

【问题标题】：custom entry box with icon for xamarin form (android,ios)带有 xamarin 表单图标的自定义输入框（android，ios）
【发布时间】：2020-01-20 21:54:39
【问题描述】：

输入框应该是圆形的，左侧或右侧有一个图标。我正在使用the code presented here 创建这个自定义条目。

【问题讨论】：

参考这个stackoverflow.com/questions/50512908/…
我使用一种简单的方式将Image 布置在Entry 旁边。我已经在下面发布了我的答案。为此使用简单的布局是否不能解决您的要求？如果您的要求与我的相似，我有点困惑。

标签： xaml xamarin xamarin.forms

【解决方案1】：

1.去掉Entry的矩形边框

使用 CustomRender 来实现这一点。

表格

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

安卓将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 将它们添加到 Frame 中。

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>

界面结果：

【讨论】：

【解决方案2】：

请注意：我不会提供可复制粘贴的答案，而是提供有关如何添加图像的概述。您必须自己将代码集成到您的解决方案中。

在 iOS 上

关于如何在 iOS 上使用 Swift 实现这一点，已经有一个已回答的问题，you can find it here。

基本上要做的是从您的自定义渲染器（在OnElementChanged 中）在UITextField 上设置右视图（或分别为左视图）。

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。 This is how it looks like.（我故意没有内联图像，因为它使答案变得不那么可红色。）

当然，文件ic_location.png 必须在您的平台项目资源中。

您可能需要进行一些微调，但基本上就是这样。

在安卓上

TextView.setCompoundDrawablesWithIntrinsicBounds

设置可绘制对象（如果有）显示在文本的左侧、上方、右侧和下方。如果您不想要 Drawable，请使用 null。 Drawables 的边界将设置为它们的内在边界。 (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));
}

This is how the Android version looks like.

为了在左侧显示图标，将drawable传递给第一个参数而不是第三个参数。

【讨论】：