web-dev-qa-db-ja.com

エントリの表示と非表示のパスワード

エントリの前にアイコンを、エントリの最後にアイコンを付けて、エントリ内のテキストを表示および非表示にしたいのですが、このチュートリアルを使用して、表示と非表示のアイコンが付いたエントリがありました： 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
7
Phill

editText.SetCompoundDrawablesRelativeWithIntrinsicBounds() を使用して、両方のアイコンを追加できます。

SetCompoundDrawablesRelativeWithIntrinsicBoundsは、開始、上部、終了、下部のドローアブルの4つのパラメーターを取ります。最初のチュートリアルでは、非表示/表示アイコンが最後に追加され、最初のパラメーターを0からドローアブルに変更できます。変更が必要な場所は3つあります。

例えば：

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;
    }
}

そして結果は次のとおりです。
enter image description here

10
Billy Liu - MSFT

次のようなものを使用できます（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;
}

お役に立てれば

1
El0din

スタックオーバーフローの奇妙な評価に従って、コメントに直接返信することはできません。以下のアイコンのサイズ設定に関するコメントによる@Phil：

動作しますが、アイコンのサイズを変更するメソッドなどを作成することは可能ですか？ –フィル2018年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);

スケール値を好みに合わせて微調整できます。

素晴らしい答えをくれたBillyLiuに感謝します。

0
Microwales