如何调整 textField 的大小并禁用 TextInputLayout 中的浮动标签？

Question

我正在使用 Material 设计库制作一个圆形的 editText，我能够做到这一点，但现在我希望它看起来更小一些，我使用了密集的 textField 样式，但我仍然希望视图的高度小于该值。问题是浮动的 Label 标签，我没有为 textField 设置提示，但 Label 标签仍然占用一些空 space.

<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" 属性，但仍然是空的 space

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

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

Answer 2

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

Answer 3

例如，只需将 TextInputEditText 内边距设置为 8dp。在这种情况下，您不应该设置 label/hint。

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

看起来像这样：

如何调整 textField 的大小并禁用 TextInputLayout 中的浮动标签？

how to resize the textField and disable floating label in a TextInputLayout?

android

material-design

android-textinputlayout

material-components

material-components-android