如何禁用 TextInputLayout 上的填充?
How to disable padding on TextInputLayout?
当使用 TextInputLayout
包裹 EditText
时,似乎会自动添加左侧填充,如下面的屏幕截图所示。
布局 XML 中的 EditText
没有添加填充,但是在呈现视图时 EditText
上似乎有左侧填充。在比较 TextInputLayout
.
下面的 TextView
时,您可以看到这一点
如何禁止添加此左填充?
谢谢!
我通过复制 edittext 背景的原始主题
设法删除了剩下的 space
res/drawable/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
res/drawable-v21/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false">
<nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"
android:alpha="?android:attr/disabledAlpha"/>
</item>
<item android:state_pressed="false" android:state_focused="false">
<nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"/>
</item>
<item>
<nine-patch android:src="@drawable/abc_textfield_activated_mtrl_alpha"
android:tint="?attr/colorControlActivated"/>
</item>
</selector>
</inset>
在两个文件中删除:
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
为您的 editText 创建新样式并将其添加为背景
/res/values/styles.xml
<resources>
<!-- Other styles . -->
<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="android:background">@drawable/my_edit_text_material</item>
</style>
</resources>
将样式添加到您的 editText
<android.support.design.widget.TextInputLayout
android:id="@+id/input_layout_lastname"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:textColorHint="@color/Cool_Gray_2_C"
app:layout_constraintEnd_toStartOf="@+id/profile_guideline_end"
app:layout_constraintStart_toStartOf="@+id/profile_guideline_start"
app:layout_constraintTop_toBottomOf="@+id/input_layout_firstname" >
<EditText
style="@style/AppTheme.EditText"
android:id="@+id/txfLastname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/last_name"
android:inputType="textPersonName"
android:textColor="@color/Cool_Gray_2_C"
android:textColorHint="@color/Cool_Gray_2_C"
android:textSize="17sp" />
</android.support.design.widget.TextInputLayout>
这就是我发现删除左右的方法space。
希望能帮到你,谢谢
您可以将内部 EditText 的开始和结束填充设置为 0dp。
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="0dp"
android:paddingEnd="0dp" />
</com.google.android.material.textfield.TextInputLayout>
这是一张启用了 Show Layout Bounds 的屏幕截图,因此您可以看到提示一直延伸到视图的边缘。
EditText默认drawable左右水平space由abc_edit_text_inset_horizontal_material
维度控制。您可以通过查看 abc_edit_text_material.xml
可绘制文件来确认这一点,该文件代表 AppCompat 的默认 EditText 背景。要完全删除 space,您可以通过在您自己项目的 dimens.xml
文件中指定具有完全相同名称的维度来将维度设置为 0:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
...
</resources>
但是,有一个问题。如果主机 OS 不支持 material 设计,AppCompat 库将仅使用它自己的 abc_edit_text_material.xml
背景。因此,如果您 运行 您的应用在 Android 4 上,您会看到在添加上述尺寸后侧边距消失了。但是,如果您在 Android 10 上启动您的应用程序,您会看到边距仍然存在。这是因为在较新的 Android 版本中,compat 库实际上更喜欢在 OS 本身中指定的背景可绘制对象。
因此您需要强制所有 EditText 使用 AppCompat 库中指定的 abc_edit_text_material.xml
背景。幸运的是,您只需在 syles.xml
文件中添加一行即可做到这一点:
styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="editTextBackground">@drawable/abc_edit_text_material</item>
...
</style>
...
</resources>
任何 Theme.AppCompat.*
都可以作为父主题,当然您必须使用此主题作为您应用的主题才能获得任何效果。
此解决方案使用私有 AppCompat 标识符(Android Studio 会抱怨这一点),但我仍然认为此解决方案比使用负边距要干净得多。
随着 TextInputLayout
包含在 Material Components Library 中,您可以使用自定义样式来减少填充。
只需使用类似的东西:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Hint text"
style="@style/My.TextInputLayout.FilledBox.Padding" >
然后您可以使用 materialThemeOverlay
属性为 EditText
定义自定义样式:
<style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">@style/MyThemeOverlayFilledPadding</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="editTextStyle">@style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- left and right padding -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- top and bottom padding -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
这里是最终结果:
注意: 它至少需要 Material 组件库的 1.1.0 版本。
像这样使内边距为 0dp
<com.google.android.material.textfield.TextInputLayout
style="@style/UserTextLayout"
android:layout_height="50dp"
app:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/emailEditText1"
style="@style/UserEditText"
android:layout_width="match_parent"
android:hint="MATRIC NUMBER"
android:inputType="number"
android:maxLines="1"
android:padding="0dp"
android:text="20181766" />
</com.google.android.material.textfield.TextInputLayout>
这是结果
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField_driver_age"
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="0dp"
android:textColorHint="@color/brown_grey"
app:boxBackgroundColor="@color/white"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconMode="none"
app:layout_constraintBottom_toBottomOf="@+id/lable3"
app:layout_constraintStart_toEndOf="@+id/lable3"
app:layout_constraintTop_toTopOf="@+id/lable3">
<AutoCompleteTextView
android:drawablePadding="8dp"
android:drawableEnd="@drawable/ic_email"
android:id="@+id/et_driver_age"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownHeight="250dp"
android:inputType="none"
android:lines="1"
android:padding="0dp"
android:text="30"
android:textColor="@color/greyish_brown"
android:textSize="12sp" />
当使用 TextInputLayout
包裹 EditText
时,似乎会自动添加左侧填充,如下面的屏幕截图所示。
布局 XML 中的 EditText
没有添加填充,但是在呈现视图时 EditText
上似乎有左侧填充。在比较 TextInputLayout
.
TextView
时,您可以看到这一点
如何禁止添加此左填充?
谢谢!
我通过复制 edittext 背景的原始主题
设法删除了剩下的 spaceres/drawable/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material"
android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
<item android:state_pressed="false" android:state_focused="false" android:drawable="@drawable/abc_textfield_default_mtrl_alpha"/>
<item android:drawable="@drawable/abc_textfield_activated_mtrl_alpha"/>
</selector>
</inset>
res/drawable-v21/my_edit_text_material.xml
<?xml version="1.0" encoding="utf-8"?>
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="@dimen/abc_edit_text_inset_top_material"
android:insetBottom="@dimen/abc_edit_text_inset_bottom_material">
<selector>
<item android:state_enabled="false">
<nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"
android:alpha="?android:attr/disabledAlpha"/>
</item>
<item android:state_pressed="false" android:state_focused="false">
<nine-patch android:src="@drawable/abc_textfield_default_mtrl_alpha"
android:tint="?attr/colorControlNormal"/>
</item>
<item>
<nine-patch android:src="@drawable/abc_textfield_activated_mtrl_alpha"
android:tint="?attr/colorControlActivated"/>
</item>
</selector>
</inset>
在两个文件中删除:
android:insetLeft="@dimen/abc_edit_text_inset_horizontal_material" android:insetRight="@dimen/abc_edit_text_inset_horizontal_material"
为您的 editText 创建新样式并将其添加为背景
/res/values/styles.xml
<resources>
<!-- Other styles . -->
<style name="AppTheme.EditText" parent="Widget.AppCompat.EditText">
<item name="android:background">@drawable/my_edit_text_material</item>
</style>
</resources>
将样式添加到您的 editText
<android.support.design.widget.TextInputLayout
android:id="@+id/input_layout_lastname"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:layout_marginLeft="0dp"
android:layout_marginStart="0dp"
android:textColorHint="@color/Cool_Gray_2_C"
app:layout_constraintEnd_toStartOf="@+id/profile_guideline_end"
app:layout_constraintStart_toStartOf="@+id/profile_guideline_start"
app:layout_constraintTop_toBottomOf="@+id/input_layout_firstname" >
<EditText
style="@style/AppTheme.EditText"
android:id="@+id/txfLastname"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ems="10"
android:hint="@string/last_name"
android:inputType="textPersonName"
android:textColor="@color/Cool_Gray_2_C"
android:textColorHint="@color/Cool_Gray_2_C"
android:textSize="17sp" />
</android.support.design.widget.TextInputLayout>
这就是我发现删除左右的方法space。
希望能帮到你,谢谢
您可以将内部 EditText 的开始和结束填充设置为 0dp。
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingStart="0dp"
android:paddingEnd="0dp" />
</com.google.android.material.textfield.TextInputLayout>
这是一张启用了 Show Layout Bounds 的屏幕截图,因此您可以看到提示一直延伸到视图的边缘。
EditText默认drawable左右水平space由abc_edit_text_inset_horizontal_material
维度控制。您可以通过查看 abc_edit_text_material.xml
可绘制文件来确认这一点,该文件代表 AppCompat 的默认 EditText 背景。要完全删除 space,您可以通过在您自己项目的 dimens.xml
文件中指定具有完全相同名称的维度来将维度设置为 0:
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<dimen tools:override="true" name="abc_edit_text_inset_horizontal_material">0dp</dimen>
...
</resources>
但是,有一个问题。如果主机 OS 不支持 material 设计,AppCompat 库将仅使用它自己的 abc_edit_text_material.xml
背景。因此,如果您 运行 您的应用在 Android 4 上,您会看到在添加上述尺寸后侧边距消失了。但是,如果您在 Android 10 上启动您的应用程序,您会看到边距仍然存在。这是因为在较新的 Android 版本中,compat 库实际上更喜欢在 OS 本身中指定的背景可绘制对象。
因此您需要强制所有 EditText 使用 AppCompat 库中指定的 abc_edit_text_material.xml
背景。幸运的是,您只需在 syles.xml
文件中添加一行即可做到这一点:
styles.xml:
<resources xmlns:tools="http://schemas.android.com/tools">
<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
<item name="editTextBackground">@drawable/abc_edit_text_material</item>
...
</style>
...
</resources>
任何 Theme.AppCompat.*
都可以作为父主题,当然您必须使用此主题作为您应用的主题才能获得任何效果。
此解决方案使用私有 AppCompat 标识符(Android Studio 会抱怨这一点),但我仍然认为此解决方案比使用负边距要干净得多。
随着 TextInputLayout
包含在 Material Components Library 中,您可以使用自定义样式来减少填充。
只需使用类似的东西:
<com.google.android.material.textfield.TextInputLayout
....
android:hint="Hint text"
style="@style/My.TextInputLayout.FilledBox.Padding" >
然后您可以使用 materialThemeOverlay
属性为 EditText
定义自定义样式:
<style name="My.TextInputLayout.FilledBox.Padding" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
<item name="materialThemeOverlay">@style/MyThemeOverlayFilledPadding</item>
</style>
<style name="MyThemeOverlayFilledPadding">
<item name="editTextStyle">@style/MyTextInputEditText_filledBox_padding</item>
</style>
<style name="MyTextInputEditText_filledBox_padding" parent="@style/Widget.MaterialComponents.TextInputEditText.FilledBox">
<!-- left and right padding -->
<item name="android:paddingStart" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingEnd" ns2:ignore="NewApi">2dp</item>
<item name="android:paddingLeft">2dp</item>
<item name="android:paddingRight">2dp</item>
<!-- top and bottom padding -->
<item name="android:paddingTop">28dp</item>
<item name="android:paddingBottom">12dp</item>
</style>
这里是最终结果:
注意: 它至少需要 Material 组件库的 1.1.0 版本。
像这样使内边距为 0dp
<com.google.android.material.textfield.TextInputLayout
style="@style/UserTextLayout"
android:layout_height="50dp"
app:boxBackgroundMode="none">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/emailEditText1"
style="@style/UserEditText"
android:layout_width="match_parent"
android:hint="MATRIC NUMBER"
android:inputType="number"
android:maxLines="1"
android:padding="0dp"
android:text="20181766" />
</com.google.android.material.textfield.TextInputLayout>
这是结果
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/textField_driver_age"
style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.ExposedDropdownMenu"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:padding="0dp"
android:textColorHint="@color/brown_grey"
app:boxBackgroundColor="@color/white"
app:boxStrokeWidth="0dp"
app:boxStrokeWidthFocused="0dp"
app:endIconMode="none"
app:layout_constraintBottom_toBottomOf="@+id/lable3"
app:layout_constraintStart_toEndOf="@+id/lable3"
app:layout_constraintTop_toTopOf="@+id/lable3">
<AutoCompleteTextView
android:drawablePadding="8dp"
android:drawableEnd="@drawable/ic_email"
android:id="@+id/et_driver_age"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:dropDownHeight="250dp"
android:inputType="none"
android:lines="1"
android:padding="0dp"
android:text="30"
android:textColor="@color/greyish_brown"
android:textSize="12sp" />