Android EditText密码可见、不可见的切换

2021-09-13  本文已影响0人  100个大西瓜

简单的效果图如下:


密码不可见 密码可见
   <EditText
        android:id="@+id/edittext_password"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/hotspot_password_hint"
        android:imeOptions="flagForceAscii"
        android:inputType="textPassword"
        android:maxLength="63"/>
     private EditText mEditTextPassword = view.findViewById(R.id.edittext_wifi_password);

密码可见状态切换

    /**
     * 切换显示密码
     *
     * @param showPassWord
     */
    private void togglePassword(boolean showPassWord) {
        final int selectionEnd = mEditTextPassword.getSelectionEnd();
        final int selectionStart = mEditTextPassword.getSelectionStart();
        mEditTextPassword.setInputType(
                InputType.TYPE_CLASS_TEXT |
                        (showPassWord ?
                                InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD :
                                InputType.TYPE_TEXT_VARIATION_PASSWORD));
        mEditTextPassword.setSelection(selectionStart, selectionEnd);
    }

kotlin版本的,保持光标不变

package your.pkg.name;

import android.os.Bundle
import android.support.v7.app.AppCompatActivity
import android.text.InputType
import android.widget.CheckBox
import android.widget.EditText

class MainActivity : AppCompatActivity() {
    private lateinit var mCheckBox: CheckBox
    private lateinit var mEditText: EditText

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        mEditText = findViewById<EditText>(R.id.edittext_password)
        mCheckBox = findViewById<CheckBox>(R.id.checkbox)
        mCheckBox.setOnCheckedChangeListener { _, checked ->
            togglePasswordVisible(checked)
        }
    }

    private fun togglePasswordVisible(checked: Boolean) {
        mEditText.apply {
            val selection =
                if (selectionStart == selectionEnd) {
                    selectionEnd
                } else {
                    text.length
                }
            val selectionStart = selectionStart
            val selectionEnd = selectionEnd
            inputType = InputType.TYPE_CLASS_TEXT or
                    if (checked) {
                        InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
                    } else {
                        InputType.TYPE_TEXT_VARIATION_PASSWORD
                    }
            //setSelection(selection)
            setSelection(selectionStart, selectionEnd)
        }
    }
}

切换按钮可以使用一个Checkbox

    <CheckBox
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:button="@drawable/password_checkbox_button"
        android:buttonTint="@color/teal_700"
        android:checked="false"
        android:gravity="center"
        android:minWidth="0dp"
        android:minHeight="0dp"/>

其中 password_checkbox_button 内容如下:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/icon_password_visible" android:state_checked="true" />
    <item android:drawable="@drawable/icon_password_invisible" />
</selector>

icon_password_visible.xml 如下:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:fillColor="#ffffff"
        android:pathData="M511.37,388.95c-58.97,0 -104.07,45.1 -104.07,104.07s45.1,104.07 104.07,104.07 104.07,-45.1 104.07,-104.07S570.34,388.95 511.37,388.95zM511.37,666.46c-97.13,0 -173.45,-76.32 -173.45,-173.45 0,-97.13 76.32,-173.45 173.45,-173.45s173.45,76.32 173.45,173.45C684.81,590.15 608.5,666.46 511.37,666.46zM511.37,232.85c-173.45,0 -322.61,107.54 -381.58,260.17 58.97,152.63 208.13,260.17 381.58,260.17s322.61,-107.54 381.58,-260.17C833.98,340.38 684.81,232.85 511.37,232.85z" />
</vector>
密码可见

icon_password_invisible.xml 如下

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="20dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
    <path
        android:fillColor="#ffffff"
        android:pathData="M505.05,388.62l107.71,107.71c0,-3.47 0,-3.47 0,-6.95 0,-59.07 -45.17,-104.24 -104.24,-104.24C508.52,388.62 508.52,388.62 505.05,388.62zM355.64,416.42l52.12,52.12c0,10.42 0,17.37 0,24.32 0,59.07 45.17,104.24 104.24,104.24 6.95,0 13.9,0 24.32,-3.48l52.12,52.12c-24.32,13.9 -48.64,20.85 -76.44,20.85 -97.29,0 -173.73,-76.44 -173.73,-173.73C338.27,465.06 345.21,440.74 355.64,416.42zM164.53,225.32l79.92,79.92 13.9,13.9c-59.07,45.17 -104.24,104.24 -128.56,173.73 59.07,152.88 208.48,260.6 382.21,260.6 52.12,0 104.24,-10.42 152.88,-27.8l13.9,13.9 100.76,100.76 45.17,-45.17 -615.01,-615.01L164.53,225.32zM512,319.13c97.29,0 173.73,76.44 173.73,173.73 0,20.85 -3.48,45.17 -13.9,62.54l100.76,100.76c52.12,-45.17 93.81,-100.76 118.14,-163.31 -59.07,-152.88 -208.48,-260.6 -382.21,-260.6 -48.64,0 -93.81,10.42 -138.99,24.32l76.44,76.44C466.83,322.6 491.15,319.13 512,319.13z" />
</vector>
密码不可见

矢量图是来自阿里巴巴矢量图库的,具体哪一个忘记了

上一篇下一篇

猜你喜欢

热点阅读