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>

- Pranav

---

你为什么把EditText放在android.support.design.widget.TextInputLayout中？ - Coas Mckey

我猜他想显示一个提示。但是... hint xml标签不起作用吗？ - Mauker

因为我想为那个EditText使用浮动提示。 - Pranav

@Mauker，如您所见，没有提示标签可以像图像提示一样工作，但它会重叠EditText边框...那么有没有办法在提示和EditText之间提供垂直距离？ - Pranav

@parnav，请阅读我的更新答案，其中包含如何显示错误信息，这在出现不正确的情况下可能也会有用。 - Coas Mckey

Answer 1

ganesh2shiv提出的解决方案大部分情况下可行，但我发现当EditText未聚焦时，它也会使提示文本偏心。

一个更好的技巧是将期望的paddingTop设置为EditText，同时将额外的填充嵌入到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>

- Radu Topor

---

这应该是正确的答案。@ganesh2shiv的答案可以裁剪EditText的背景。 - Bronx

当我们添加 android:top 时，我们创建了一个顶部插入，即边框线与编辑文本顶部之间的空间。因此，边框将位于编辑文本顶部以下。这就是为什么我们使用 android:paddingTop 来补偿捐赠的空间。此答案已锁定！ - Edijae Crusar

对于可能出现错误的人：请从背景标识符中删除“.xml”。 - StevenTB

谢谢，它对我有用，我只是给背景盒子添加了填充。 - Dildarkhan Pathan

请注意，为了实现默认高度和垂直居中的输入文本，您必须对EditText使用x2填充。因此，如果您的可绘制顶部填充为16dp，则EditText填充必须为32dp。 - fHate

Answer 2

我自己也在过去几天里一直在寻找这个问题的解决办法。在折磨了几个小时后，我终于找到了一个简单的解决方法。我注意到如果您在EditText上设置了自定义背景，则android：paddingTop属性根本无法改变提示文本和编辑文本之间的间距 （我真的不知道为什么）。因此，如果您已将自定义背景设置为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编写的答案，这是迄今为止对这个问题最好和最清洁的解决方案。谢谢。

- Ganesh Mohan

---

它影响了在EditText中设置的背景布局。 - Vicky

我只需要一个小推动，你的解决方案（使用5dp）很好地解决了问题。 - Mofe Ejegi

非常感谢，需要 paddingBottom。 - iftach barshem

这个解决方案对我也起作用了，但它确实会像你已经提到的那样在底部切掉一点。 - Parmendra Singh

Answer 3

我尝试了填充的更改，但效果不佳。

一个简单的解决方法是改变TIL的高度:

android:layout_height="wrap_content"

例如，对于 (e.g.)

android:layout_height="50dp"

在所有屏幕尺寸上可能不会产生相同的结果。

并添加

android:gravity="bottom" 

将您的文本向下推。

- axd

---

这可能在所有屏幕尺寸上都不会产生相同的结果，这就是为什么这个想法不好的原因。 - Ojonugwa Jude Ochalifu

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回答）：

之后：

- Chandler

Answer 5

在多次尝试后，我找到了另一种解决方案（材料版本为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>

这两行代码设置了标题/提示视图在展开状态下相对于折叠状态的垂直偏移量：

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

这两行代码是用来设置文本与下划线之间的间距的：

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

去除背景色问题的那行代码：

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

这两行代码用于去除标准水平内边距。

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

- Andrei K

Answer 6

为了禁用底部线条剪切效果，我使用了margins、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>

- Pavel Poley

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

这个实现非常简单和愚蠢，你可以大大改进它。

- P. Sukharev

---

对我来说很有效。 - Ahamadullah Saikat

Answer 8

<?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>

- Dinesh Bagvan

Answer 9

在我的项目中，我为了在EditText和提示之间获得足够的空间而做了以下操作：

<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>

- Arjun

Answer 10

如果您想在焦点状态下将android:hint的填充设置为0，请将app:boxCollapsedPaddingTop="0dp"添加到您的TextInputLayout中。

- Erkan