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

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