TextInputLayout :如何给提示填充或边距?
TextInputLayout :How to give padding or margin to hint?
我必须在我的项目中使用 TextInputLayout
设计支持库。我想在 TextInputLayout
中 hint
和 EditText
之间给出 space。我在 TextInputLayout
甚至 EditText
中设置了 margin 和 padding 但两者都不是 work.So 如何解决这个问题。在这里我附上屏幕截图和我的编码。
==============================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>
我认为你应该考虑一下:
设计库采用了一种有趣的方法来自定义 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);
我自己最近几天一直在寻找这个问题的解决方案。在苦苦思索了几个小时之后,我终于找到了一个简单的解决方法。我注意到 如果您在 EditText 上设置了自定义背景,则 android:paddingTop 简单属性无法改变间距 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 编写的 ,它是迄今为止针对此问题的最佳且干净的解决方案。谢谢
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>
我尝试了填充更改,但效果不佳。
一个简单的解决方法是更改 TIL 的高度:
android:layout_height="wrap_content"
到(例如)
android:layout_height="50dp"
它可能不会在所有屏幕尺寸上给出相同的结果。
并添加
android:gravity="bottom"
将您的文字下推。
我做了一个特殊的class,目的是在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();
}
}
这个实现非常简单和愚蠢,你可以改进它。
@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 回答):
之后:
只需添加到您的 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 的高度
为了禁用底线切割效果,我使用了边距、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>
如果要求在光标和提示之间添加space那么你可以尝试
editTextComment.setHint(" "+getString(R.string.add_a_comment));
这就是我在我的项目中所做的,以便在 edittext 和 hint
之间获得足够的 space
<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>
这是一个迟到的答案,但希望它能有所帮助,而且我认为它是一个更好的解决方案。与其为您的 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>
<?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>
只需使用 padding-bottom
<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>
布局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>
styles.xml
<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>
我认为使用修复大小比您认为的要简单,只要您出于任何原因不需要使用 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 space 来放置你想要的提示标签,玩 layout_marginTop
属性.
经过多次尝试,我找到了另一种解决方案(material 版本 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>
这两行设置 title/hint 展开状态下视图相对于折叠状态的垂直偏移:
<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>
您可以使用 startIconDrawable
到 TextInputLayout
并确保您设置了一些虚拟透明图标(图标宽度将是填充起始值)。这样你就可以从一开始就得到填充。
注意:这是 hack,不是直接的解决方案
我必须在我的项目中使用 TextInputLayout
设计支持库。我想在 TextInputLayout
中 hint
和 EditText
之间给出 space。我在 TextInputLayout
甚至 EditText
中设置了 margin 和 padding 但两者都不是 work.So 如何解决这个问题。在这里我附上屏幕截图和我的编码。
==============================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>
我认为你应该考虑一下:
设计库采用了一种有趣的方法来自定义 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);
我自己最近几天一直在寻找这个问题的解决方案。在苦苦思索了几个小时之后,我终于找到了一个简单的解决方法。我注意到 如果您在 EditText 上设置了自定义背景,则 android:paddingTop 简单属性无法改变间距 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 编写的
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>
我尝试了填充更改,但效果不佳。
一个简单的解决方法是更改 TIL 的高度:
android:layout_height="wrap_content"
到(例如)
android:layout_height="50dp"
它可能不会在所有屏幕尺寸上给出相同的结果。
并添加
android:gravity="bottom"
将您的文字下推。
我做了一个特殊的class,目的是在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();
}
}
这个实现非常简单和愚蠢,你可以改进它。
@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 回答):
之后:
只需添加到您的 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 的高度
为了禁用底线切割效果,我使用了边距、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>
如果要求在光标和提示之间添加space那么你可以尝试
editTextComment.setHint(" "+getString(R.string.add_a_comment));
这就是我在我的项目中所做的,以便在 edittext 和 hint
之间获得足够的 space<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>
这是一个迟到的答案,但希望它能有所帮助,而且我认为它是一个更好的解决方案。与其为您的 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>
<?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>
只需使用 padding-bottom
<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>
布局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>
styles.xml
<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>
我认为使用修复大小比您认为的要简单,只要您出于任何原因不需要使用 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 space 来放置你想要的提示标签,玩 layout_marginTop
属性.
经过多次尝试,我找到了另一种解决方案(material 版本 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>
这两行设置 title/hint 展开状态下视图相对于折叠状态的垂直偏移:
<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>
您可以使用 startIconDrawable
到 TextInputLayout
并确保您设置了一些虚拟透明图标(图标宽度将是填充起始值)。这样你就可以从一开始就得到填充。
注意:这是 hack,不是直接的解决方案