วิธีสลับระหว่างซ่อนและดูรหัสผ่าน


176

มีวิธีที่ฉลาดเพื่อให้ผู้ใช้สลับระหว่างซ่อนและดูรหัสผ่านใน Android EditText หรือไม่? แอพที่ใช้พีซีจำนวนมากให้ผู้ใช้ทำสิ่งนี้

คำตอบ:


155

คุณสามารถเปลี่ยนคุณสมบัติของ TextView แบบไดนามิก หากคุณตั้งค่า XML Atrribute android:passwordเป็น true มุมมองจะแสดงจุดหากคุณตั้งค่าเป็นเท็จข้อความจะปรากฏขึ้น

ด้วยเมธอดsetTransformationMethodคุณควรจะสามารถเปลี่ยนคุณสมบัตินี้จากรหัส (ข้อจำกัดความรับผิดชอบ: ฉันยังไม่ได้ทดสอบว่าวิธีการยังคงทำงานหลังจากที่แสดงมุมมองหากคุณพบปัญหาที่ทำให้ฉันแสดงความคิดเห็นสำหรับฉันที่จะรู้ว่า)

รหัสตัวอย่างเต็มจะเป็น

yourTextView.setTransformationMethod(new PasswordTransformationMethod());

เพื่อซ่อนรหัสผ่าน ที่จะแสดงรหัสผ่านที่คุณสามารถตั้งค่าหนึ่งในวิธีการเปลี่ยนแปลงที่มีอยู่หรือการดำเนินการที่ว่างเปล่าTransformationMethodที่ไม่ทำอะไรเลยที่มีข้อความการป้อนข้อมูล

yourTextView.setTransformationMethod(new DoNothingTransformation());

61
ในการแสดงรหัสผ่านคุณไม่จำเป็นต้องสร้างคลาสใหม่ setTransformationMethod(null)โทรเพียง
Matt Quigley

4
@ Janusz การใช้งานต่อไปนี้จะให้วิธีการแก้ปัญหา setTransformationMethod (PasswordTransformationMethod.getInstance ()); และ setTransformationMethod (HideReturnsTransformationMethod.getInstance ());
sujith s

@ Janusz แต่วิธีการรับแสดง / ซ่อนปุ่มบนคีย์บอร์ด?
Narendra Singh

เมื่อเรียก setTransformationMethod บน EditeText การเรียกกลับของ onTextChanged ของ EditText จะถูกเรียก ... มันเป็นไปได้หรือไม่ที่สิ่งนี้จะเกิดขึ้น?
tsiro

1
แก้ไข. "setTransformationMethod () เป็นกุญแจสำคัญสิ่งที่คุณต้องมีคือการสลับในผู้ฟังของคุณ: etPassword.setTransformationMethod (null) / etPassword.setTransformationMethod (ใหม่ PasswordTransformationMethod ()) โดยค่าเริ่มต้นให้ตั้งค่าใน xml EditView" android: inputType = "textPassword ""
Sergio

303

มันง่ายมากที่จะประสบความสำเร็จตั้งแต่ Support Library v24.2.0

สิ่งที่คุณต้องทำคือเพียงแค่:

  1. เพิ่มไลบรารีการออกแบบในการอ้างอิงของคุณ

    dependencies {
         compile "com.android.support:design:24.2.0"
    }
  2. ใช้TextInputEditTextร่วมกับTextInputLayout

    <android.support.design.widget.TextInputLayout
        android:id="@+id/etPasswordLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        android:layout_marginBottom="@dimen/login_spacing_bottom">
    
        <android.support.design.widget.TextInputEditText
            android:id="@+id/etPassword"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="@string/fragment_login_password_hint"
            android:inputType="textPassword"/>
    </android.support.design.widget.TextInputLayout>

passwordToggleEnabledแอตทริบิวต์จะทำงาน!

  1. ในรูปแบบรูทของคุณอย่าลืมเพิ่ม xmlns:app="http://schemas.android.com/apk/res-auto"

  2. คุณสามารถปรับแต่งการสลับรหัสผ่านของคุณได้โดยใช้:

app:passwordToggleDrawable- Drawable เพื่อใช้เป็นไอคอนสลับการมองเห็นการป้อนรหัสผ่าน
app:passwordToggleTint- ไอคอนที่ใช้สำหรับสลับการมองเห็นการป้อนรหัสผ่าน
app:passwordToggleTintMode- โหมดการผสมใช้เพื่อปรับสีพื้นหลัง

รายละเอียดเพิ่มเติมในเอกสาร TextInputLayout

ป้อนคำอธิบายรูปภาพที่นี่

สำหรับ AndroidX

  • แทนที่android.support.design.widget.TextInputLayoutด้วยcom.google.android.material.textfield.TextInputLayout

  • แทนที่android.support.design.widget.TextInputEditTextด้วยcom.google.android.material.textfield.TextInputEditText


ในเวอร์ชั่น 25.1.0 ฉันมีพฤติกรรมแปลก ๆ : มันแสดงรหัสผ่านสลับหนึ่งครั้ง แต่ถ้าคุณกดมันมันจะหายไป o_O '
MiguelHincapieC

1
ใช่แล้วก็ยังมีบางคนที่มีนิสัยใจคอแอตทริบิวต์บนandroid:text TextInputEditTextคุณสามารถแจ้งปัญหาได้ในGoogle Issues Tracker สำหรับ Android
mmBs

1
@ Delta7 มีหลายวิธีและวิธีแก้ไขปัญหา กรุณาถามคำถามเกี่ยวกับ SO วางลิงค์ที่นี่และฉันจะพยายามช่วยคุณ
mmBs

1
ขอบคุณ อย่างไรก็ตามในงานสร้างของฉันกราฟิกแสดง / ซ่อนถูกสลับกลับจากภาพหน้าจอของคุณอย่างแปลกประหลาด - มันแสดงให้เห็นถึงความกังวลใจเมื่อรหัสผ่านถูกซ่อน - ฉันเดาว่ามีคนตัดสินใจว่าปุ่มควรแสดงสถานะปัจจุบันแทนการกระทำ (หรือสถานะเป้าหมาย)
Josh Sutterfield

1
@JoshSutterfield เห็นด้วย ดังนั้นหากเราต้องการปุ่มการกระทำเราต้องย้อนกลับด้วยตนเองโดยใช้app:passwordToggleDrawable(เลิกใช้แล้ว) หรือapp:endIconDrawableใช้ drawable แบบกำหนดเองได้เหมือนที่<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_eye_close" android:state_checked="true"/> <item android:drawable="@drawable/ic_eye_open"/> </selector> ฉันคิดว่า google ควรแก้ไขพฤติกรรมนี้ การสนทนาที่ดี
Rahmat Ihsan

112

หากต้องการแสดงจุดแทนรหัสผ่านให้ตั้งค่าวิธีการเปลี่ยนรหัสผ่าน:

yourEditText.setTransformationMethod(new PasswordTransformationMethod());

แน่นอนคุณสามารถตั้งค่านี้เป็นค่าเริ่มต้นในองค์ประกอบ edittext ของคุณในรูปแบบ xml ด้วย

android:password

หากต้องการแสดงรหัสผ่านที่อ่านได้ใหม่เพียงแค่ส่งค่า null เป็นวิธีการแปลงค่า:

yourEditText.setTransformationMethod(null);

7
android:passwordเลิกใช้แล้วและคุณควรใช้android:inputTypeแทน
Wilka

54
คุณสามารถทำให้ผู้ใช้ของคุณมีความสุขโดยการบันทึกตำแหน่งเคอร์เซอร์ก่อนที่จะตั้งค่าวิธีการแปลงและการกู้คืนหลังจากนั้น ใช้editText.getSelectionStart()และeditText.getSelectionEnd()สำหรับการบันทึกตำแหน่งเคอร์เซอร์และeditText.setSelection(start, end)สำหรับการกู้คืน
Mostafa

2
@ Wilka: android: inputType ไม่อนุญาตให้คุณสลับไปมาระหว่างสองสถานะในเวลาทำงาน มันช่วยให้คุณสามารถสลับหนึ่งครั้งและเมื่อคุณเปลี่ยนคุณไม่สามารถเปลี่ยนกลับได้ และไม่ setTransformationMethod จะไม่ถูกคัดค้าน
AndroidDev

@Qlimax แต่มีวิธีแสดง / ซ่อนคีย์ในแป้นพิมพ์อย่างไร
Narendra Singh

@DroidWormNarendra ปกติคุณจะแนบฟังเหตุการณ์เป็น "ภาพตา" ระหว่างใส่รหัสผ่านของคุณหรือภายในใส่รหัสผ่านของคุณเช่นการอธิบายที่นี่: stackoverflow.com/questions/3554377/... จากนั้นในฟังเหตุการณ์นี้คุณสามารถแสดง / ซ่อนรหัสผ่าน AFAIK ไม่สามารถมีปุ่มแสดง / ซ่อนในแป้นพิมพ์ได้
Qlimax

82

เพื่อที่จะแสดง:

editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

เพื่อซ่อน:

editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

หลังจากเคอร์เซอร์เหล่านี้ถูกรีเซ็ตดังนั้น:

editText.setSelection(editText.length());

ผ่านการทดสอบบน Android 4.3 และ 5.0 แล้วใช้งานได้ดี! เอกสารทำให้ดูเหมือนว่าจะเป็นไปได้จนถึง API 3 จนถึง
James

@MattLogan แต่วิธีรับ / ซ่อนคีย์ในแป้นพิมพ์?
Narendra Singh

5
นี่คือคำตอบที่ตรงไปตรงมาที่สุดที่นี่ ขอบคุณ (แปลกไม่ใช่ที่ยอมรับ)
Tina

สิ่งนี้ดูเหมือนว่าจะไม่ทำงานเมื่อมีการเปลี่ยนแปลงที่รันไทม์ และจะไม่กู้คืนตำแหน่งเคอร์เซอร์สุดท้ายของผู้ใช้ / การเลือกหากไม่อยู่ที่ท้ายบรรทัด
ทอม

31

คุณสามารถใช้ได้ app:passwordToggleEnabled="true"

นี่คือตัวอย่างที่ระบุด้านล่าง

<android.support.design.widget.TextInputLayout
        android:id="@+id/password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true"
        android:textColorHint="@color/colorhint"
        android:textColor="@color/colortext">

วันนี้มันจะต้องเป็นที่ต้องการใช้คำตอบ
Ruslan Berozov

นั่นเพิ่มความสูงของมุมมองในกรณีของฉัน มีวิธีใดในการลบการขยายออกจากสลับ drawable
Sadda Hussain

เลิกใช้แล้วในส่วนประกอบวัสดุ app:endIconMode="password_toggle"ใช้
Nicolas

13

ใช้ช่องทำเครื่องหมายและเปลี่ยนประเภทอินพุตตาม

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
    int start,end;
    Log.i("inside checkbox chnge",""+isChecked);
    if(!isChecked){
        start=passWordEditText.getSelectionStart();
        end=passWordEditText.getSelectionEnd();
        passWordEditText.setTransformationMethod(new PasswordTransformationMethod());;
        passWordEditText.setSelection(start,end);
    }else{
        start=passWordEditText.getSelectionStart();
        end=passWordEditText.getSelectionEnd();
        passWordEditText.setTransformationMethod(null);
        passWordEditText.setSelection(start,end);
    }
}

8
private boolean isPasswordVisible;

private TextInputEditText firstEditText;

...

firstEditText = findViewById(R.id.et_first);

...

    private void togglePassVisability() {
    if (isPasswordVisible) {
        String pass = firstEditText.getText().toString();
        firstEditText.setTransformationMethod(PasswordTransformationMethod.getInstance());
        firstEditText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
        firstEditText.setText(pass);
        firstEditText.setSelection(pass.length());           
    } else {
        String pass = firstEditText.getText().toString();
        firstEditText.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        firstEditText.setInputType(InputType.TYPE_CLASS_TEXT);
        firstEditText.setText(pass);
        firstEditText.setSelection(pass.length());
    }
    isPasswordVisible= !isPasswordVisible;
}

ไม่จำเป็นต้องตั้งค่าข้อความอีกครั้งเพียงโทร firstEditText.invalidate ();
Gunavant Patel

7

มันใช้งานได้สำหรับฉันนี่จะช่วยคุณอย่างแน่นอน

showpass.setOnCheckedChangeListener(new OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                    if(!isChecked){

                    // show password
                    password_login.setTransformationMethod(PasswordTransformationMethod.getInstance());

                    Log.i("checker", "true");
                }

                else{
                    Log.i("checker", "false");

                     // hide password
    password_login.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }

            }
        });

5

ฉันรู้สึกว่าฉันต้องการตอบคำถามนี้แม้จะมีคำตอบที่ดี

ตามเอกสารการเปลี่ยนแปลงวิธีการทำภารกิจของเรา

TransformationMethod

TextView ใช้ TransformationMethods ในการทำสิ่งต่าง ๆ เช่นการแทนที่อักขระของรหัสผ่านด้วยจุดหรือป้องกันไม่ให้อักขระขึ้นบรรทัดใหม่ทำให้เกิดการขึ้นบรรทัดใหม่ในฟิลด์ข้อความบรรทัดเดียว

แจ้งให้ทราบฉันใช้มีดเนย แต่มันเหมือนกันถ้าผู้ใช้ตรวจสอบแสดงรหัสผ่าน

@OnCheckedChanged(R.id.showpass)
    public void onChecked(boolean checked){
        if(checked){
            et_password.setTransformationMethod(null);
        }else {
            et_password.setTransformationMethod(new PasswordTransformationMethod());
            
        }
       // cursor reset his position so we need set position to the end of text
        et_password.setSelection(et_password.getText().length());
    }

5

ฉันสามารถเพิ่มรหัส ShowPassword / HidePassword ที่มีเพียงไม่กี่บรรทัดซึ่งอยู่ในบล็อก:

protected void onCreate(Bundle savedInstanceState) {
    ...
    etPassword = (EditText)findViewById(R.id.password);
    etPassword.setTransformationMethod(new PasswordTransformationMethod()); // Hide password initially

    checkBoxShowPwd = (CheckBox)findViewById(R.id.checkBoxShowPwd);
    checkBoxShowPwd.setText(getString(R.string.label_show_password)); // Hide initially, but prompting "Show Password"
    checkBoxShowPwd.setOnCheckedChangeListener( new CompoundButton.OnCheckedChangeListener() {
        public void onCheckedChanged(CompoundButton arg0, boolean isChecked) {
            if (isChecked) {
                etPassword.setTransformationMethod(null); // Show password when box checked
                checkBoxShowPwd.setText(getString(R.string.label_hide_password)); // Prompting "Hide Password"
            } else {
                etPassword.setTransformationMethod(new PasswordTransformationMethod()); // Hide password when box not checked
                checkBoxShowPwd.setText(getString(R.string.label_show_password)); // Prompting "Show Password"
            }
        }
    } );
    ...

5

ฉันมีปัญหาเดียวกันและใช้งานง่ายมาก

สิ่งที่คุณต้องทำคือตัดฟิลด์ EditText ของคุณใน (com.google.android.material.textfield.TextInputLayout) และในการเพิ่มนั้น (แอพ: passwordToggleEnabled = "true")

นี่จะแสดงให้เห็นในฟิลด์ EditText และเมื่อคุณคลิกที่รหัสผ่านจะปรากฏขึ้นและหายไปเมื่อคลิกอีกครั้ง

<com.google.android.material.textfield.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:textColorHint="#B9B8B8"
                app:passwordToggleEnabled="true">

                <EditText
                    android:id="@+id/register_password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="24dp"
                    android:layout_marginRight="44dp"
                    android:backgroundTint="#BEBEBE"
                    android:hint="Password"
                    android:inputType="textPassword"
                    android:padding="16dp"
                    android:textSize="18sp" />
            </com.google.android.material.textfield.TextInputLayout>

4
private int passwordNotVisible=1; 
  @Override
  protected void onCreate(Bundle savedInstanceState) {
 showPassword = (ImageView) findViewById(R.id.show_password);
    showPassword.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            EditText paswword = (EditText) findViewById(R.id.Password);
            if (passwordNotVisible == 1) {
                paswword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                passwordNotVisible = 0;
            } else {

                paswword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                passwordNotVisible = 1;
            }


            paswword.setSelection(paswword.length());

        }
    });
}

4

ในรูปแบบที่ง่ายมาก:

private fun updatePasswordVisibility(editText: AppCompatEditText) {
        if (editText.transformationMethod is PasswordTransformationMethod) {
            editText.transformationMethod = null
        } else {
            editText.transformationMethod = PasswordTransformationMethod()
        }
        editText.setSelection(editText.length())
    }

หวังว่ามันจะช่วย


3

คุณสามารถแสดงรหัสผ่าน SHOW / HIDE โดยใช้รหัสด้านล่างนี้:

รหัส XML:

<EditText
        android:id="@+id/etPassword"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="21dp"
        android:layout_marginTop="14dp"
        android:ems="10"
        android:inputType="textPassword" >
        <requestFocus />
    </EditText>
    <CheckBox
        android:id="@+id/cbShowPwd"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/etPassword"
        android:layout_below="@+id/etPassword"
        android:text="@string/show_pwd" />

รหัส JAVA:

EditText mEtPwd;
CheckBox mCbShowPwd;


mEtPwd = (EditText) findViewById(R.id.etPassword);
mCbShowPwd = (CheckBox) findViewById(R.id.cbShowPwd);

mCbShowPwd.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        // checkbox status is changed from uncheck to checked.
        if (!isChecked) {
            // show password
            mEtPwd.setTransformationMethod(PasswordTransformationMethod.getInstance());
        } else {
            // hide password
            mEtPwd.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        }
    }
});

3

ลองสิ่งนี้:

ก่อนอื่นให้กำหนดธงเป็นโกลบอลแบบนี้:

private boolean isShowPassword = false;

และตั้งค่าฟังให้แตะที่ปุ่มแสดงและซ่อนรหัสผ่าน:

imgPassword.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (isShowPassword) {
                    etPassword.setTransformationMethod(new PasswordTransformationMethod());
                    imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_hide));
                    isShowPassword = false;
                }else{
                    etPassword.setTransformationMethod(null);
                    imgPassword.setImageDrawable(getResources().getDrawable(R.drawable.ic_eye_show));
                    isShowPassword = true;
                }
            }
        });

2

ลองใช้https://github.com/maksim88/PasswordEditTextโครงการที่ github คุณไม่จำเป็นต้องเปลี่ยนรหัส Java ของคุณด้วย เพียงแค่เปลี่ยน

EditText

ติดแท็กไปที่

com.maksim88.passwordedittext.PasswordEditText

ในไฟล์ XML ของคุณ


คุณมีความคิดใด ๆ วิธีการใช้ SetError กับส่วนนี้เมื่อเกิดข้อผิดพลาดที่มีการตั้งค่าสถานะการแสดง / ซ่อนไอคอนกลายเป็นมนุษย์ล่องหน
guisantogui

2

แสดงและซ่อนรหัสผ่าน Edit_Text พร้อมกล่องกาเครื่องหมาย

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:inputType="textPassword"
        android:id="@+id/edtPass"
        android:textSize="20dp"
        android:hint="password"
        android:padding="20dp"
        android:background="#efeaea"
        android:layout_width="match_parent"
        android:layout_margin="20dp"
        android:layout_height="wrap_content" />

    <CheckBox
        android:background="#ff4"
        android:layout_centerInParent="true"
        android:textSize="25dp"
        android:text="show password"
        android:layout_below="@id/edtPass"
        android:id="@+id/showPassword"
        android:layout_marginTop="20dp"
        android:layout_width="wrap_content"
        android:gravity="top|right"
        android:layout_height="wrap_content" />

</RelativeLayout>

รหัสจาวา

package com.example.root.sql2;

import android.annotation.SuppressLint;
import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.design.widget.Snackbar;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.AppCompatCheckBox;
import android.support.v7.widget.Toolbar;
import android.text.method.HideReturnsTransformationMethod;
import android.text.method.PasswordTransformationMethod;
import android.view.View;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.EditText;

public class password extends AppCompatActivity {


    EditText password;
    CheckBox show_hide_password;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.hide);
        findViewById();
        show_hide_pass();



    }//end onCreate



    public void show_hide_pass(){
        show_hide_password.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(CompoundButton compoundButton, boolean b) {
                if (!b){
                    // hide password
                    password.setTransformationMethod(PasswordTransformationMethod.getInstance());

                }else{
                    // show password
                    password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
                }
            }
        });
    } // end show_hide_pass




    public void findViewById(){ //  find ids ui and
        password = (EditText) findViewById(R.id.edtPass);
        show_hide_password = (CheckBox) findViewById(R.id.showPassword);
    }//end findViewById



}// end class

2

คุณลองใช้ setTransformationMethod แล้วหรือยัง? มันสืบทอดมาจาก TextView และต้องการให้ TransformationMethod เป็นพารามิเตอร์

คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ TransformationMethods ที่นี่

นอกจากนี้ยังมีคุณสมบัติเจ๋ง ๆ เช่นการแทนที่ตัวละคร


2
การเชื่อมโยงในคำตอบคือตาย - "สถานะรหัสสินค้า: 404 ไม่พบ"
ปาง

developer.android.com/reference/android/text/method/…อาจเป็น URL ที่ดีกว่าสำหรับข้อมูลเกี่ยวกับวิธีการแปลง Android
Mr.Drew

1

สิ่งที่ฉันทำคือ

  1. สร้างมุมมองแก้ไขข้อความและมุมมองข้อความปกติ
  2. ทำให้ทับซ้อนกันโดยใช้รูปแบบข้อ จำกัด (เช่นหน้าจอเข้าสู่ระบบแอพ Facebook)
  3. แนบ onClickListener เข้ากับมุมมองข้อความปกติเพื่อเปลี่ยนประเภทอินพุตของมุมมองข้อความแก้ไขตาม (มองเห็นได้ / มองไม่เห็น)

คุณสามารถดูวิดีโอนี้สำหรับขั้นตอนโดยละเอียดและคำอธิบายเพิ่มเติมhttps://youtu.be/md3eVaRzdIM

หวังว่าจะช่วย :)


1

นี่คือโซลูชันของฉันโดยไม่ใช้วิธี TextInputEditText และ Transformation

XML

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

        <TextView
            style="@style/FormLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/username" />

        <EditText
            android:id="@+id/loginUsername"
            style="@style/EditTextStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_person_outline_black_24dp"
            android:drawableStart="@drawable/ic_person_outline_black_24dp"
            android:inputType="textEmailAddress"
            android:textColor="@color/black" />

        <TextView
            style="@style/FormLabel"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="@string/password" />

        <EditText
            android:id="@+id/loginPassword"
            style="@style/EditTextStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:drawableEnd="@drawable/ic_visibility_off_black_24dp"
            android:drawableLeft="@drawable/ic_lock_outline_black_24dp"
            android:drawableRight="@drawable/ic_visibility_off_black_24dp"
            android:drawableStart="@drawable/ic_lock_outline_black_24dp"
            android:inputType="textPassword"
            android:textColor="@color/black" />
    </LinearLayout>

รหัส Java

boolean VISIBLE_PASSWORD = false;  //declare as global variable befor onCreate() 
loginPassword = (EditText)findViewById(R.id.loginPassword);
loginPassword.setOnTouchListener(new View.OnTouchListener() {
        public boolean onTouch(View v, MotionEvent event) {
            final int DRAWABLE_LEFT = 0;
            final int DRAWABLE_TOP = 1;
            final int DRAWABLE_RIGHT = 2;
            final int DRAWABLE_BOTTOM = 3;

            if (event.getAction() == MotionEvent.ACTION_UP) {
                if (event.getRawX() >= (loginPassword.getRight() - loginPassword.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
                    // your action here
                    //Helper.toast(LoginActivity.this, "Toggle visibility");
                    if (VISIBLE_PASSWORD) {
                        VISIBLE_PASSWORD = false;
                        loginPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
                        loginPassword.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_lock_outline_black_24dp, 0, R.drawable.ic_visibility_off_black_24dp, 0);
                    } else {
                        VISIBLE_PASSWORD = true;
                        loginPassword.setInputType(InputType.TYPE_CLASS_TEXT);
                        loginPassword.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_lock_outline_black_24dp, 0, R.drawable.ic_visibility_black_24dp, 0);
                    }
                    return false;
                }
            }
            return false;
        }
    });

1

ตามแหล่งที่มานี้ถ้าคุณได้ย้ายโครงการของคุณไปเป็น AndroidX แล้วคุณสามารถแทนที่

compile "com.android.support:design:24.2.0"

กับ

implementation "com.google.android.material:material:1.0.0"

สิ่งที่คุณต้องทำคือใส่รหัสด้านล่างลงในไฟล์เลย์เอาต์ของคุณ:

<com.google.android.material.textfield.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:passwordToggleEnabled="true"
    android:hint="@string/hint_text">

  <com.google.android.material.textfield.TextInputEditText
      android:layout_width="match_parent"
      android:layout_height="wrap_content"/>

</com.google.android.material.textfield.TextInputLayout>

ข้อมูลเพิ่มเติมเกี่ยวกับวัสดุที่TextInputLayoutสามารถพบได้ที่นี่

ไปยังแหล่งนี้ขอแนะนำให้โยกย้ายไปยัง AndroidX จากห้องสมุดสนับสนุน Android:

AndroidX เป็นโครงการโอเพ่นซอร์สที่ทีม Android ใช้ในการพัฒนาทดสอบแพคเกจเวอร์ชั่นและรีลีสไลบรารีภายใน Jetpack

AndroidX เป็นการปรับปรุงครั้งสำคัญสำหรับห้องสมุดสนับสนุน Android ดั้งเดิม เช่นเดียวกับ Support Library, AndroidX จัดส่งแยกต่างหากจากระบบปฏิบัติการ Android และให้ความเข้ากันได้แบบย้อนหลังในรุ่น Android AndroidX จะแทนที่ Library สนับสนุนทั้งหมดโดยจัดเตรียมฟีเจอร์ parity และไลบรารีใหม่ นอกจากนี้ AndroidX ยังมีคุณสมบัติดังต่อไปนี้:

แพ็คเกจทั้งหมดใน AndroidX มีชีวิตอยู่ในเนมสเปซที่สอดคล้องเริ่มต้นด้วยสตริง androidx แพคเกจ Support Library ได้รับการแมปเข้ากับแพ็คเกจ androidx. * ที่สอดคล้องกันแล้ว สำหรับการแม็พแบบเต็มของคลาสเก่าทั้งหมดและสร้างสิ่งประดิษฐ์ไปยังคลาสใหม่ให้ดูที่เพจการสร้างการแพ็กเกจใหม่

ซึ่งแตกต่างจากห้องสมุดสนับสนุนแพคเกจ AndroidX ได้รับการดูแลและอัปเดตแยกต่างหาก แพ็คเกจ androidx ใช้ Semantic Versioning อย่างเข้มงวดเริ่มต้นด้วยรุ่น 1.0.0 คุณสามารถอัปเดตห้องสมุด AndroidX ในโครงการของคุณได้อย่างอิสระ

Support Library ใหม่ทั้งหมดจะเกิดขึ้นในไลบรารี AndroidX ซึ่งรวมถึงการบำรุงรักษาสิ่งประดิษฐ์ห้องสมุดสนับสนุนดั้งเดิมและการแนะนำส่วนประกอบ Jetpack ใหม่


1

ตอนแรกนี่คือหน้าจอที่โหลดด้วยการมองเห็นเนื้อหาของเวกเตอร์ ป้อนคำอธิบายรูปภาพที่นี่

เมื่อคลิกจะเปลี่ยนเป็นการมองเห็นภาพนี้ ป้อนคำอธิบายรูปภาพที่นี่

รหัสสำหรับสวิตช์รหัสผ่านด้านบน (รหัส xml)

<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/laypass"
    android:layout_width="330dp"
    android:layout_height="50dp"
    android:layout_marginTop="24dp"
    app:layout_constraintEnd_toEndOf="@+id/editText3"
    app:layout_constraintStart_toStartOf="@+id/editText3"
    app:layout_constraintTop_toBottomOf="@+id/editText3">

    <EditText
        android:id="@+id/edit_password"
        style="@style/EditTextTheme"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/round"
        android:drawableLeft="@drawable/ic_password"
        android:drawablePadding="10dp"
        android:ems="10"
        android:hint="Password"
        android:inputType="textPassword"
        android:paddingLeft="10dp"
        android:paddingRight="15dp"
        android:textColor="@color/cyan92a6"
        android:textColorHint="@color/cyan92a6"
        android:textCursorDrawable="@null"
        android:textSize="18sp"
        />

    <ImageView
        android:id="@+id/show_pass_btn"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginEnd="8dp"
        android:alpha=".5"
        android:onClick="ShowHidePass"
        android:padding="5dp"
        android:src="@drawable/ic_visibility"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="@+id/laypass"
        app:layout_constraintTop_toTopOf="@+id/edit_password" /> 
 </androidx.constraintlayout.widget.ConstraintLayout>

รหัส Java สำหรับการทำงานของปุ่ม

public void ShowHidePass(View view) {

    if(view.getId()==R.id.show_pass_btn){
        if(edit_password.getTransformationMethod().equals(PasswordTransformationMethod.getInstance())){
            ((ImageView)(view)).setImageResource(R.drawable.ic_visibility_off);
            //Show Password
            edit_password.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
        }
        else{
            ((ImageView)(view)).setImageResource(R.drawable.ic_visibility);
            //Hide Password
            edit_password.setTransformationMethod(PasswordTransformationMethod.getInstance());
        }
    }
}

0

ใน XML ทำเช่นนี้

    <LinearLayout
          android:layout_height="wrap_content"
          android:layout_width="fill_parent"
          android:orientation="vertical"
          >
          <RelativeLayout
              android:id="@+id/REFReLayTellFriend"
              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:orientation="horizontal"
              >
          <EditText
              android:id="@+id/etpass1"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:background="@android:color/transparent"
              android:bottomLeftRadius="10dp"
              android:bottomRightRadius="50dp"
              android:fontFamily="@font/frutiger"
              android:gravity="start"
              android:inputType="textPassword"
              android:hint="@string/regpass_pass1"
              android:padding="20dp"
              android:paddingBottom="10dp"
              android:textColor="#000000"
              android:textColorHint="#d3d3d3"
              android:textSize="14sp"
              android:topLeftRadius="10dp"
              android:topRightRadius="10dp"/>
              <ImageButton
                  android:id="@+id/imgshowhide1"
                  android:layout_width="40dp"
                  android:layout_height="20dp"
                  android:layout_marginTop="20dp"
                  android:layout_marginRight="10dp"
                  android:background="@drawable/showpass"
                  android:layout_alignRight="@+id/etpass1"/>
          </RelativeLayout>    

 boolean show=true;
 //on image click inside password do this
 if(show){
                imgshowhide2.setBackgroundResource(0);
                imgshowhide2.setBackgroundResource(R.drawable.hide);
                etpass2.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
                etpass2.setSelection(etpass2.getText().length());

                show=false;
            }else{
                imgshowhide2.setBackgroundResource(0);
                imgshowhide2.setBackgroundResource(R.drawable.showpass);
                //etpass1.setInputType(InputType.TYPE_TEXT);
                etpass2.setInputType(InputType.TYPE_CLASS_TEXT |
                        InputType.TYPE_TEXT_VARIATION_PASSWORD);
                etpass2.setSelection(etpass2.getText().length());
                show=true;
            }

0

ส่วนขยาย Kotlin ของฉัน เขียนครั้งเดียวใช้ทุกที่

fun EditText.tooglePassWord() {
this.tag = !((this.tag ?: false) as Boolean)
this.inputType = if (this.tag as Boolean)
    InputType.TYPE_TEXT_VARIATION_PASSWORD
else
    (InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD)

this.setSelection(this.length()) }

คุณสามารถเก็บวิธีนี้ไว้ในไฟล์ใดก็ได้และใช้งานได้ทุกที่ใช้อย่างนี้

ivShowPassword.click { etPassword.tooglePassWord() }

โดยที่ ivShowPassword ถูกคลิก imageview (eye) และ etPassword คือ Editext


0

ทางออกที่ดี ตั้งค่าปุ่มแล้วใช้รหัสนี้:

public void showPassword(View v)
{

    TextView showHideBtnText = (TextView) findViewById(R.id.textView1);

    if(showHideBtnText.getText().toString().equals("Show Password")){
        password.setTransformationMethod(null);
        showHideBtnText.setText("Hide");
    } else{
        password.setTransformationMethod(new PasswordTransformationMethod());
        showHideBtnText.setText("Show Password");
    }


}

0

เพิ่มวิธีนี้:

fun EditText.revertTransformation() {
    transformationMethod = when(transformationMethod) {
        is PasswordTransformationMethod -> SingleLineTransformationMethod.getInstance()
        else -> PasswordTransformationMethod.getInstance()
    }
}

เรียกว่าจะสลับระหว่างสถานะประเภทอินพุต (คุณสามารถเปลี่ยนการแปลงบรรทัดเดียวเป็นรายการโปรดได้) ตัวอย่างการใช้งาน:

editText.revertTransformation()

0
1> Make a selector file "show_password_selector.xml".

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_hide"
        android:state_selected="true"/>
    <item android:drawable="@drawable/pwd_show"
        android:state_selected="false" />
</selector>

2>set "show_password_selector" file into imageview.

<ImageView
                        android:id="@+id/iv_pwd"
                        android:layout_width="@dimen/_35sdp"
                        android:layout_height="@dimen/_25sdp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/_15sdp"
                        android:src="@drawable/show_password_selector" />

3> put below code in java file.
  iv_new_pwd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (iv_new_pwd.isSelected()) {
                iv_new_pwd.setSelected(false);
                Log.d("mytag", "in case 1");
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
            } else {
                Log.d("mytag", "in case 1");
                iv_new_pwd.setSelected(true);
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            }
        }
    });

0
1> Make a selector file "show_password_selector.xml".

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/pwd_hide"
        android:state_selected="true"/>
    <item android:drawable="@drawable/pwd_show"
        android:state_selected="false" />
</selector>

2>set "show_password_selector" file into imageview.

<ImageView
                        android:id="@+id/iv_pwd"
                        android:layout_width="@dimen/_35sdp"
                        android:layout_height="@dimen/_25sdp"
                        android:layout_alignParentRight="true"
                        android:layout_centerVertical="true"
                        android:layout_marginRight="@dimen/_15sdp"
                        android:src="@drawable/show_password_selector" />

3> put below code in java file.
  iv_new_pwd.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            if (iv_new_pwd.isSelected()) {
                iv_new_pwd.setSelected(false);
                Log.d("mytag", "in case 1");
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT);
            } else {
                Log.d("mytag", "in case 1");
                iv_new_pwd.setSelected(true);
                edt_new_pwd.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
            }
        }
    });

-2
if (inputPassword.getTransformationMethod() == PasswordTransformationMethod.getInstance()) {
 //password is visible
                inputPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
            }
else if(inputPassword.getTransformationMethod() == HideReturnsTransformationMethod.getInstance()) {
 //password is hidden
                inputPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
            }
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.