android 实现点击edittext的“小眼睛”切换明密文

很多时候,我们为了用户的隐私安全,需要在密码输入的时候,显示密文。为了更好的用户体验,我们给用户提供了可以切换明密文的小图标(小眼睛)

先来看一下效果图:

这里写图片描述

这里我们可以有两种实现方式:
一、

布局文件:

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/et_bg"
            android:inputType="textPassword"
            android:maxLength="10" />

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_alignParentRight="true"
            android:layout_margin="10dp" />

    </RelativeLayout>

activity中使用:


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText;
    private ImageView imageView;
    private boolean isHideFirst = true;// 输入框密码是否是隐藏的,默认为true

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText = (EditText) findViewById(R.id.editText);
        imageView = (ImageView) findViewById(R.id.imageView);
        imageView.setOnClickListener(this);
        imageView.setImageResource(R.drawable.close);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.imageView:
                if (isHideFirst == true) {
                    imageView.setImageResource(R.drawable.open);
                    //密文
                    HideReturnsTransformationMethod method1 = HideReturnsTransformationMethod.getInstance();
                    editText.setTransformationMethod(method1);
                    isHideFirst = false;
                } else {
                    imageView.setImageResource(R.drawable.close);
                    //密文
                    TransformationMethod method = PasswordTransformationMethod.getInstance();
                    editText.setTransformationMethod(method);
                    isHideFirst = true;

                }
                // 光标的位置  
                int index = editText.getText().toString().length();
                editText.setSelection(index);
                break;

        }
    }
}

二、
xml中:

  <RelativeLayout
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/editText1"
            android:layout_width="match_parent"
            android:paddingRight="10dp"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:background="@drawable/et_bg"
            android:maxLength="10"
            android:drawableRight="@drawable/close" />


    </RelativeLayout>

activity中使用:


public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private EditText editText1;
    private boolean isHideFirst = true;// 输入框密码是否是隐藏的,默认为true

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        editText1 = (EditText) findViewById(R.id.editText1);
        final Drawable[] drawables = editText1.getCompoundDrawables();
        final int eyeWidth = drawables[2].getBounds().width();// 眼睛图标的宽度
        final Drawable drawableEyeOpen = getResources().getDrawable(R.drawable.open);
        drawableEyeOpen.setBounds(drawables[2].getBounds());//这一步不能省略
        editText1.setOnTouchListener(new View.OnTouchListener() {
                                         @Override
                                         public boolean onTouch(View v, MotionEvent event) {


                                             if (event.getAction() == MotionEvent.ACTION_UP) {
                                                 float et_pwdMinX = v.getWidth() - eyeWidth - editText1.getPaddingRight();
                                                 float et_pwdMaxX = v.getWidth();
                                                 float et_pwdMinY = 0;
                                                 float et_pwdMaxY = v.getHeight();
                                                 float x = event.getX();
                                                 float y = event.getY();

                                                 if (x < et_pwdMaxX && x > et_pwdMinX && y > et_pwdMinY && y < et_pwdMaxY) {
                                                     // 点击了眼睛图标的位置
                                                     isHideFirst = !isHideFirst;
                                                     if (isHideFirst) {
                                                         editText1.setCompoundDrawables(null,
                                                                 null,
                                                                 drawables[2], null);

                                                         editText1.setTransformationMethod(PasswordTransformationMethod.getInstance());
                                                     } else {
                                                         editText1.setCompoundDrawables(null, null,
                                                                 drawableEyeOpen,
                                                                 null);
                                                         editText1.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                                                     }
                                                 }
                                             }
                                             return false;
                                         }

       }

      );
    }
}

还有et_bg.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <!--  设置背景的颜色-->
    <solid android:color="#ffffff" />

    <!-- 设置边框的颜色和宽度 -->
    <stroke
        android:width="8dp"
        android:color="#ffffff" />

    <!--设置圆角-->
    <corners android:radius="2dp" />

    <!--设置padding值-->
    <padding
        android:bottom="5dp"
        android:left="5dp"
        android:right="5dp"
        android:top="5dp" />
</shape>

demo地址:

http://download.csdn.net/detail/afanbaby/9906227

本人菜鸟一个,有什么不对的地方希望大家指出评论,大神勿喷,希望大家一起学习进步!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页
评论

打赏作者

Afanbaby

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值