帶有不同浮動標籤和佔位符的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>