使用显示密码按钮设计密码文本答案

【问题标题】：Designing password text with show password button使用显示密码按钮设计密码文本
【发布时间】：2016-08-22 14:00:44
【问题描述】：

我正在尝试使用显示密码 imageView 为密码设计 EditText。但是我无法正确设计它，因为我看不到ImageView，因为EditText's layout_width="fill_parent"。当我将其更改为wrap_content 时，我可以看到我的ImageView，但它在 UI 中看起来很糟糕。是否可以在不给出固定尺寸的情况下进行设计？

这是我的代码；

        <android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="8dp"
            android:orientation="horizontal"
            android:layout_marginBottom="8dp">

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="horizontal">

            <EditText
                android:id="@+id/registerPassword"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:hint="@string/register_password"
                android:inputType="textPassword" />
            <ImageView
                android:id="@+id/fragment_login_password_visibility"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:src="@android:drawable/ic_partial_secure"
                android:layout_gravity="center"
                android:clickable="true"/>

            </LinearLayout>
        </android.support.design.widget.TextInputLayout>

编辑：

android:layout_weight=1 已解决问题。现在我可以看到 EditText 左侧的 ImageView。但是现在，我的 TextInputLayout 提示不起作用。

【问题讨论】：

最新的支持库内置了对密码切换的支持。 developer.android.com/topic/libraries/support-library/…

标签： android xml android-edittext imageview

【解决方案1】：

你不需要使用 ImageView。

支持库在 recent update 中添加了对密码可见性切换的支持（修订版 24.2.0 - 2016 年 8 月）。

试试看：

setPasswordVisibilityToggleDrawable(int resId)

设置用于密码可见性切换按钮的图标。

https://developer.android.com/reference/android/support/design/widget/TextInputLayout.html

【讨论】：

【解决方案2】：

首先将LinearLayout 中的android:weightSum 设置为“1”。然后，将EditText的android:layout_width和android:layout_weight分别设置为“0dp”和“1”。

【讨论】：

请查看我的编辑，更改后提示不适用于密码字段
这些更改与EditText 提示无关。
啊哈，那是因为 LinearLayout。是否可以使用其他选项而不是线性布局水平方向？
是的，您可以使用RelativeLayout，并将ImageView 对齐到EditText 的右侧。谷歌它的用法示例。
尝试使用TextInputEditText 而不是EditText。用法示例见此处：developer.android.com/reference/android/support/design/widget/…

【解决方案3】：

你尝试过使用重量吗？

android:layout_weight="1"

和

android:layout_width="0dp" 或 android:layout_width="wrap_content"

   <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:orientation="horizontal"
        android:layout_marginBottom="8dp">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="horizontal">

        <EditText
            android:id="@+id/registerPassword"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:hint="@string/register_password"
            android:inputType="textPassword" />

        <ImageView
            android:id="@+id/fragment_login_password_visibility"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:src="@android:drawable/ic_partial_secure"
            android:layout_gravity="center"
            android:clickable="true"/>

        </LinearLayout>
    </android.support.design.widget.TextInputLayout>

【讨论】：

layout_weight 解决了这个问题，但是现在我失去了 TextInputLayout 属性...

【解决方案4】：

试试这个：

 <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <EditText
                android:id="@+id/editText"
                android:layout_weight="1"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:hint="Password"
                android:singleLine="true"
                android:textSize="25sp"
                android:paddingRight="60dp"
                />
            <ImageButton
                android:id="@+id/showpass"
                android:layout_marginLeft="-60dp"
                style="?android:buttonBarButtonStyle"
                android:paddingBottom="5dp"
                android:src="@drawable/pass_ic"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>

【讨论】：

【解决方案5】：

我建议使用 TextInputLayout 和 passwordToggleDrawable 。

  <android.support.design.widget.TextInputLayout
            android:id="@+id/textInputPasswordLayout"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            app:passwordToggleContentDescription="Show" 
            app:passwordToggleDrawable="@drawable/ic_password_visibility_selector"
            app:passwordToggleEnabled="true">

            <android.support.design.widget.TextInputEditText
                android:id="@+id/textInputEditTextPassword"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:ems="10"
                android:fontFamily="sans-serif-light"
                android:gravity="bottom"
                android:hint="@string/enter_your_password"/>


        </android.support.design.widget.TextInputLayout>

app:passwordToggleDrawable="@drawable/ic_password_visibility_selector" 分配你的drawable

【讨论】：