如何在 EditText 密码输入字段旁边放置一个 ImageView

Question

我正在尝试使用 EditText TextView 在密码字段中进行密码可见性切换（我不想使用 android 支持 TextInputLayout）

一切正常，但我如何在密码 EditText 字段旁边的正确位置调整 ImageView。

这就是我现在拥有的

这就是我想要的

我希望图像位于密码 EditText 字段内的那个位置。

我的布局文件

 <EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/etPassword"
    android:layout_marginRight="20dp"
    android:inputType="textPassword"
    android:layout_marginLeft="20dp"
    android:layout_marginBottom="20dp"
    android:paddingLeft="20dp"
    android:background="@drawable/input_border"
    android:hint="Your Password" />

<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_marginRight="5dp"
    android:alpha=".5"
    android:onClick="ShowHidePass"
    android:padding="5dp"
    android:src="@drawable/eye_show" />

Answer 1

我想提出两个解决方案。我自己正在使用第二个

首先：通过向 EditText 添加可绘制对象

你可以像这样向 EditText 添加一个图标：

    <EditText
        ...
        android:drawableEnd="@drawable/ic_settings_24dp"
        ...
    />

然后像这样添加一个监听器：Handling click events on a drawable within an EditText

二：通过扩展TextInputLayout

我遇到了同样的问题，所以我所做的是创建一个扩展 TextInputLayout 的视图类。这样，默认情况下材质主题不会应用填充框样式，您仍然可以获得所有 TextInputLayout 优点。

import android.content.Context
import android.util.AttributeSet
import com.google.android.material.textfield.TextInputLayout

class CustomTextInputLayout @JvmOverloads constructor(
        context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0
): TextInputLayout(context, attrs, defStyleAttr) {

}

    <com.passwordstore.android.ui.views.CustomTextInputLayout
        android:id="@+id/til_notes"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:hint="@string/notes"
        app:endIconMode="clear_text"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toBottomOf="@id/btn_generate_password"
        style="@style/BoxTextInputLayout">
        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:fontFamily="@font/poppins_medium" />
    </com.passwordstore.android.ui.views.CustomTextInputLayout>

结果如下

Old EditText design with TextInputLayout

Answer 2

您可以在TextInputLayout 中使用app:passwordToggleEnabled="true"，如果您还需要自定义图标使用，"app:passwordToggleDrawable="

      <com.google.android.material.textfield.TextInputLayout
                            android:layout_width="match_parent"
                            android:layout_height="50dp"
                            app:passwordToggleEnabled="true">
        
                            <com.google.android.material.textfield.TextInputEditText
                                android:id="@+id/ed_password"
                                android:layout_width="match_parent"
                                android:layout_height="match_parent"  
                                android:gravity="center_vertical"
                                android:hint="Password"
                                android:imeOptions="actionNext"
                                android:inputType="textPassword"
                                android:textSize="16sp"
                                android:padding="10dp" />
        
        
                        </com.google.android.material.textfield.TextInputLayout>

Answer 3

<EditText
    android:id="@+id/loginPassword"
    android:layout_width="325dp"
    android:layout_height="53dp"
    android:layout_marginTop="20dp"
    android:background="@drawable/et_style"
    android:hint="Password"
    android:inputType="textPassword"
    android:paddingLeft="8dp"
    android:textColorHint="@color/colorOrange"
    android:textSize="20sp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/loginUsername" />

<ImageView
    android:id="@+id/password_toggle_img"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="15dp"
    android:layout_marginEnd="12dp"
    android:layout_marginRight="12dp"
    app:layout_constraintBottom_toBottomOf="@id/loginPassword"
    app:layout_constraintEnd_toEndOf="@+id/loginPassword"
    app:layout_constraintTop_toTopOf="@+id/loginPassword"
    app:layout_constraintVertical_bias="0.0"
    app:srcCompat="@drawable/ic_baseline_visibility_24"
    tools:ignore="VectorDrawableCompat" />