如何制作TextInputLayout的下划线edittext圆角答案

【问题标题】：How to make Underline of TextInputLayout's edittext Round Corner如何制作TextInputLayout的下划线edittext圆角
【发布时间】：2021-04-13 19:45:05
【问题描述】：

我想在 Material Design 的 TextInputLayout 填充文本中制作底线的圆角。我可以在聚焦和不聚焦模式下更改它的颜色，但是如何将它的角更改为圆形。这就是我现在拥有的-

我正在寻找以下结果-

这是我尝试但没有做太多的代码 -

    <com.google.android.material.textfield.TextInputLayout
        app:shapeAppearanceOverlay="@style/Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        app:boxStrokeColor="@color/selector_otp_input_box_stroke_color"
        app:boxStrokeWidth="6dp"
        app:boxCornerRadiusBottomEnd="5dp"
        app:boxCornerRadiusBottomStart="5dp"
        app:boxCornerRadiusTopEnd="5dp"
        app:boxCollapsedPaddingTop="5dp"
        app:boxStrokeWidthFocused="6dp">

        <com.google.android.material.textfield.TextInputEditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:cursorVisible="false"
            android:digits="1234567890"
            android:inputType="number"
            android:textSize="40sp"
            android:textIsSelectable="false"
            android:maxLength="1"
            android:maxLines="1"
            android:backgroundTint="@color/colorPrimary"/>

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

样式 Rounded_ShapeAppearanceOverlay

<style name="Rounded_ShapeAppearanceOverlay.MaterialComponents.TextInputLayout.FilledBox"
        parent="Widget.MaterialComponents.TextInputLayout.FilledBox">

    <item name="cornerSizeBottomLeft">4dp</item>
    <item name="cornerSizeBottomRight">4dp</item>
</style>

任何工作将不胜感激，谢谢

【问题讨论】：

你是说在上面的设计中每个盒子都是TextInputLayout 吗？所以你有 6 个 TextInputLayout 用于这个设计？
@ADM 是的，你是对的，我试图创建 OTP 字段，每个焦点都会改变底线的颜色，所以我采用了这个实现，除了底线的圆角之外，一切都很完美
用 6 EditText 实现这可能非常棘手，因为您每次都必须处理焦点更改，而且您还必须处理文本删除，简而言之，这可能会导致错误。这应该用一个单一的编辑文本来实现所以你最好自定义EditText 以这种方式工作。要开始使用，只需搜索 PinEntryEditText 你就会明白。
@ADM 我之前尝试过使用不同的方法，就像你用一个 editText 说的那样，现在用上面的一种方法和一个 EditText 上的 TextWatcher 解决，我可以用更深入的方法再试一次，只用一个 EditText 但它会如果有任何选项我可以用圆角在 TextInputLayout 下划线，那就太好了...

标签： android android-layout material-components-android android-textinputlayout android-textinputedittext

【解决方案1】：

对于曲线遵循以下代码对于布局

<com.google.android.material.textfield.TextInputEditText
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:cursorVisible="false"
        android:digits="1234567890"
        android:inputType="number"
        android:textSize="40sp"
        android:textIsSelectable="false"
        android:maxLength="1"
        android:maxLines="1"
        android:textAlignment="center"
        android:layout_marginStart="10dp"
        android:backgroundTint="@color/focus_tint"
        android:background="@drawable/underline"/>

在你的 TextInputEditText 中添加这个

android:backgroundTint="@color/focus_tint"
android:background="@drawable/underline"

下划线.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:gravity="bottom">
        <shape>
            <size android:height="4dp" />
            <solid android:color="#000000" />
            <corners android:radius="50dp"/>
        </shape>
    </item>
</layer-list>

focus_tint.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true" android:color="@color/teal_200"/>
    <item android:state_focused="false" android:color="@color/black"/>

</selector>

【讨论】：