学习笔记------登录界面密码的显示与隐藏

现在很多app开发都有密码显示和隐藏的功能，刚好我现在也遇到这个问题，现在我把我解决的过程分享给大家。

展示页面：

隐藏密码：

显示密码：

activity_login.xml布局文件代码：

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="30dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:src="@mipmap/account" />

            <EditText
                android:id="@+id/edt_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:background="@null"
                android:hint="Warehouse Operator"
                android:textColor="@color/black"
                android:inputType="text" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="#333333" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="30dp"
            android:layout_marginRight="30dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <ImageView
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:src="@mipmap/password" />

            <EditText
                android:id="@+id/edt_password"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="8dp"
                android:layout_weight="1"
                android:background="@null"
                android:hint="Password"
                android:textColor="@color/black"
                android:inputType="textPassword" />

            <ImageView
                android:id="@+id/img_eye"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:src="@mipmap/eye_close" />

        </LinearLayout>

        <View
            android:layout_width="match_parent"
            android:layout_height="1dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:background="#333333" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginLeft="30dp"
            android:layout_marginTop="15dp"
            android:layout_marginRight="30dp"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <CheckBox
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="@string/remember" />

            <TextView
                android:id="@+id/textView_forgetPassword"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/forgot_password"
                android:textColor="#333333" />


        </LinearLayout>

    </LinearLayout>

接下来是具体的代码实现。

LoginActivity.java的代码：

public class LoginActivity extends AppCompatActivity implements View.OnClickListener {

   //输入框的密码是否是隐藏的
    private boolean isHideFirst = true;
    
	private ImageView mImgEye;
	private EditText mEdtUsername;
	private EditText mEdtPassword;
	
    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_login);
        mEdtUsername = findViewById(R.id.edt_username);
        mEdtPassword = findViewById(R.id.edt_password);
        mImgEye = findViewById(R.id.img_eye);
        mImgEye.setOnClickListener(this);
        }

	    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.img_eye:
                if (isHideFirst == true) {
                    mImgEye.setImageResource(R.mipmap.eye_open);
                    //密文
                    HideReturnsTransformationMethod method1 = HideReturnsTransformationMethod.getInstance();
                    mEdtPassword.setTransformationMethod(method1);
                    isHideFirst = false;
                } else {
                    mImgEye.setImageResource(R.mipmap.eye_close);
                    //密文
                    TransformationMethod method = PasswordTransformationMethod.getInstance();
                    mEdtPassword.setTransformationMethod(method);
                    isHideFirst = true;
                }
                //显示密码时光标位置的要获取到当前位置
                int index = mEdtPassword.getText().toString().length();
                mEdtPassword.setSelection(index);
                break;
        }
    }
}

写完这些代码完成后就可以看到开头展示的效果了。