当TextInputLayout获得焦点时，移动提示标签并更改其背景颜色

Question

当TextInputLayout获得焦点时，移动提示标签并更改其背景颜色

androidandroid-textinputlayoutmaterial-componentsmaterial-components-androidandroid-textinputedittext

10

我正在尝试自定义材料TextInpuLayout.OutlinedBox和TextInputEditText。我的当前状态如下所示：

我想要做的是删除提示标签的背景，这样它就不会产生丑陋的切口，就像这样：

如果不能实现上述效果，将标签移动到输入框上方也可以达到目的：

如果可以使用样式来实现这个效果就更好了，这样我就可以轻松地将其应用到其他文本输入元素中。我对Android还比较新，请多多包涵。

以下是样式代码：

<style name="MyTheme" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:textSize">14sp</item>
    <item name="boxCornerRadiusTopStart">@dimen/textInputCornerRadius</item>
    <item name="boxCornerRadiusTopEnd">@dimen/textInputCornerRadius</item>
    <item name="boxCornerRadiusBottomStart">@dimen/textInputCornerRadius</item>
    <item name="boxCornerRadiusBottomEnd">@dimen/textInputCornerRadius</item>
    <item name="boxBackgroundColor">@color/primaryDarkColorBackground</item>
    <item name="boxStrokeColor">@color/text_input_box_stroke</item>
</style>
<style name="EditTextStyle" parent="Widget.AppCompat.EditText">
    <item name="android:background">@null</item>
    <item name="android:paddingStart">30dp</item>
</style>

这是我在布局中定义输入的方式：

<com.google.android.material.textfield.TextInputLayout
        android:id="@+id/username_layout"
        style="@style/MyTheme"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="48dp"
        android:layout_marginEnd="48dp"
        android:hint="@string/email_or_username"
        app:boxBackgroundMode="outline"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.10">

        <com.google.android.material.textfield.TextInputEditText
            android:id="@+id/username"
            style="@style/EditTextStyle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />
    </com.google.android.material.textfield.TextInputLayout>

- ThizzHead

你能提供一些你已经实现的代码吗？ - Swayangjit

@Swayangjit 这只是默认的带有透明框边缘、背景颜色和一些填充的OutlinedBox。 - ThizzHead

分享你的 XML 代码。 - Muntasir Aonik

为了澄清，添加了一些 XML 代码。 - ThizzHead

我遇到了同样的问题。我正在构建一个TextInputLayout组件，但我不知道它将放置在哪个背景上，而HintText背景与上面/OP的第一个示例（文本周围的正方形）有相同的问题。我还没有找到以编程方式针对它的方法。 - skepnaden

2个回答

-1

尝试在TextInputEditText上进行设置：

android:background="@android:color/transparent"

- Adriel Iclodean

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Gabriele Mariotti · Accepted Answer

我认为你无法使用TextInputLayout.OutlinedBox风格来获取它。
它不完全符合你的要求:

   <com.google.android.material.textfield.TextInputLayout
        style="@style/Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded"
        ..>

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

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

带有：

  <style name="Widget.MaterialComponents.TextInputLayout.FilledBox.Rounded" parent="Widget.MaterialComponents.TextInputLayout.FilledBox">
    <item name="shapeAppearanceOverlay">@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout</item>
    <item name="boxStrokeColor">@color/input_text_no_underline</item>
  </style>

  <style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">50%</item>
  </style>

选择器用于去除下划线：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:alpha="0" android:color="?attr/colorOnSurface" android:state_hovered="true"/>
  <item android:alpha="0" android:color="?attr/colorOnSurface" android:state_enabled="false"/>
  <item android:alpha="0" android:color="?attr/colorOnSurface"/>
</selector>

注意：它需要库的1.1.0版本。