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地址：