在TextInputLayout中显示密码图标并触摸基线

Question

在TextInputLayout中显示密码图标并触摸基线

androidmaterial-design

16

在使用 android:inputType="textPassword" 属性的 TextInputLayout 中，我遇到了一些显示密码图标的问题。现在它显示的效果是这样的

可以看到显示密码图标与基线重叠在一起。我想要像这样的效果

注意它们之间的间隔。

以下是实现 TextInputLayout 的 XML 代码：

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/TextLabelSNA"
    app:layout_constraintTop_toBottomOf="@+id/mailSave"
    app:layout_constraintBottom_toBottomOf="parent"
    android:layout_marginBottom="16dp"
    android:layout_marginTop="16dp"
    android:layout_marginStart="16dp"
    app:layout_constraintLeft_toLeftOf="parent"
    android:layout_marginLeft="16dp"
    android:layout_marginEnd="16dp"
    app:layout_constraintRight_toRightOf="parent"
    android:layout_marginRight="16dp"
    android:id="@+id/tilOp"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintVertical_bias="0.0">
    <EditText
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:inputType="textPassword"
        android:hint="Old Password"
        android:ems="10"
        android:textColor="#0A0B12"
        android:id="@+id/oldPassword"/>
</android.support.design.widget.TextInputLayout>

使用的样式是：

<style name="TextLabelSNA" parent="Widget.Design.TextInputLayout">
    <!-- Hint color and label color in FALSE state -->
    <item name="android:textColorHint">@color/hintBlack</item>
    <item name="android:textSize">16sp</item>
    <!-- Label color in TRUE state and bar color FALSE and TRUE State -->
    <item name="colorAccent">@color/hintBlack</item>
    <item name="colorControlNormal">@color/hintBlack</item>
    <item name="colorControlActivated">@color/hintBlack</item>
</style>

请帮帮我..!!!

- Rahul Sharma

你试过增加字体大小吗？ - JoxTraex

@JoxTraex，将字体大小更改为20sp可以解决问题。但是我有一些限制，不能将大小增加到16sp以上。还有其他的解决方案吗？ - Rahul Sharma

有没有办法添加文本而不是图标？ - deniz baş

6个回答

6

  <android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:passwordToggleEnabled="true">
        <EditText
            android:id="@+id/txtpwd"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="20dp"
            android:drawableLeft="@drawable/lock"
            android:ems="10"
            android:hint="  Password"
            android:imeOptions="actionGo"
            android:inputType="textPassword"
            android:padding="10dp">

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

- RajGanesh

1

这可能是其他人也注意到并报告此处的错误。

- Joao Sousa

感谢澄清。 - Rahul Sharma

实际上，我认为问题出在文本大小上。EditText 的默认文本大小是 18sp。使用这个文本大小时，我认为它看起来很好。如果我将文本大小设置为 15sp，则会出现问题。回想起来，我不认为这是一个 bug，只是 drawable 没有足够的空间。如果即使您没有自己设置文本大小仍然出现这种情况，那么我就不知道问题出在哪里了。 - Joao Sousa

1

请检查您的支持库版本：24.2.0 如果有错误，请升级到版本：24.2.1。

使用此代码。

<android.support.design.widget.TextInputLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <EditText
                    android:id="@+id/password"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:hint="@string/prompt_password"
                    android:imeActionId="@+id/login"
                    android:imeActionLabel="@string/action_sign_in_short"
                    android:text="a1234"
                    android:imeOptions="actionUnspecified"
                    android:inputType="textPassword"
                    android:maxLines="1"
                    android:singleLine="true" />

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

- Pradeep Kumar

图标被裁剪了，可能是因为您的填充和边距部分设置不当。 - Pradeep Kumar

已在我的布局中添加了实际视图。请检查更新后的答案。 - Pradeep Kumar

在您的情况下，活动主题可能会有所不同，请使用Theme.AppCompat.NoActionBar作为父主题。 - Pradeep Kumar

请检查支持库版本。 - Pradeep Kumar

已经是24.2了。实际上这是一个已经报告的错误。 - Rahul Sharma

自从 AndroidX 进行了“重构”，现在使用的类包是“com.google.android.material.textfield.”，而不再是“android.support.design.widget.”。 - Seynorth

0

如果你想移除错误图标 - （以防万一）你可以在TextInputLayout中添加这行代码。

app:errorIconDrawable="@null"

- Himani

-5

在你的Gradle中添加一个库依赖

 dependencies {
    compile 'com.github.scottyab:showhidepasswordedittext:0.8'
}

然后添加远程Maven URL

 allprojects {
    repositories {
        maven {
            url "https://jitpack.io"
        }
    }
}`

最后，在您的xml中添加此内容。它就像普通的EditText一样。

 <com.scottyab.showhidepasswordedittext.ShowHidePasswordEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/simplePassword"
        android:hint="Password"
        />

详情请查看此链接显示/隐藏密码EditText

- Tanvir

3

由于现在已经包含在支持库中，因此不需要再使用这个库。实际上，它已经过时了。请参阅这篇文章：https://medium.com/@moyinoluwa/password-visibility-toggle-android-support-library-revision-24-2-0-98b422087e5a - Micer

此解决方案已被弃用。 - Piotr Badura

这已经被弃用了。 - Rahul Kushwaha

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dieter115 · Accepted Answer

只需在您的TextInputLayout中添加app:passwordToggleEnabled="true"即可。

<android.support.design.widget.TextInputLayout
            app:layout_widthPercent="90%"
            android:layout_height="wrap_content"
            android:hint="@string/password"
            android:textColorHint="@android:color/white"
            app:passwordToggleEnabled="true"
            app:passwordToggleTint="@android:color/white">

            <android.support.v7.widget.AppCompatEditText
                android:id="@+id/et_password"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword"
                android:textColor="@android:color/white"
                android:visibility="gone"
                 />


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