TextInputLayout：如何給填充或邊距提示？

Question

我必須在我的項目中使用設計支持庫的TextInputLayout 。 我想在TextInputLayout中的hint和EditText之間留出空間。 我在TextInputLayout甚至在EditText中設置了邊距和填充，但兩者都不起作用。那么如何解決這個問題。 在這里我附上屏幕截圖和我的編碼。

==============================Style=================================

<style name="TextHint" parent="Base.TextAppearance.AppCompat">
    <item name="android:textSize">18sp</item>
    <item name="android:textColor">@color/green</item>
</style>



=============================XML===================================  
<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    app:hintTextAppearance="@style/TextHint"
    android:layout_marginTop="10dp"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_height="wrap_content">
<EditText
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:id="@+id/edttxtEmailAddress"
    android:singleLine="true"
    android:hint="@string/enter_valid_email"
    android:paddingLeft="20dp"
    android:textSize="20sp"
    android:background="@drawable/rounded_common"/>
</android.support.design.widget.TextInputLayout>

Answer 1

ganesh2shiv 提出的解決方案在大多數情況下都有效，盡管我發現它也會在未聚焦時使 EditText 內顯示的提示文本分散。

一個更好的技巧是將所需的paddingTop設置為 EditText，但也將額外的 padding 嵌入到 EditText 的背景中。 一個相當明智的方法是將原始背景包裝在<layer-list>並設置<item android:top="...">屬性以匹配 EditText 的paddingTop 。

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

  <EditText
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="@dimen/floating_hint_margin"
    android:background="@drawable/bg_edit_text" />
</android.support.design.widget.TextInputLayout>

和bg_edit_text.xml可繪制文件：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

Answer 2

我自己最近幾天一直在尋找這個問題的解決方案。 在撕掉我的頭發幾個小時后，我終於找到了一個簡單的解決方法。 我注意到的是，如果您在 EditText 上設置了自定義背景，則 android:paddingTop 屬性 simple 無法改變提示文本和編輯文本的間距（我真的不知道為什么）。 因此，如果您為 EditText 設置了自定義背景，則可以在 EditText中使用 android:translationY 屬性。

所以這是你的解決方案：

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="30dp"
    android:layout_marginRight="30dp"
    android:layout_marginTop="10dp"
    app:hintTextAppearance="@style/TextHint">

    <EditText
        android:id="@+id/edttxtEmailAddress"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@drawable/rounded_common"
        android:hint="@string/enter_valid_email"
        android:paddingLeft="20dp"

        android:translationY="10dp" 

        android:singleLine="true"
        android:textSize="20sp" />
</android.support.design.widget.TextInputLayout>

希望能幫助到你。 :)

---

更新：對於更新晚了，我表示最誠摯的歉意。 我最近真的很忙。 如果你還沒有意識到，讓我告訴你這個答案是直接的丑陋和錯誤的。 回想起來，我想我寫它的時候可能喝醉了。 正如其他人所提到的，它可能會削減 editText 背景的底部區域，但它也有一個丑陋的修復 - 您可以將（父）textInputLayout 的高度設置得稍大一些（多大？您應該通過試用和錯誤，糟糕！）比（子）editText。 我希望你們都意識到這會很瘋狂，所以請不要這樣做。 查看@Radu Topor 所寫的答案，它是迄今為止這個問題最好、最干凈的解決方案。 謝謝。

Answer 3

我嘗試了填充更改，但效果不佳。

一個簡單的解決方法是更改 TIL 的高度：

android:layout_height="wrap_content"

到（例如）

android:layout_height="50dp"

它可能不會在所有屏幕尺寸上給出相同的結果。

並添加

android:gravity="bottom" 

把你的文字推下來。

Answer 4

@RaduTopor 的回答很好，但我認為我們還需要添加 android:bottom 否則它也會在未聚焦時使 EditText 內顯示的提示文本分散

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:top="@dimen/floating_hint_margin" android:bottom="@dimen/floating_hint_margin">
    <your original background; can be <bitmap> or <shape> or whatever./>
  </item>
</layer-list>

之前（RaduTopor 回答）：

后：

Answer 5

為了禁用底線切割效果，我使用了邊距、translationY 和 clipChildren="false"

<android.support.design.widget.TextInputLayout
        android:id="@+id/textinput"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="16dp"
        android:layout_marginTop="8dp"
        android:clipChildren="false">

        <android.support.design.widget.TextInputEditText
            android:id="@+id/et_profile_contact_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="3dp"
            android:background="@drawable/image_back"
            android:hint="Contact name"
            android:padding="5dp"
            android:translationY="3dp" />
    </android.support.design.widget.TextInputLayout>

Answer 6

經過多次嘗試，我找到了另一種解決方案（材料版本 1.2.1）：

這是布局示例：

  <com.google.android.material.textfield.TextInputLayout
            android:id="@+id/textInputLayout"
            style="@style/CustomTextInputLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
    
            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/textInputEditText"
                style="@style/CustomTextInputEditText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="@string/hint" />

  </com.google.android.material.textfield.TextInputLayout>

這是樣式示例：

 <style name="CustomTextInputLayout">
        <item name="boxCollapsedPaddingTop">-16dp</item>
        <item name="android:paddingTop">16dp</item>
        <item name="boxBackgroundColor">@color/backgroundColorWhite</item>
        <item name="android:textColorHint">...</item>
        <item name="android:textAppearance">...</item>
        <item name="hintTextAppearance">...</item>
        <item name="hintTextColor">...</item>
        <item name="boxStrokeColor">...</item>
    </style>

    <style name="CustomTextInputEditText">
        <item name="android:textAppearance">...</item>
        <item name="android:paddingTop">@dimen/margin_12</item>
        <item name="android:paddingBottom">@dimen/margin_12</item>
        <item name="android:paddingStart">0dp</item>
        <item name="android:paddingEnd">0dp</item>
    </style>

這 2 行設置了處於展開狀態而不是折疊狀態的標題/提示視圖的垂直偏移：

  <item name="boxCollapsedPaddingTop">-16dp</item>
  <item name="android:paddingTop">16dp</item>
 

這 2 行 - 用於文本和下划線之間的邊距：

  <item name="android:paddingTop">@dimen/margin_12</item>
  <item name="android:paddingBottom">@dimen/margin_12</item>

那條線 - 用於消除背景色調錯誤：

 <item name="boxBackgroundColor">@color/backgroundColorWhite</item>

這 2 行 - 用於刪除標准的水平填充

 <item name="android:paddingStart">0dp</item>
 <item name="android:paddingEnd">0dp</item>

Answer 7

我創建了一個特殊的類，目的是在 EditText 上方添加空視圖，從而為提示添加填充。 您可以將其用作簡單的 TextInputLayout。

public class PaddingTextInputLayout extends TextInputLayout {

public View paddingView;

public PaddingTextInputLayout(Context context) {
    super(context);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs) {
    super(context, attrs);
}

public PaddingTextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
}

@Override
public void addView(View child, int index, ViewGroup.LayoutParams params) {
    super.addView(child, index, params);
    refreshPaddingView();
}

public void addPaddingView(){
    paddingView = new View(getContext());
    int height = (int) getContext().getResources()
            .getDimension(R.dimen.edittext_text_input_layout_padding);
    ViewGroup.LayoutParams paddingParams = new ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            height);
    super.addView(paddingView, 0, paddingParams);
}

public void refreshPaddingView(){
    if (paddingView != null) {
        removeView(paddingView);
        paddingView = null;
    }
    addPaddingView();
}
}

這個實現非常簡單和愚蠢，你可以改進很多。

Answer 8

這就是我在我的項目中為獲得足夠的編輯文本和提示之間的空間所做的

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_full_name"
    android:layout_width="match_parent"
    android:layout_height="60dp"
    android:layout_marginStart="40dp"
    android:layout_marginEnd="40dp"
    android:layout_marginTop="30dp"
    android:gravity="bottom"
    android:textColorHint="#fff"
    app:layout_constraintTop_toBottomOf="@+id/welcome_til_email">

    <android.support.v7.widget.AppCompatEditText
        android:id="@+id/et_name"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="#9a050505"
        android:hint="You email"
        android:inputType="textCapWords"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:singleLine="true"
        android:textAppearance="?android:textAppearanceSmall"
        android:textColor="#fff"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.design.widget.TextInputLayout>

Answer 9

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp"
          android:bottom="5dp">
        <shape>
            <!-- Background Color -->
            <solid android:color="#f1f1f1"/>
            <!-- Round Corners -->
            <corners android:radius="5dp"/>
        </shape>
    </item>
</layer-list>

<style name="text_input_edit_text_without_border_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">55dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:paddingBottom">5dp</item>
    <item name="android:gravity">left|center_vertical</item>
    <item name="android:paddingLeft">8dp</item>
    <item name="android:paddingRight">8dp</item>
    <item name="android:maxLines">1</item>
    <item name="android:singleLine">true</item>
    <item name="android:imeOptions">actionNext</item>
    <item name="android:textSize">@dimen/text_size_large</item>
    <item name="android:background">@drawable/bg_without_border_with_padding_top</item>
</style>

<style name="text_input_layout_style">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginBottom">@dimen/margin_medium</item>
</style>

Answer 10

只需添加到您的 EditText 自定義背景

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
        <shape android:shape="rectangle">
            <padding
                android:top="4dp"/> // your padding value
        </shape>
    </item>
// customize your background items if you need
</layer-list>
<android.support.design.widget.TextInputLayout
 ...>
    <android.support.design.widget.TextInputEditText
        ...
        android:background="@style/your_custom_background"/>

然后將其應用於您的 EditText 並使用您的填充值增加 EditText 的高度（如果您使用固定高度）

Answer 11

這是一個遲到的答案，但希望它有所幫助，我認為它是一個更好的解決方案。 editText為您的editText提供背景， editText為您的TextInputLayout該背景。 並將edittext布局設置為透明。

<android.support.design.widget.TextInputLayout
                android:id="@+id/tinput_phone"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:layout_marginBottom="05dp"
                android:background="@drawable/send_email_screen_element_bg"
                android:padding="05dp"
                android:theme="@style/grey_control_style">

                <android.support.v7.widget.AppCompatEditText
                    android:id="@+id/edt_phone"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:background="@android:color/transparent"
                    android:ems="10"
                    android:hint="@string/phone_hint_str"
                    android:inputType="text"
                    android:paddingStart="10dp"
                    android:paddingTop="10dp"
                    android:paddingBottom="10dp"
                    android:singleLine="true"
                    android:textColor="@color/black"
                    android:textSize="14sp" />
            </android.support.design.widget.TextInputLayout>

Answer 12

如果要求在光標和提示之間添加空格，那么您可以嘗試

editTextComment.setHint("  "+getString(R.string.add_a_comment));

Answer 13

只需使用填充底部

<com.google.android.material.textfield.TextInputLayout



             app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                >

                <com.google.android.material.textfield.TextInputEditText

                   ....
                    android:paddingBottom="@dimen/dp_25"
...
                   />
            </com.google.android.material.textfield.TextInputLayout>

Answer 14

布局xml

<com.google.android.material.textfield.TextInputLayout
    style="@style/TextInputLayout"
    android:layout_marginTop="10dp"
    android:gravity="center"
    android:theme="@style/TextInputLayoutHint">

    <androidx.appcompat.widget.AppCompatEditText
        style="@style/TextInputEditText"
        android:hint="Email ID"
        android:inputType="textEmailAddress"
        android:maxLines="1" />

</com.google.android.material.textfield.TextInputLayout>

樣式文件

<style name="TextInputLayout">
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_marginStart">15dp</item>
    <item name="android:layout_marginLeft">15dp</item>
    <item name="android:layout_marginTop">10dp</item>
    <item name="android:layout_marginEnd">15dp</item>
    <item name="android:layout_marginRight">15dp</item>
</style>

<style name="TextInputLayoutHint" parent="">
    <item name="android:textColorHint">@color/colorHintNormal</item>
    <item name="colorControlActivated">@color/colorOrange</item>
    <item name="android:textSize">11dp</item>
</style>

<style name="TextInputEditText" parent="">
    <item name="android:translationY">10dp</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:layout_height">wrap_content</item>
    <item name="android:background">@null</item>
    <item name="android:paddingBottom">15dp</item>
    <item name="android:textColor">@color/colorBlack</item>
    <item name="android:textColorHint">@color/colorHintActive</item>
    <item name="android:textSize">13sp</item>
</style>    

Answer 15

我認為使用修復大小比您認為的更簡單， wrap_content是您不需要出於任何原因使用wrap_content ，否則接受的方法似乎可以正常工作。

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:gravity="bottom">

            <EditText
                android:layout_width="match_parent"
                android:layout_height="40dp"
                android:layout_marginTop="10dp"/>

        </com.google.android.material.textfield.TextInputLayout>

按照這個例子，你有一個 20dp 的空間來放置你想要的提示標簽，使用layout_marginTop屬性。

Answer 16

您可以將startIconDrawable用於TextInputLayout並確保設置了一些虛擬透明圖標（圖標寬度將是填充起始值）。 這樣你就會從一開始就得到填充。 注意：這是一個hack，不是直接的解決方案

Answer 17

如果您想在焦點android:hint padding 設置為 0，請將app:boxCollapsedPaddingTop="0dp"添加到您的TextInputLayout 。

Answer 18

您可以僅在 TextInputLayout 樣式中嘗試此解決方案和 editTextStyle。 例如：

<com.google.android.material.textfield.TextInputLayout
    ...
    android:layout_width="@dimen/element_width"
    android:layout_height="@dimen/element_height"
    ...
    style="@style/EditTextField.Container"
    ...
    android:hint="@string/you_hint_resource">

    <com.google.android.material.textfield.TextInputEditText
        ...
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        ... />

</com.google.android.material.textfield.TextInputLayout>

在你的風格部分

<style name="EditTextField"/>

<style name="EditTextField.Container" parent="Widget.MaterialComponents.TextInputLayout.FilledBox.Dense">
    <item name="android:textColorHint">@color/edit_text_hint_color</item>
    <item name="hintTextColor">@color/edit_text_hint_color</item>
    <item name="hintTextAppearance">@style/PasswordInput.HintTextAppearance</item>
    <item name="materialThemeOverlay">@style/PasswordInput.MaterialThemeOverlayStyle</item>
</style>

<style name="EditTextField.HintTextAppearance">
    <item name="android:paddingBottom">20dp</item>
    <item name="android:paddingTop">10dp</item>
    <item name="android:textSize">12sp</item>
</style>

<style name="EditTextField.MaterialThemeOverlayStyle">
    <item name="editTextStyle">@style/EditTextStyle</item>
</style>

<style name="EditTextStyle" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox.Dense">
    <item name="android:background">@drawable/edittext_body_container</item>
    <item name="android:paddingBottom">@dimen/input_text_bottom_padding</item>
    <item name="android:paddingStart">@dimen/input_text_padding_start</item>
    <item name="android:paddingTop">@dimen/input_text_top_padding</item>
    <item name="android:textCursorDrawable">@drawable/cursor_white_drawable</item>
    <item name="android:textSize">16sp</item>
    <item name="lineHeight">20sp</item>
</style>

Answer 19

我認為你應該考慮這個：

設計庫采用了一種有趣的方法來自定義EditText ：它不直接更改它。 相反， TextInputLayout用於包裝EditText並提供增強功能。

第一個，當用戶在字段中輸入內容時顯示浮動標簽，是自動完成的。 TextInputLayout在其子項中找到EditText並將自身附加為TextWatcher ，因此它能夠確定該字段何時被修改，並將提示從EditText中的常規位置移動到其上方的浮動標簽位置的動畫。

第二個增強功能，顯示錯誤消息，需要對代碼稍作更改。 不應在 EditText 上設置錯誤，而應在TextInputLayout上設置錯誤。 這是因為在EditText上設置錯誤時，沒有自動通知TextInputLayout方法。 布局可能如下所示：

<android.support.design.widget.TextInputLayout
    android:id="@+id/username_text_input_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <EditText
        android:id="@+id/username_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/username_hint"/>
</android.support.design.widget.TextInputLayout>

請注意， EditText和TextInputLayout需要布局 ID。 在片段中，我們需要配置TextInputLayout以啟用顯示錯誤：

TextInputLayout usernameTextInputLayout = (TextInputLayout) view.findViewById(R.id.username_text_input_layout);
usernameTextInputLayout.setErrorEnabled(true);
...
usernameTextInputLayout.setError(R.string.username_required);