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

Question

如何创建一个看起来像这样的editText？

Answer 1

您可以如下使用以下布局的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> 

Answer 2

<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"从TextInputEditText在同一时间android:hint="Label"从TextInputLayout时可见视图不集中。你可以在你的java代码中做一些额外的检查来显示和隐藏标签。或者只需从TextInputLayout开始android:hint="Placeholder"。

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

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

Answer 3

如果您在edittext的焦点上使用textinputlayout，那么您没有得到任何占位符。

布局：

<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的焦点变化监听器。

的Java：

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

Answer 4

可以使用TextInputLayout和EditText做到这一点。

这里是你的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> 

添加属性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(""); 
      } 
     } 
    }); 

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

OUTPUT：

希望这将有助于〜

Answer 5

您可以使用下面的代码（在科特林）。它将在延迟200毫秒后显示占位符（以避免重叠提示和占位符）。

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>