首页 > 解决方案 > 条目显示和隐藏密码

问题描述

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

但是现在我也想在条目之前有图标,我可以通过本教程做到这一点: https ://xamgirl.com/image-entry-in-xamarin-forms/

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

有可能做我想做的事吗?

标签: c#xamarinxamarin.formsxamarin.iosxamarin.android

解决方案


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

SetCompoundDrawablesRelativeWithIntrinsicBounds有四个参数,分别是 start、top、end 和 bottom drawable。在第一个教程中,隐藏/显示图标添加到末尾,您可以将第一个参数从 0 更改为您的可绘制对象。有三个地方需要修改。

例如:

public class ShowHidePassEffect : PlatformEffect
{
    protected override void OnAttached()
    {
        ConfigureControl();
    }

    protected override void OnDetached()
    {
    }

    private void ConfigureControl()
    {
        EditText editText = ((EditText)Control);
        editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(Resource.Drawable.Password, 0, Resource.Drawable.ShowPass, 0);
        editText.SetOnTouchListener(new OnDrawableTouchListener());
    }
}

public class OnDrawableTouchListener : Java.Lang.Object, Android.Views.View.IOnTouchListener
{
    public bool OnTouch(Android.Views.View v, MotionEvent e)
    {
        if (v is EditText && e.Action == MotionEventActions.Up)
        {
            EditText editText = (EditText)v;
            if (e.RawX >= (editText.Right - editText.GetCompoundDrawables()[2].Bounds.Width()))
            {
                if (editText.TransformationMethod == null)
                {
                    editText.TransformationMethod = PasswordTransformationMethod.Instance;
                    editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(Resource.Drawable.Password, 0, Resource.Drawable.ShowPass, 0);
                }
                else
                {
                    editText.TransformationMethod = null;
                    editText.SetCompoundDrawablesRelativeWithIntrinsicBounds(Resource.Drawable.Password, 0, Resource.Drawable.HidePass, 0);
                }
                return true;
            }
        }
        return false;
    }
}

结果是:
在此处输入图像描述


推荐阅读