如何调整文本字段的大小并禁用 TextInputLayout 中的浮动标签？答案

【问题标题】：how to resize the textField and disable floating label in a TextInputLayout?如何调整文本字段的大小并禁用 TextInputLayout 中的浮动标签？
【发布时间】：2020-01-05 21:19:36
【问题描述】：

我正在使用 Material design library 来制作一个圆形的 editText，我能够做到这一点，但现在我希望它看起来更小一些，我使用了密集的 textField 样式，但我仍然想要视图的高度比那个小。问题是浮动标签标签，我没有为textField设置提示但是标签标签仍然占用一些空白空间。

<com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Dense"
        android:id="@+id/editText"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:endIconMode="custom"
        app:endIconDrawable="@drawable/ic_speaker_24dp"
        app:layout_constraintBottom_toBottomOf="@+id/topBar_view"
        app:layout_constraintEnd_toEndOf="@+id/topBar_view"
        app:layout_constraintStart_toEndOf="@+id/separater_line"
        app:layout_constraintTop_toTopOf="parent"
        app:boxCornerRadiusTopStart="20dp"
        app:boxCornerRadiusTopEnd="20dp"
        app:boxCornerRadiusBottomStart="20dp"
        app:boxCornerRadiusBottomEnd="20dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

    </com.google.android.material.textfield.TextInputLayout>

我只希望 textField 看起来像 chrome url 搜索栏，苗条并且在键入时提示消失，而不是浮动标签。

编辑：我尝试了app:hintEnabled="false" 属性，但仍然有一个空白空间

【问题讨论】：

也试试这个 app:hintAnimationEnabled="false"
那也没用
试试这个应用：在 TextInputLayout 标签内的hintEnabled="false"

标签： android material-design android-textinputlayout material-components material-components-android

【解决方案1】：

您可以使用app:hintEnabled="false" 禁用浮动标签功能。您也可以自定义dense style。

你可以使用类似的东西：

  <com.google.android.material.textfield.TextInputLayout
        app:hintEnabled="false"
        style="@style/MyDenseOutlined"
        ...>

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

  </com.google.android.material.textfield.TextInputLayout>

采用这种风格：

  <style name="MyDenseOutlined" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox.Dense">
    <item name="materialThemeOverlay">@style/MyThemeOverlayOutlinedDense</item>

  </style>

  <style name="MyThemeOverlayOutlinedDense">
    <item name="editTextStyle">@style/MyTextInputEditText_outlinedBox_dense_h
    </item>
  </style>

  <style name="MyTextInputEditText_outlinedBox_dense_h" parent="@style/Widget.MaterialComponents.TextInputEditText.OutlinedBox.Dense">
    <item name="android:paddingTop">8dp</item>
    <item name="android:paddingBottom">8dp</item>
  </style>

这里是结果（带有默认样式和自定义样式）：

【讨论】：

这对我来说非常有效，但我能理解为什么我们制作 3 种样式相互引用而不是直接制作一个吗？这件事让我有点困惑。
没那么简单。 editTextStyle 是在 AppTheme 级别定义的属性，它被所有组件使用（如 colorPrimary）。您不能在TextInputLayout.OutlinedBox 样式中使用它。materialThemeOverlay 属性允许为此覆盖主题属性具体风格（MyDenseOutlined）。这样只有这种风格的组件才会使用自定义的editTextStyle。
与 nh7 的答案相比，我看不出结果有什么不同，这要简单得多，但我认为这些解决方案都很糟糕。如果您不需要提示，您可以使用 EditText。我使用 TextInputLayout 因为它的提示。如果你已经改变了它的风格，我看不到任何其他好处。

【解决方案2】：

例如，只需将 TextInputEditText 填充设置为 8dp。在这种情况下，您不应该设置标签/提示。

        <com.google.android.material.textfield.TextInputLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content">

            <com.google.android.material.textfield.TextInputEditText
                android:id="@+id/input_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="8dp"
                android:text="Some text" />

        </com.google.android.material.textfield.TextInputLayout>

看起来像这样：

【讨论】：

【解决方案3】：

<com.google.android.material.textfield.TextInputLayout
                android:id="@+id/etemailLayout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint=" ">

        <EditText
            android:id="@+id/txtemail"
            style="@style/login_edittext"
            android:hint="Enter Your Email Address"
            android:inputType="textEmailAddress" />

    </com.google.android.material.textfield.TextInputLayout>

    <com.google.android.material.textfield.TextInputLayout
        android:id="@+id/etPasswordLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint=" "
        android:scrollbars="vertical"
        app:counterEnabled="true"
        app:passwordToggleEnabled="true">

        <EditText
            android:id="@+id/txtpassword"
            style="@style/login_edittext"
            android:hint="Enter Password"
            android:inputType="textPassword"
            android:maxLength="8"
            android:scrollbars="vertical" />

    </com.google.android.material.textfield.TextInputLayout>

将样式应用到您的 EditText 将下面的代码放入 Styles.xml ..

<style name="login_edittext">
        <item name="android:layout_marginTop">15dp</item>
        <item name="android:background">@drawable/edittext_background</item>
        <item name="android:textColorHint">#FFFFFF</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
    </style>

为了背景效果在drawable中创建edittext_background.xml..

<?xml version="1.0" encoding="utf-8"?>
<shape android:shape="rectangle"
    xmlns:android="http://schemas.android.com/apk/res/android" >
    <corners android:radius="7dp" />
    <solid android:color="#80ffffff" />
    <padding android:left="10dp" android:right="10dp"
        android:top="10dp" android:bottom="10dp" />
    <stroke android:width="2dp" android:color="#FFFFFF" />
</shape>

【讨论】：