มีวิธีที่ฉลาดเพื่อให้ผู้ใช้สลับระหว่างซ่อนและดูรหัสผ่านใน Android EditText หรือไม่? แอพที่ใช้พีซีจำนวนมากให้ผู้ใช้ทำสิ่งนี้
มีวิธีที่ฉลาดเพื่อให้ผู้ใช้สลับระหว่างซ่อนและดูรหัสผ่านใน Android EditText หรือไม่? แอพที่ใช้พีซีจำนวนมากให้ผู้ใช้ทำสิ่งนี้
คำตอบ:
คุณสามารถเปลี่ยนคุณสมบัติของ TextView แบบไดนามิก หากคุณตั้งค่า XML Atrribute android:password
เป็น true มุมมองจะแสดงจุดหากคุณตั้งค่าเป็นเท็จข้อความจะปรากฏขึ้น
ด้วยเมธอดsetTransformationMethodคุณควรจะสามารถเปลี่ยนคุณสมบัตินี้จากรหัส (ข้อจำกัดความรับผิดชอบ: ฉันยังไม่ได้ทดสอบว่าวิธีการยังคงทำงานหลังจากที่แสดงมุมมองหากคุณพบปัญหาที่ทำให้ฉันแสดงความคิดเห็นสำหรับฉันที่จะรู้ว่า)
รหัสตัวอย่างเต็มจะเป็น
yourTextView.setTransformationMethod(new PasswordTransformationMethod());
เพื่อซ่อนรหัสผ่าน ที่จะแสดงรหัสผ่านที่คุณสามารถตั้งค่าหนึ่งในวิธีการเปลี่ยนแปลงที่มีอยู่หรือการดำเนินการที่ว่างเปล่าTransformationMethodที่ไม่ทำอะไรเลยที่มีข้อความการป้อนข้อมูล
yourTextView.setTransformationMethod(new DoNothingTransformation());
มันง่ายมากที่จะประสบความสำเร็จตั้งแต่ Support Library v24.2.0
สิ่งที่คุณต้องทำคือเพียงแค่:
เพิ่มไลบรารีการออกแบบในการอ้างอิงของคุณ
dependencies {
compile "com.android.support:design:24.2.0"
}
ใช้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
แอตทริบิวต์จะทำงาน!
ในรูปแบบรูทของคุณอย่าลืมเพิ่ม xmlns:app="http://schemas.android.com/apk/res-auto"
คุณสามารถปรับแต่งการสลับรหัสผ่านของคุณได้โดยใช้:
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
android:text
TextInputEditText
คุณสามารถแจ้งปัญหาได้ในGoogle Issues Tracker สำหรับ Android
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 ควรแก้ไขพฤติกรรมนี้ การสนทนาที่ดี
หากต้องการแสดงจุดแทนรหัสผ่านให้ตั้งค่าวิธีการเปลี่ยนรหัสผ่าน:
yourEditText.setTransformationMethod(new PasswordTransformationMethod());
แน่นอนคุณสามารถตั้งค่านี้เป็นค่าเริ่มต้นในองค์ประกอบ edittext ของคุณในรูปแบบ xml ด้วย
android:password
หากต้องการแสดงรหัสผ่านที่อ่านได้ใหม่เพียงแค่ส่งค่า null เป็นวิธีการแปลงค่า:
yourEditText.setTransformationMethod(null);
android:password
เลิกใช้แล้วและคุณควรใช้android:inputType
แทน
editText.getSelectionStart()
และeditText.getSelectionEnd()
สำหรับการบันทึกตำแหน่งเคอร์เซอร์และeditText.setSelection(start, end)
สำหรับการกู้คืน
เพื่อที่จะแสดง:
editText.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
เพื่อซ่อน:
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
หลังจากเคอร์เซอร์เหล่านี้ถูกรีเซ็ตดังนั้น:
editText.setSelection(editText.length());
คุณสามารถใช้ได้ 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">
app:endIconMode="password_toggle"
ใช้
ใช้ช่องทำเครื่องหมายและเปลี่ยนประเภทอินพุตตาม
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);
}
}
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;
}
มันใช้งานได้สำหรับฉันนี่จะช่วยคุณอย่างแน่นอน
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());
}
}
});
ฉันรู้สึกว่าฉันต้องการตอบคำถามนี้แม้จะมีคำตอบที่ดี
ตามเอกสารการเปลี่ยนแปลงวิธีการทำภารกิจของเรา
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());
}
ฉันสามารถเพิ่มรหัส 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"
}
}
} );
...
ฉันมีปัญหาเดียวกันและใช้งานง่ายมาก
สิ่งที่คุณต้องทำคือตัดฟิลด์ 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>
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());
}
});
}
ในรูปแบบที่ง่ายมาก:
private fun updatePasswordVisibility(editText: AppCompatEditText) {
if (editText.transformationMethod is PasswordTransformationMethod) {
editText.transformationMethod = null
} else {
editText.transformationMethod = PasswordTransformationMethod()
}
editText.setSelection(editText.length())
}
หวังว่ามันจะช่วย
คุณสามารถแสดงรหัสผ่าน 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());
}
}
});
ลองสิ่งนี้:
ก่อนอื่นให้กำหนดธงเป็นโกลบอลแบบนี้:
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;
}
}
});
ลองใช้https://github.com/maksim88/PasswordEditTextโครงการที่ github คุณไม่จำเป็นต้องเปลี่ยนรหัส Java ของคุณด้วย เพียงแค่เปลี่ยน
EditText
ติดแท็กไปที่
com.maksim88.passwordedittext.PasswordEditText
ในไฟล์ XML ของคุณ
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
คุณลองใช้ setTransformationMethod แล้วหรือยัง? มันสืบทอดมาจาก TextView และต้องการให้ TransformationMethod เป็นพารามิเตอร์
คุณสามารถค้นหาข้อมูลเพิ่มเติมเกี่ยวกับ TransformationMethods ที่นี่
นอกจากนี้ยังมีคุณสมบัติเจ๋ง ๆ เช่นการแทนที่ตัวละคร
สิ่งที่ฉันทำคือ
คุณสามารถดูวิดีโอนี้สำหรับขั้นตอนโดยละเอียดและคำอธิบายเพิ่มเติมhttps://youtu.be/md3eVaRzdIM
หวังว่าจะช่วย :)
นี่คือโซลูชันของฉันโดยไม่ใช้วิธี 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;
}
});
ตามแหล่งที่มานี้ถ้าคุณได้ย้ายโครงการของคุณไปเป็น 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 ใหม่
ตอนแรกนี่คือหน้าจอที่โหลดด้วยการมองเห็นเนื้อหาของเวกเตอร์
เมื่อคลิกจะเปลี่ยนเป็นการมองเห็นภาพนี้
รหัสสำหรับสวิตช์รหัสผ่านด้านบน (รหัส 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());
}
}
}
ใน 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;
}
ส่วนขยาย 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
ทางออกที่ดี ตั้งค่าปุ่มแล้วใช้รหัสนี้:
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");
}
}
เพิ่มวิธีนี้:
fun EditText.revertTransformation() {
transformationMethod = when(transformationMethod) {
is PasswordTransformationMethod -> SingleLineTransformationMethod.getInstance()
else -> PasswordTransformationMethod.getInstance()
}
}
เรียกว่าจะสลับระหว่างสถานะประเภทอินพุต (คุณสามารถเปลี่ยนการแปลงบรรทัดเดียวเป็นรายการโปรดได้) ตัวอย่างการใช้งาน:
editText.revertTransformation()
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);
}
}
});
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);
}
}
});
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());
}
setTransformationMethod(null)
โทรเพียง