自定义密码框样式：圆角阴影效果实现

有志者，事竟成！如果你在学习文章，那么本文《实现带阴影与圆角的自定义密码输入框，主要通过CSS样式来完成。以下是具体步骤和代码示例：1. HTML结构创建一个简单的密码输入框元素：<input type="password" class="custom-password-input" placeholder="请输入密码">2. CSS样式使用CSS设置阴影、圆角等样式属性：.custom-password-input { /* 圆角 */ border-radius: 8px; /* 阴影效果 */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 边框样式（可选） */ border: 1px solid #ccc; /* 内边距 */ padding: 10px 12px; /* 宽度 */ width: 300px; /* 字体样式 */ font-size: 16px; color: #333; }3. 可选：悬停或聚焦效果可以添加悬停或聚焦时的样式提升用户体验： .custom-password-input:focus { outline: none; box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2); border-color: #007bff;》，就很适合你！文章讲解的知识点主要包括，若是你对本文感兴趣，或者是想搞懂其中某个知识点，就请你继续往下看吧~

本文详解如何在 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>

? 关键要点说明：

• 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（< API 21）中阴影由 StateListAnimator 模拟，建议保持 app:cardElevation ≥ 4dp 以确保可见性；
• edittext_background.xml 建议使用 定义透明背景+内边距，避免与 CardView 的 padding 冲突。

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

理论要掌握，实操不能落！以上关于《自定义密码框样式：圆角阴影效果实现》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！