安卓TextInputLayout的提示重叠了EditText的提示。

15

我遇到了一个奇怪的问题,我有一个InputTextLayout和其中的EditText,并且我试图实现像这样的功能(如下图所示)(图片来自Material Design指南:https://material.io/guidelines/components/text-fields.html#text-fields-layout),其中有两个单独的提示。我通过向两个布局添加android:hint来做到这一点。这很好用,但是当焦点移开时,“标签”会向下移动并重叠“占位符”文本。(仅在用户没有给出任何输入且编辑文本为空时,两个提示都会重叠)。有什么方法可以解决这个问题吗?

作为需求,我需要保留两个提示,并且“标签”在焦点更改时不应该向下移动。 两个提示应该保持在它们的位置上。

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

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Placeholder"
            android:inputType="textCapWords"
            />

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

输入图像描述


从AppCompatEditText中删除提示 - nitinkumarp
从AppcompatEditText或TextInputLayout中删除提示。你想保留哪一个,它将作为你的提示。 - Pallavi Tapkir
@PallaviTapkir,那样做是可以的,但作为要求,我需要两个提示都在那里,并且其中一个在焦点移动时应该隐藏。或者如果有任何方法,“标签”不应该向下移动。 - Himanshu Chhabra
8个回答

22

enter image description here现在Material组件(alpha03)支持占位文本:

  dependencies {
    // ...
    implementation 'com.google.android.material:material:1.2.0-alpha03'
    // ...
  }

  <com.google.android.material.textfield.TextInputLayout
      ...
      app:placeholderText="Placeholder text">

9

完美万岁!!!

在这里输入图片描述

XML代码

<android.support.design.widget.TextInputLayout
        android:id="@+id/inputLayoutPhone"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:hint="Phone Number">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/edtPhone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="+91"
            android:inputType="phone" />
</android.support.design.widget.TextInputLayout>

Kotlin 代码

 edtPhone.hint=""
 edtPhone.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
        inputLayoutPhone.isHintEnabled = hasFocus
        if(hasFocus){
            edtPhone.hint="+91"
        }else{
            edtPhone.hint= "Phone Number"
        }
    }

Java 代码

edtPhone.setHint("");
    edtPhone.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean hasFocus) {
            if (hasFocus){
                edtPhone.setHint("+91");
            }else{
                edtPhone.setHint("Phone Number");
            }

        }
    });

1
据我所知,我们不能按照您的愿望进行操作。因为TextInputLayout是设计为在获得焦点后浮动提示,一旦上移,占位符中就不会有任何内容。我们可以通过以下微小变化来满足您的要求。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    tools:context="com.stackoverflow.MainActivity">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:text="Label"
        android:textColor="@color/colorPrimary" />

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:paddingLeft="10dp"
        app:hintEnabled="false">

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            android:hint="Place Holder"
            />

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

</RelativeLayout>

enter image description here.


这不是一个解决方案。 - Mycoola

0
请使用以下代码。它应该能正常工作。
<android.support.design.widget.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="8dp"
            android:layout_marginTop="8dp"
            android:textColorHint="@color/white">

            <EditText

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Placeholder"
                android:inputType="text"
                android:textColor="@color/white"
                android:textColorHint="@color/white" />
        </android.support.design.widget.TextInputLayout>

0

AppcompatEditTextTextInputLayout中删除提示

只在AppcompatEditTextTextInputLayout中使用android:hint=""

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

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Placeholder"
        android:inputType="textCapWords"
        />

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

欲了解更多信息,请查看此链接


0

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

        <android.support.v7.widget.AppCompatEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
           
            android:inputType="textCapWords"
            />

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


0

-1
尝试为AppCompatEditText和TextInputLayout分别设置提示:

XML代码:

<android.support.design.widget.TextInputLayout
            android:id="@+id/inputLayoutPhone"
        ...>

        <android.support.design.widget.TextInputEditText
            android:id="@+id/edtPhone"
            ... />
</android.support.design.widget.TextInputLayout>

Kotlin 代码:

inputLayoutPhone.setHint("Label")
edtPhone.setHint("Placeholder")

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接