Android EditText具有不同的浮动标签和占位符

时间:2017-05-24 16:41:44

标签: android material-design

如何创建看起来像这样的editText?

Edit Text with placeholder and label

7 个答案:

答案 0 :(得分:16)

您可以使用TextInputLayoutEditText执行此操作。

这是您的XML:

<android.support.design.widget.TextInputLayout
    android:id="@+id/text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:hint="Label">

    <EditText
        android:id="@+id/edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="text" />

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

1。将属性android:hint="Label"添加到TextInputLayout以始终显示其提示Label

2。仅在EditText获得焦点时以编程方式设置Placeholder提示EditText

在您的活动中添加以下行:

    .........
    .................

    final EditText editText = (EditText) findViewById(R.id.edit_text);

    editText.setOnFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View view, boolean hasFocus) {
            if (hasFocus) {
                editText.setHint("Placeholder");
            } else {
                editText.setHint("");
            }
        }
    });

    .........
    ..................

<强>输出:

enter image description here

希望这会有所帮助〜

答案 1 :(得分:4)

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

    <android.support.design.widget.TextInputEditText
        android:hint="Placeholder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress" />

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

请注意,android:hint="Placeholder"的{​​{1}}与TextInputEditText android:hint="Label"同时可见TextInputLayout。您可以在Java代码中进行一些额外的检查以显示和隐藏该标签。或者从android:hint="Placeholder"离开TextInputLayout

要更改颜色,您需要使用android:theme="@style/TextLabelTextInputLayout设置主题并设置颜色重音。

<style name="TextLabel" parent="TextAppearance.AppCompat.Light">
   <item name="colorAccent">@color/yourColor</item>
</style>

答案 2 :(得分:2)

您可以使用以下代码(在kotlin中)。它将在延迟200 ms后显示占位符(以避免重叠提示和占位符)。

class PlaceholderEditText : TextInputEditText {

    constructor(context: Context) : super(context)
    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)
    constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr)

    private val placeholder = hint

    init {
        hint = ""
        onFocusChangeListener = OnFocusChangeListener { _, hasFocus ->
            if (hasFocus) {
                postDelayed({ hint = placeholder }, 200)
            } else {
                hint = ""
            }
        }
    }
}

然后在布局xml类中:

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

        <com.myapp.widget.PlaceholderEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="DISAPPEARING PLACEHOLDER" />

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

答案 3 :(得分:2)

使用材料成分库,您可以使用:

  • app:placeholderText :在EditText中添加占位符文本
  • android:hint :添加浮动标签

他们可以一起工作:

<com.google.android.material.textfield.TextInputLayout
        android:hint="Label"
        app:placeholderText="Placeholder Text"

enter image description here

注意:它至少需要版本 1.2.0-alpha03

答案 4 :(得分:0)

您可以使用以下布局xml文件,如下所示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
    android:text="Label"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/textView2"
    android:textColor="@color/wallet_holo_blue_light" />
<EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textPersonName"
    android:text="Name"
    android:ems="10"
    android:id="@+id/editText2"
    android:hint="Placeholder" />
    </LinearLayout>

答案 5 :(得分:0)

如果你使用textinputlayout然后在edittext的焦点上,你没有得到任何占位符。

<强>布局:

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

    <EditText
        android:id="@+id/username_txt"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

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

您必须设置edittext的焦点更改侦听器。

<强>爪哇:

usernameTxt.setOnFocusChangeListener(new View.OnFocusChangeListener() {
    @Override
    public void onFocusChange(View v, boolean hasFocus) {
        if (hasFocus) {
            usernameTxt.setHint("Label");
        } else {
            usernameTxt.setHint("Placeholder");
        }
    }
});

答案 6 :(得分:0)

给予:一个TextInputEditText嵌套在TextInputLayout中!

TL; DR!:使用此Kotlin扩展功能

fun EditText.setHintAndLabel(
        textInputLayout: TextInputLayout,
        label: String?, // hint in the TextInputLayout
        hint: String? // hint in the EditText
) {
    this.hint = ""
    textInputLayout.hint = label

    this.onFocusChangeListener = View.OnFocusChangeListener { _, hasFocus ->
        if (hasFocus) {
            this.hint = hint ?: ""
        } else {
            this.hint = ""
        }
    }
}

有什么问题以及如何解决?

问题是如果EditText中有提示,TextInputLayout的提示就会重叠。在这种情况下要显示哪一个?好问题:我们只希望EditText的提示在焦点对准/光标在里面时显示,而TextInputLayout的提示始终显示。

⮑因此,我们仅在EditText有焦点时设置提示,一旦失去焦点就将其删除