android 如何在点击按钮时隐藏和显示密码?
How to hide and show password on button click in android?
当按下按钮时想要看到密码,否则它应该被隐藏或说点缀。
我应用了以下代码,但它不起作用。
任何帮助,将不胜感激。
button.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if(button.isPressed()) {
upass.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
return true;
}
return true;
}
});
showhide.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
global.hideKeyboard();
if(showhide.getText().equals("Hide"))
{
showhide.setText("Show");
etPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
else if(showhide.getText().equals("Show"))
{
showhide.setText("Hide");
etPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});
您已经使用了 OnTouchListener
,这给了您 MotionEvent
。使用它们!无需检查按钮是否再次按下,只要您按下它 MotionEvent
就在那里。
使用密码可见密码字段:inputType = TYPE_CLASS_TEXT | TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
按下按钮时 MotionEvent.ACTION_UP
这样您就可以看到文本。
当MotionEvent.ACTION_DOWN
时保持原样。
button.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch ( event.getAction() ) {
case MotionEvent.ACTION_UP:
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
break;
case MotionEvent.ACTION_DOWN:
editText.setInputType(InputType.TYPE_CLASS_TEXT);
break;
}
return true;
}
});
增强的密码输入视图:切换密码的可见性。
嘿!在延迟分享更多关于 Android 开发的事情后,我决定继续写博客。今天先从一个简单的开始:密码输入框。
增强密码输入。
通常,登录或注册 UI 表单有一些密码输入字段。 Android SDK 提供了一种简单的方法来让输入字段包含隐藏字符:EditText
和 inputType="textPassword"
。很简单的。但是,如果您需要输入一些又长又复杂的密码,这可能会有点乏味:输入一个类型很容易,然后您需要重新开始输入密码。
解决方案。
因此,为了使密码输入更容易,我们可以实施一个简单但非常有效的解决方案:在输入字段的右边缘显示一个图标,当您点击该图标时 - 输入的密码变得可见,当您抬起手指时 - 它再次仅显示模糊字符。简单、有效、安全!
至少有三种明显的可能方法可以实现这一点:
在布局中编写默认 Android SDK 视图并将行为逻辑放入父级 Fragment/Activity
制作一个组合的ViewGroup来封装布局和行为逻辑
创建一个 EditText 子类来管理视图右侧的自定义可绘制对象
所有这三种方式都会对您有用。最初我用第一种方式制作有几个原因,例如:
我不喜欢在没有真正必要的情况下创建额外的实体。有点像奥卡姆剃刀原则。 :)
我只需要将它放在一个地方
当然,如果您需要在不同的地方多次使用相同的增强密码视图,请选择第二个或第三个(最好,因为视图层次结构是扁平的)选项。
实施。
因此,使用默认 Android SDK 视图的增强型密码视图的最简单实现如下所示:
在签到 XML 布局中(忽略诸如填充之类的琐碎且与主题无关的参数):
<RelativeLayout
...>
<EditText
android:id="@+id/fragment_login_password"
android:inputType="textPassword"
.../>
<ImageView
android:id="@+id/fragment_login_password_visibility"
android:layout_alignRight="@+id/fragment_login_password"
android:clickable="true"
android:src="@drawable/ic_show_password"
.../>
</RelativeLayout>
父Fragment/Activity:
2.1。为了良好的用户体验,让我们添加一个文本更改的侦听器,以在输入密码值时显示密码可见性,并在空密码视图中隐藏它:
mPasswordView.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
mPasswordVisibilityView.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE);
}
});
2.2。为密码可见性视图设置触摸侦听器以对触摸做出反应
mPasswordVisibilityView.setOnTouchListener(mPasswordVisibleTouchListener);
如果手指在可见视图内向下,触摸侦听器应用可见字符模式,当手指向上或离开可见视图时,应用原始密码模式。我们还注意光标位置的持久化,因此用户可以随时切换可见性模式而不会丢失当前输入光标位置。
private View.OnTouchListener mPasswordVisibleTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final boolean isOutsideView = event.getX() < 0 ||
event.getX() > v.getWidth() ||
event.getY() < 0 ||
event.getY() > v.getHeight();
// change input type will reset cursor position, so we want to save it
final int cursor = mPasswordView.getSelectionStart();
if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
mPasswordView.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
else
mPasswordView.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
mPasswordView.setSelection(cursor);
return true;
}
};
就是这样!正如我所说,实现起来非常简单,但它极大地改善了用户体验!
你不应该重新发明轮子。使用它:
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
属性app:passwordToggleEnabled
show/hide你想要的按钮。请注意,您还必须将此字符串添加到应用的 build.gradle:
compile 'com.android.support:design:25.1.0'
这个作品:
button.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
upass.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
return true;
case MotionEvent.ACTION_UP:
upass.setTransformationMethod(PasswordTransformationMethod.getInstance());
return true;
}
return false;
}
});
在 XML 中这样做,下面是 java 代码
<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;
}
当按下按钮时想要看到密码,否则它应该被隐藏或说点缀。 我应用了以下代码,但它不起作用。 任何帮助,将不胜感激。
button.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
if(button.isPressed()) {
upass.setInputType(InputType.TYPE_TEXT_VARIATION_PASSWORD);
return true;
}
return true;
}
});
showhide.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
global.hideKeyboard();
if(showhide.getText().equals("Hide"))
{
showhide.setText("Show");
etPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
}
else if(showhide.getText().equals("Show"))
{
showhide.setText("Hide");
etPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
}
}
});
您已经使用了 OnTouchListener
,这给了您 MotionEvent
。使用它们!无需检查按钮是否再次按下,只要您按下它 MotionEvent
就在那里。
使用密码可见密码字段:inputType = TYPE_CLASS_TEXT | TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
按下按钮时 MotionEvent.ACTION_UP
这样您就可以看到文本。
当MotionEvent.ACTION_DOWN
时保持原样。
button.setOnTouchListener(new OnTouchListener() {
public boolean onTouch(View v, MotionEvent event) {
switch ( event.getAction() ) {
case MotionEvent.ACTION_UP:
editText.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);
break;
case MotionEvent.ACTION_DOWN:
editText.setInputType(InputType.TYPE_CLASS_TEXT);
break;
}
return true;
}
});
增强的密码输入视图:切换密码的可见性。 嘿!在延迟分享更多关于 Android 开发的事情后,我决定继续写博客。今天先从一个简单的开始:密码输入框。
增强密码输入。
通常,登录或注册 UI 表单有一些密码输入字段。 Android SDK 提供了一种简单的方法来让输入字段包含隐藏字符:EditText
和 inputType="textPassword"
。很简单的。但是,如果您需要输入一些又长又复杂的密码,这可能会有点乏味:输入一个类型很容易,然后您需要重新开始输入密码。
解决方案。 因此,为了使密码输入更容易,我们可以实施一个简单但非常有效的解决方案:在输入字段的右边缘显示一个图标,当您点击该图标时 - 输入的密码变得可见,当您抬起手指时 - 它再次仅显示模糊字符。简单、有效、安全!
至少有三种明显的可能方法可以实现这一点: 在布局中编写默认 Android SDK 视图并将行为逻辑放入父级 Fragment/Activity 制作一个组合的ViewGroup来封装布局和行为逻辑 创建一个 EditText 子类来管理视图右侧的自定义可绘制对象
所有这三种方式都会对您有用。最初我用第一种方式制作有几个原因,例如: 我不喜欢在没有真正必要的情况下创建额外的实体。有点像奥卡姆剃刀原则。 :) 我只需要将它放在一个地方
当然,如果您需要在不同的地方多次使用相同的增强密码视图,请选择第二个或第三个(最好,因为视图层次结构是扁平的)选项。
实施。 因此,使用默认 Android SDK 视图的增强型密码视图的最简单实现如下所示:
在签到 XML 布局中(忽略诸如填充之类的琐碎且与主题无关的参数):
<RelativeLayout ...> <EditText android:id="@+id/fragment_login_password" android:inputType="textPassword" .../> <ImageView android:id="@+id/fragment_login_password_visibility" android:layout_alignRight="@+id/fragment_login_password" android:clickable="true" android:src="@drawable/ic_show_password" .../> </RelativeLayout>
父Fragment/Activity:
2.1。为了良好的用户体验,让我们添加一个文本更改的侦听器,以在输入密码值时显示密码可见性,并在空密码视图中隐藏它:
mPasswordView.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { mPasswordVisibilityView.setVisibility(s.length() > 0 ? View.VISIBLE : View.GONE); } });
2.2。为密码可见性视图设置触摸侦听器以对触摸做出反应
mPasswordVisibilityView.setOnTouchListener(mPasswordVisibleTouchListener);
如果手指在可见视图内向下,触摸侦听器应用可见字符模式,当手指向上或离开可见视图时,应用原始密码模式。我们还注意光标位置的持久化,因此用户可以随时切换可见性模式而不会丢失当前输入光标位置。
private View.OnTouchListener mPasswordVisibleTouchListener = new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
final boolean isOutsideView = event.getX() < 0 ||
event.getX() > v.getWidth() ||
event.getY() < 0 ||
event.getY() > v.getHeight();
// change input type will reset cursor position, so we want to save it
final int cursor = mPasswordView.getSelectionStart();
if (isOutsideView || MotionEvent.ACTION_UP == event.getAction())
mPasswordView.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_PASSWORD);
else
mPasswordView.setInputType( InputType.TYPE_CLASS_TEXT |
InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);
mPasswordView.setSelection(cursor);
return true;
}
};
就是这样!正如我所说,实现起来非常简单,但它极大地改善了用户体验!
你不应该重新发明轮子。使用它:
<android.support.design.widget.TextInputLayout
android:id="@+id/passwordLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:passwordToggleEnabled="true">
<android.support.design.widget.TextInputEditText
android:id="@+id/password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:inputType="textPassword"/>
</android.support.design.widget.TextInputLayout>
属性app:passwordToggleEnabled
show/hide你想要的按钮。请注意,您还必须将此字符串添加到应用的 build.gradle:
compile 'com.android.support:design:25.1.0'
这个作品:
button.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
switch(event.getAction()) {
case MotionEvent.ACTION_DOWN:
upass.setTransformationMethod(HideReturnsTransformationMethod.getInstance());
return true;
case MotionEvent.ACTION_UP:
upass.setTransformationMethod(PasswordTransformationMethod.getInstance());
return true;
}
return false;
}
});
在 XML 中这样做,下面是 java 代码
<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;
}