【问题标题】:How to disable padding on TextInputLayout?如何禁用 TextInputLayout 上的填充?
【发布时间】:2017-05-15 03:58:12
【问题描述】:

使用TextInputLayout 包裹EditText 时,似乎会自动添加左填充,如下面的屏幕截图所示。

没有向布局 XML 中的 EditText 添加填充,但是当呈现视图时,EditText 上似乎有左侧填充。在比较TextInputLayout 下方的TextView 时可以看到这一点。

如何禁止添加此左侧填充?

谢谢!

【问题讨论】:

  • 我遇到了同样的问题,唯一能解决的方法是在 TextInputLayout 上指定 layout_height

标签: android android-layout material-design android-textinputlayout


【解决方案1】:

您可以将内部 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 的屏幕截图,您可以看到提示一直到视图的边缘。

【讨论】:

  • 能否提供输出截图?
  • 已添加截图!
  • 我怎么会错过这个? ;P
  • 随意更改接受的答案 ;) 负边距似乎有点 hacky
  • 这就像一个魅力,没有任何hacky解决方案!这应该是公认的答案。
【解决方案2】:

使用Material Components Library 中包含的TextInputLayout,您可以使用自定义样式来减少填充。

只需使用类似的东西:

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

这里是最终结果:

注意:至少需要 1.1.0 版本的材料组件库。

【讨论】:

  • @nibbana,对于这样一个简单而微不足道的任务的理智回答,真的吗? Android UI 设计师正在思考他们的 *sses。我有一个TextViewEditText 我一直在尝试调整他们的开始一个小时,但我什至不是 Android 新手。这不过是废话
  • @Farid 我的评论显然是指具体的答案。如果您有更简单的解决方案,请与我们分享
【解决方案3】:

我设法通过复制edittext背景的原始主题来删除剩余的空间

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_horizo​​ntal_material" android:insetRight="@dimen/abc_edit_text_inset_horizo​​ntal_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>

这就是我发现删除左右空格的方式。

希望能帮到你,谢谢

【讨论】:

  • 谢谢,卡洛斯。这是唯一能够跨平台和 API 级别始终如一地工作的解决方案。
【解决方案4】:

像这样使填充为 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>

这是结果

【讨论】:

    【解决方案5】:

    EditText 默认可绘制对象左右的水平空间由abc_edit_text_inset_horizontal_material 尺寸控制。您可以通过查看 abc_edit_text_material.xml 可绘制文件来确认这一点,该文件表示 AppCompat 的默认 EditText 背景。要完全删除空间,您可以通过在您自己项目的 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>
    

    但是,有一个问题。如果主机操作系统不支持 Material Design,AppCompat 库只会使用它自己的 abc_edit_text_material.xml 背景。因此,如果您在 Android 4 上运行您的应用程序,您会看到添加上述尺寸后边距消失。但是,如果您在 Android 10 上启动应用程序,您会发现利润仍然存在。这是因为在较新的 Android 版本上,compat 库实际上会更喜欢在操作系统内部指定的背景可绘制对象。

    因此,您需要强制所有 EditTexts 使用 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 会抱怨这个),但我仍然认为这个解决方案比使用负边距更干净。

    【讨论】:

      【解决方案6】:
         <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" />
      

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2018-11-23
        • 2020-01-05
        • 1970-01-01
        • 2015-11-14
        • 2023-03-17
        • 1970-01-01
        相关资源
        最近更新 更多