Question

我想要一个条目在占位符前面有一个图标，并在条目末尾有一个图标，以显示和隐藏条目中的文本，我有一个带有显示和隐藏图标的条目使用本教程： https://www.techierathore.com/2017/09/xamarin-forms-tip-implement-show-hide-password-using-effects/

但是现在我想在输入之前有图标，我可以用本教程做到这一点： https://xamgirl.com/image-entry-in-xamarin-forms/

但是，如果我将第一个教程的效果添加到自定义条目，则只显示和隐藏/显示图标。

可以做我想做的事吗？

Answer 1

您可以使用editText.SetCompoundDrawablesRelativeWithIntrinsicBounds()添加两个图标。

Private Sub Form3_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load Dim Maxnumber As Integer Dim total, total2 As Integer Dim input, input2 As Integer Dim num As Integer Dim accu As Integer Maxnumber = CInt(InputBox("How many numbers to you wish to sum?")) total = 0 For x = 1 To Maxnumber input = CInt(InputBox("Enter the number")) input2 = CInt(InputBox("Enter the Distance")) If input And input2 = Nothing Then Exit For Else num = CDbl(input) accu = CDbl(input2) total += num total2 = num * (accu + 0.5) End If Next MessageBox.Show(total2) End Sub为start，top，end和bottom drawable提供了四个参数。在第一个教程中，隐藏/显示图标添加到结尾，您可以将第一个参数从0更改为您的drawable。有三个地方需要修改。

例如：

SetCompoundDrawablesRelativeWithIntrinsicBounds

结果是：

Answer 2

你可以使用这样的东西（Xamarin iOS解决方案）：

txt.TextWithIcon(myIcon, Colors.Black, Colors.Blue, UIReturnKeyType.Next);

谁叫这个方法

public static UITextField TextWithIcon(this UITextField text,
            string icon, UIColor colorBorder, UIColor colorText,
            UIReturnKeyType returnkey)
{
    text.LeftView = null; 
    var myImg = Images.LoadImageView(icon, UIViewContentMode.Center);
    myImg.Frame = new CGRect(10, 7, myImg.Frame.Width, myImg.Frame.Height);
    myImg.SizeToFit();

    var view = new UIView(new CGRect(0, 0, widthScreen, 70));
    view.AddSubview(myImg);

    text.LeftView = view;
    text.LeftViewMode = UITextFieldViewMode.Always;
    text.colorText = textColor;
    text.Layer.BorderWidth = 1f;
    text.Layer.BorderColor = colorBorder.CGColor;

    text.AttributedPlaceholder = new Foundation.NSAttributedString("placeholder", null, Colors.Black);
    text.ReturnKeyType = returnkey;
    text.SecureTextEntry = false;
    return text;
}

希望这有帮助

Answer 3

根据堆栈溢出的怪异评分，我无法直接回复评论。 @Phil根据您对以下图标尺寸的评论：

有效，但是可以创建方法或更改图标大小的方法吗？ – 18年5月29日，菲尔在9:22

要更改图标大小，您将需要实现ScaledBitmap。像这样：

public static BitmapDrawable GetDrawable(int resID)
     {
            var context = global::Android.App.Application.Context;
            var drawable = ContextCompat.GetDrawable(context, resID);
            var bitmap = ((BitmapDrawable)drawable).Bitmap;
            return new BitmapDrawable(Resources.System, Bitmap.CreateScaledBitmap(bitmap, 60, 60, true));
     }```

//And call like this:


textCtrl.SetCompoundDrawablesRelativeWithIntrinsicBounds(null, null, BitMapHelper.GetDrawable(Resource.Mipmap.eye), null);

您可以根据自己的喜好调整比例尺值。

感谢Billy Liu的出色回答。

Answer 4

下面是简洁的方法

<AbsoluteLayout >
  <Entry Keyboard="Default" IsPassword="{Binding IsPasswordShow}" Placeholder="Password" ></Entry>
  <Image Margin="2" AbsoluteLayout.LayoutBounds="1,.5, 25, 100" AbsoluteLayout.LayoutFlags="PositionProportional" HeightRequest="30" WidthRequest="30" Source="{Binding ShowHideIcon}" >
    <Image.GestureRecognizers>
      <TapGestureRecognizer Command="{Binding ShowHideTapCommand}" NumberOfTapsRequired="1" />
    </Image.GestureRecognizers>
  </Image>
</AbsoluteLayout>

并且C＃代码在视图模型中：

public class LoginPasswordViewModel : BaseViewModel
    {
        public LoginPasswordViewModel()
        {

            ShowHideTapCommand = new Command(() =>
            {
                IsPasswordShow = !IsPasswordShow;
            });
        }

        private bool _isPasswordShow;
        public bool IsPasswordShow
        {
            get { return _isPasswordShow; }
            set
            {
                _isPasswordShow = value;
                OnPropertyChanged();
                OnPropertyChanged("ShowHideIcon");
            }
        }

        public string ShowHideIcon
        {
            get
            {
                return IsPasswordShow ? "show.png" : "hide.png";
            }
        }

        public ICommand LoginCommand { get; }
        public ICommand ShowHideTapCommand { get; }
    }

Answer 5

你可以很容易地在 xaml 中做类似的事情：

   <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*"/>
                            </Grid.ColumnDefinitions>
                            <InputKit:AdvancedEntry
                            x:Name="Password"
                            Text="{Binding password}"
                            IsRequired="True"
                            Annotation="None"
                            AnnotationColor="#CB356B"
                            MinLength="6"
                            MaxLength="30"
                            TextColor="#000"
                            IsPassword="true"
                            FontFamily="MainFont"
                            CornerRadius="3"
                            BorderColor="#D7D6D6"
                            TextFontSize="19" 
                            StyleClass="EntryHeight"
                            />
                            <Image x:Name="show_pass_eye" Grid.Row="0" Grid.Column="0" Source="closed_eye.png"  VerticalOptions="Center" HorizontalOptions="End" WidthRequest="40" HeightRequest="40" Margin="5,20,5,0">
                                <Image.GestureRecognizers>
                                    <TapGestureRecognizer NumberOfTapsRequired="1" Tapped="ShowPassword"></TapGestureRecognizer>
                                </Image.GestureRecognizers>
                            </Image>
                        </Grid>

并在c#代码中显示和隐藏事件：

bool eye = false;
private void ShowPassword(object sender, EventArgs e)
    {
        if (!eye)
        {
            show_pass_eye.Source = "eye.png";
            Password.IsPassword = false;
            eye = true;
        }
        else 
        {
            show_pass_eye.Source = "closed_eye.png";
            Password.IsPassword = true;
            eye = false;

        }

    }

我希望它会在未来对某人有所帮助

输入显示和隐藏密码

5 个答案: