讲师中心 微信公众号
AI工具推荐 视频效率加速

如何实现带阴影与圆角的自定义密码输入框

千瑶大大_9983

千瑶大大_9983

发布时间:2026-01-16 13:45:50

|

427人浏览过

|

来源于php中文网

原创

如何实现带阴影与圆角的自定义密码输入框

本文详解如何在 android 中正确实现具有圆角、阴影、密码可见切换功能的自定义 edittext,解决 textinputlayout 在启用 `password_toggle` 时背景失效、阴影丢失的问题。

在使用 Material Design 的 TextInputLayout + TextInputEditText 实现带密码切换图标的输入框时,开发者常遇到一个典型问题:当设置 app:endIconMode="password_toggle" 后,TextInputEditText 的自定义背景(如 @drawable/edittext_background)会被 Material 组件内部绘制逻辑覆盖,导致阴影、圆角或边框无法正常显示,视觉效果严重失真(如背景变白、无阴影、直角生硬等)。

根本原因在于:TextInputLayout 的 OutlinedBox 样式会接管底层 EditText 的背景绘制,并通过 ShapeableImageView 或 MaterialShapeDrawable 动态渲染边框与焦点状态——此时直接为 TextInputEditText 设置 android:background 将被忽略或冲突。

✅ 推荐解决方案:改用 CardView 封装原生 EditText
该方案绕过 TextInputLayout 的复杂背景管理机制,完全掌控外观,同时保留密码切换交互逻辑(需手动实现)。以下是可直接复用的代码结构:

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="25dp"
    app:cardElevation="8dp"
    app:cardBackgroundColor="#1E1E1E"
    app:cardUseCompatPadding="true"
    android:layout_marginStart="50dp"
    android:layout_marginEnd="42dp"
    android:layout_marginTop="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:gravity="center_vertical">

        <EditText
            android:id="@+id/editTextPassword"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:background="@drawable/edittext_background"
            android:paddingHorizontal="16dp"
            android:inputType="textPassword"
            android:hint="@string/password"
            android:textColorHint="@color/textHint"
            android:textColor="@android:color/white" />

        <com.google.android.material.button.MaterialButton
            android:id="@+id/btnTogglePassword"
            style="@style/Widget.MaterialComponents.Button.TextButton.Icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginEnd="8dp"
            app:icon="@drawable/ic_baseline_visibility_off_24"
            app:iconTint="@color/textHint" />
    </LinearLayout>
</androidx.cardview.widget.CardView>

? 关键要点说明:

Work Productivity Word Mail Workflow Helper
Work Productivity Word Mail Workflow Helper

构建并排查Microsoft Word邮件合并及DOCX模板工作流,使用合并域、内容控件、文档属性、重复区块、数据等

下载
  • CardView 提供原生支持的 cardElevation(阴影)、cardCornerRadius(圆角)和 cardBackgroundColor(底色),稳定可靠;
  • 使用 LinearLayout 内部水平布局,将 EditText 与密码切换按钮(MaterialButton 或 ImageButton)组合,替代 TextInputLayout 的内置图标逻辑;
  • 手动为按钮绑定点击事件,在 Java/Kotlin 中切换 inputType 并更新图标:
val passwordField = findViewById<EditText>(R.id.editTextPassword)
val toggleBtn = findViewById<MaterialButton>(R.id.btnTogglePassword)
var isPasswordVisible = false

toggleBtn.setOnClickListener {
    isPasswordVisible = !isPasswordVisible
    passwordField.inputType = if (isPasswordVisible) {
        InputType.TYPE_CLASS_TEXT
    } else {
        InputType.TYPE_CLASS_TEXT or InputType.TYPE_TEXT_VARIATION_PASSWORD
    }
    passwordField.setSelection(passwordField.text.length)
    toggleBtn.icon = ContextCompat.getDrawable(
        this,
        if (isPasswordVisible) R.drawable.ic_baseline_visibility_24
        else R.drawable.ic_baseline_visibility_off_24
    )
}

⚠️ 注意事项:

  • 若仍需 TextInputLayout 的浮动提示(floating hint)、错误提示、计数器等高级功能,可考虑自定义 TextInputLayout 的 boxBackgroundMode 为 filled_box 并配合 android:background + shape drawable,但兼容性与维护成本较高;
  • CardView 在低版本 Android(
  • edittext_background.xml 建议使用 定义透明背景+内边距,避免与 CardView 的 padding 冲突。

综上,面对 TextInputLayout 与自定义背景的兼容性困境,采用 CardView + EditText + 手动密码切换 是目前最简洁、可控、视觉一致的工程化实践方案。

热门AI工具

更多
UP简历
UP简历 Hot

一款AI办公效率工具,主要用于基于AI技术的免费在线简历制作工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

讯飞绘文

讯飞绘文是一款由科大讯飞推出的一站式 AIGC 内容运营平台。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

超级简历WonderCV

一款AI办公效率工具,主要用于免费求职简历模版下载制作,应届生职场人必备简历制作神器,适合需要提升相关任务效率的用户。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

相关专题

更多
Kotlin协程编程与Spring Boot集成实践
Kotlin协程编程与Spring Boot集成实践

本专题围绕 Kotlin 协程机制展开,深入讲解挂起函数、协程作用域、结构化并发与异常处理机制,并结合 Spring Boot 展示协程在后端开发中的实际应用。内容涵盖异步接口设计、数据库调用优化、线程资源管理以及性能调优策略,帮助开发者构建更加简洁高效的 Kotlin 后端服务架构。

371

2026.02.12

Java Kotlin协程与异步编程实战
Java Kotlin协程与异步编程实战

本专题围绕 Kotlin 协程与异步编程展开,讲解挂起函数、协程作用域、异步任务调度及并发控制方法。通过实际项目案例,帮助开发者提升后端服务性能,实现高效异步任务处理与稳定性保障。

179

2026.04.13

Kotlin Android开发教程大全
Kotlin Android开发教程大全

系统讲解 Google 官方推荐的 Android 开发首选语言 Kotlin 的核心知识与工程实践,涵盖 Kotlin 简洁语法(空安全/数据类/扩展函数/解构声明/作用域函数)与 Java 互操作、集合操作与函数式编程、协程(Coroutines)异步编程(suspend/launch/async/Flow)、Jetpack Compose 声明式 UI 开发(状态管理/组合函数/导航/动画)、MVVM / MVI 架构设计与 Vi

268

2026.06.03

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

4744

2024.04.01

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

6157

2024.08.01

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

2522

2024.11.28

css中的padding属性作用
css中的padding属性作用

在CSS中,padding属性用于设置元素的内边距。想了解更多padding的相关内容,可以阅读本专题下面的文章。

3052

2023.12.07

android开发三大框架
android开发三大框架

android开发三大框架是XUtil框架、volley框架、ImageLoader框架。本专题为大家提供android开发三大框架相关的各种文章、以及下载和课程。

902

2023.08.14

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

20

2026.10.28

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
dev.java 官方:Learn Java
dev.java 官方:Learn Java

共0课时 | 0人学习

Java JDBC数据库连接官方教程
Java JDBC数据库连接官方教程

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn