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

本人菜鳥一個,有什麼不對的地方希望大家指出評論,大神勿噴,希望大家一起學習進步!

發佈了132 篇原創文章 · 獲贊 174 · 訪問量 53萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章