Android TextInputLayout提示重叠EditText提示

时间:2017-08-02 06:56:03

标签: android android-layout android-edittext android-textinputlayout textinputlayout

我面临一个奇怪的问题,我有一个InputTextLayout和一个EditText,我正在努力实现这样的事情(如下图所示)(图片来自材料设计指南: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>

enter image description here

6 个答案:

答案 0 :(得分:3)

完美的一个!!!

enter image description here

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 :(得分:0)

&#13;
&#13;
    <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>
&#13;
&#13;
&#13;

答案 2 :(得分: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>

答案 3 :(得分:0)

AppcompatEditTextTextInputLayout

中删除提示

仅在android:hint=""AppcompatEditText

中使用TextInputLayout
 <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>

了解更多信息 check this link

答案 4 :(得分:0)

据我所知,我们无法按照您的意愿行事。

因为,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="Lable"
        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

答案 5 :(得分:0)

尝试分别为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>

科特琳代码:

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