TextInputLayout:如何给出填充或边距提示？

Question

我必须TextInputLayout在我的项目中使用设计支持库.我想给之间的空间hint,并EditText在TextInputLayout.我设置了边距和填充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,但也将额外的填充嵌入EditText的背景中.一个相当理智的方法是将原始背景包装在一个<layer-list>并设置<item android:top="...">属性以匹配paddingTopEditText.

<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.xmldrawable文件:

<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不能改变空格b/w提示文本和编辑文本(我真的不知道为什么).因此,如果您已将自定义背景设置为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

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