14

我面临一个奇怪的问题，我有一个 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>

在此处输入图像描述

4

8 回答 8

19

在此处输入图像描述现在材质组件 (alpha03) 支持占位符文本：

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

  <com.google.android.material.textfield.TextInputLayout
      ...
      app:placeholderText="Placeholder text">
于 2020-01-17T11:11:54.470 回答
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>

科特林代码 

 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");
            }

        }
    });
于 2017-12-15T15:52:35.670 回答
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>

于 2017-08-02T06:58:57.393 回答
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="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>

在此处输入图像描述.

于 2017-08-02T07:28:47.773 回答
0

删除提示AppcompatEditText或TextInputLayout

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>

有关更多信息，请查看此链接

于 2017-08-02T07:04:23.430 回答
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>
于 2017-08-02T07:03:01.903 回答
0

对我来说，我发现的最佳解决方案在https://stackoverflow.com/a/69261116/4024146中得到了回答

于 2021-08-24T20:35:33.187 回答
-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>

科特林代码：

inputLayoutPhone.setHint("Label")
edtPhone.setHint("Placeholder")
于 2019-10-03T06:39:21.893 回答