前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >EditText输入密码的显示和隐藏

EditText输入密码的显示和隐藏

作者头像
AntDream
发布于 2019-07-15 08:36:28
发布于 2019-07-15 08:36:28
2.6K00
代码可运行
举报
运行总次数:0
代码可运行

密码的显示和隐藏是一个很常见的小知识点,主要包括2个部分:小图标的变化和EditText输入密码的显示和隐藏

小图标的变化

小图标的变化一般也有2种实现方式:

(1)ImageView或ImageButton

这种方式需要声明一个全局的布尔型变量作为标志位,记录当前是显示密码还是隐藏密码

实现步骤:

  • 首先当然是布局中添加了ImageView或ImageButton
  • 然后在代码中设置点击监听,根据标志位在代码中动态的替换图片,改变EditText的显示状态
(2)ToggleButton

这种方式需要写一个selector文件,根据state_checked值设置不同的图片

实现步骤:

  • 首先布局中添加ToggleButton
  • 然后代码中为ToggleButton添加监听,这里的监听就不是上面的点击监听了,而是CompoundButton.OnCheckedChangeListener
  • ToggleButton被点击后就会回调onCheckedChanged方法,在这个方法里可以改变EditText的显示状态

EditText输入内容的显示和隐藏

也有2种方式可以实现:修改TransformationMethod和动态修改InputType

(1)修改TransformationMethod

这种方式最简单,推荐这种

显示密码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
edtPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());

隐藏密码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
edtPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());
(2)修改InputType

这种方式有个问题就是密码的显示隐藏状态改变时字间距会变化,大家可以试一下。还是推荐用上面的方式。

显示密码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mETPassword.setInputType(InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD);

隐藏密码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
mETPassword.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD);

欢迎点赞或将文章分享给你的朋友

你的每一点支持都是对我莫大的鼓励

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2018-12-20,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 AntDream 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Vue.js 组件间的数据传递方法
这种应该是 vue.js 中最常见也是最为自然的一种方式了,要求我们在子组件中声明 props 然后在父组件中为子组件的 prop 赋值。
初代庄主
2022/03/30
6.1K0
Vue.js 组件间的数据传递方法
Vue组件传值完全指南:从初学到进阶
Vue.js 是一款流行的前端框架,它提供了一些方便的机制来管理组件之间的通信,其中包括组件传值。组件传值是指在不同组件之间传递数据或事件,以实现组件之间的交互和通信。本文将详细介绍 Vue.js 中的组件传值机制,包括父子组件传值、兄弟组件传值、跨级组件传值等多种方式。
Front_Yue
2023/12/12
3680
Vue组件传值完全指南:从初学到进阶
Vue组件通信之父组件向子组件传递数据
在Vue.js中,组件通信是构建大型应用的重要一环。其中,父组件向子组件传递数据是一种常见的通信方式。本文将深入探讨如何在Vue应用中实现父组件向子组件传递数据,并通过实际例子演示这一过程。
用户10781437
2023/10/10
3620
Vue组件通信原理及应用场景解析
在这篇博客中,我们将深入探讨Vue组件通信的原理,并探索不同的应用场景。组件通信在Vue.js开发中是一个关键的概念,它涉及到组件之间的数据传递和交互。通过理解Vue组件通信的原理和灵活运用,我们可以更好地设计和组织Vue.js应用,提高开发效率和代码质量。
猫头虎
2024/04/08
2410
Vue组件通信原理及应用场景解析
vue props配置
props是Vue中用于传递数据的属性。通过在子组件的选项中定义props属性,可以指定子组件可以接收的数据以及其他配置选项。父组件可以通过在子组件上使用特定的属性来传递数据。
堕落飞鸟
2023/05/21
3180
vue项目子组件使用 dialog 弹框,如何实现父子组件弹框展示状态关联?
vue 项目,子组件使用 el-dialog 组件,想要实现在父组件可以控制子组件 dialog 的展示和隐藏,子组件自己可以控制 dialog 展示和隐藏,该如何实现?
蓓蕾心晴
2024/07/04
1.7K0
vue3 provide与inject(一)
在Vue 3中,provide和inject是一对用于父组件向子组件传递数据的高级选项。provide用于在父组件中定义要传递的数据,而inject用于在子组件中接收这些数据。它们提供了一种跨组件层次进行数据传递的方式,方便在组件之间共享数据。
堕落飞鸟
2023/05/22
3360
Vue 父子组件传递数据的三种方式
Props 是 Vue 中用于从父组件向子组件传递数据的一种机制。通过在子组件中声明 Props,可以定义期望接收的属性,并通过父组件传递相应的值。
五分钟学SRE
2023/12/19
3350
Vue 父子组件传递数据的三种方式
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
Vue是目前最流行的JavaScript框架之一,它提供了一种简洁、高效的方式来构建用户界面。在Vue中,组件是构建应用程序的核心概念之一。组件可以封装可重用的代码块,使代码更易于维护和扩展。Vue3是Vue.js的最新版本,在这个版本中引入了许多新特性和改进。本文将详细介绍Vue3中的组件,包括组件的定义、组件的属性和事件、组件的Slots和动态组件等相关内容。
网络技术联盟站
2023/07/06
12K0
Vue3中的组件:组件的定义、组件的属性和事件、组件的Slots和动态组件
SRE全栈运行篇
我们设计的前后端分离的流程大致如上图所示,所以说,我们今天主要是将前后端都跑起来,然后把后端返回的数据渲染到页面上。这样一个简单的前后端分离的项目算是完成了。
希里安
2023/10/30
2080
SRE全栈运行篇
Vue3从入门到精通(二)
在Vue3中,侦听器的使用方式与Vue2相同,可以使用watch选项或$watch方法来创建侦听器。不同之处在于,Vue3中取消了immediate选项,同时提供了新的选项和API。
明志德道
2023/10/21
4380
VUE中常用的4种高级特性!
provide/inject 是 Vue.js 中用于跨组件传递数据的一种高级技术,它可以将数据注入到一个组件中,然后让它的所有子孙组件都可以访问到这个数据。通常情况下,我们在父组件中使用 provide 来提供数据,然后在子孙组件中使用 inject 来注入这个数据。
zz_jesse
2024/03/06
2140
VUE中常用的4种高级特性!
Vue.js - 组件快速入门(上)
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树:
Vincent-yuan
2020/07/03
1.7K0
何时何地使用 Vue 的作用域插槽
下面是一个基本的示例,如果我们不提供父级的任何slot位的内容,刚父级<slot>中的内容就会作为后备内容。
前端小智@大迁世界
2021/04/19
7020
何时何地使用 Vue 的作用域插槽
来吧!一文彻底搞定Vue组件!
组件是什么呢,了解组件对象的分析,Vue组件中的data属性,props传递数据的原理到底是什么。
达达前端
2019/12/16
1K0
来吧!一文彻底搞定Vue组件!
全解Vue2的组件通信方式方法
在阅读这篇文章前,推荐一篇“好”文章:Spring MVC:从入门到精通 这篇文章系统全面、实例丰富、深入浅出、步凑详细,是学习Spring MVC的绝佳选择,建议大家阅读。
用户3985749
2024/12/04
1910
Vue实现双向数据绑定的4个方法
使用 v-model 指令可以很方便地实现双向数据绑定。以下是使用 v-model 指令实现双向数据绑定的步骤:
王小婷
2023/09/02
4.6K0
使用 Vue 3 进行组件间通信的完整指南
在阅读这篇文章前,推荐一篇“好”文章:深入浅出JVM(十四)之内存溢出、泄漏与引用原创 这篇文章深入剖析、独到见解、为JAVA开发的内存泄漏问题的解决听过了新的一种思路和综合的方法。
用户3985749
2024/11/28
5050
Vue组件通信探究之子组件向父组件传递数据
在Vue.js应用中,组件通信是一个不可忽视的话题。除了父组件向子组件传递数据外,还存在一种常见的场景:子组件向父组件传递数据。本文将详细介绍Vue中子组件向父组件传递数据的实现方式,并通过实际例子演示这一过程。
用户10781437
2023/10/10
3010
Vue中父组件如何调用子组件的方法
在Vue开发过程中,我们经常需要在一个组件中调用另一个组件的方法。这篇文章将详细介绍如何在Vue中实现父组件调用子组件的方法。我们将以一个简单的例子来说明这个问题,并给出相应的解决方案。
Yeats_Liao
2023/12/10
1.6K1
推荐阅读
相关推荐
Vue.js 组件间的数据传递方法
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验