文本输入内的图像按钮编辑文本而不会丢失浮动标签

Question

我有一些带有浮动标签的编辑文本，比如图片中的第一个标签

            <android.support.design.widget.TextInputLayout
                android:id="@+id/tlIdMode"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/signup_edittext_margin_top"
                android:hint="@string/signup_id_mode">

                    <com.vipera.onepay.ui.component.custom.CustomTextInputEditText
                        android:id="@+id/etIdMode"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/edit_text_height"
                        android:inputType="text"
                        android:text="@string/signup_nif"
                        android:textColor="@color/dark_gray"
                        android:textSize="@dimen/edit_text_size" />


            </android.support.design.widget.TextInputLayout>

我想在编辑文本的右侧有一个 ImageButton，就像第二个一样，但我失去了提示和浮动标签...

   <android.support.design.widget.TextInputLayout
                android:id="@+id/tlIdNumber"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="@dimen/signup_edittext_margin_top"
                android:hint="@string/signup_id_number">


                <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    xmlns:tools="http://schemas.android.com/tools"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content">


                    <com.vipera.onepay.ui.component.custom.CustomTextInputEditText
                        android:id="@+id/etIdNumber"
                        android:layout_width="match_parent"
                        android:layout_height="@dimen/edit_text_height"
                        android:inputType="text"
                        android:textColor="@color/dark_gray"
                        android:textSize="@dimen/edit_text_size" />


                    <ImageButton
                        android:id="@+id/imgClearUser"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_alignBottom="@+id/etIdNumber"
                        android:layout_alignRight="@+id/etIdNumber"
                        android:layout_alignTop="@+id/etIdNumber"
                        android:background="@android:color/transparent"
                        android:padding="5dp"
                        android:src="@drawable/ic_clear_28dp" />

                </RelativeLayout>


            </android.support.design.widget.TextInputLayout>

我想要同时拥有 imageButton 和浮动标签。感谢您的帮助！

Answer 1

使用 FrameLayout 并将这些视图与布局的子级分开。喜欢

<FrameLayout
    android:layout_marginTop="@dimen/dp20"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tlIdNumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="signup_id_number">

        <EditText
            android:id="@+id/etIdNumber"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingRight="40dp"
            android:inputType="text"
            android:textColor="#FF00FF"
            android:textSize="16sp" />

    </android.support.design.widget.TextInputLayout>

    <ImageButton
        android:id="@+id/imgClearUser"
        android:layout_gravity="right|center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/etIdNumber"
        android:layout_alignRight="@+id/etIdNumber"
        android:layout_alignTop="@+id/etIdNumber"
        android:background="@android:color/transparent"
        android:padding="5dp"
        android:src="@android:drawable/ic_menu_close_clear_cancel" />
</FrameLayout>

这会奏效。这里使用 EditText android:paddingRight="40dp" 填充将处理在键入文本时不会进入关闭按钮的情况。您可以根据您的 UI 要求增加或减少此值。

---

根据您的问题，通过适当的对齐和视图属性，答案将是

<FrameLayout
    android:layout_marginTop="@dimen/signup_edittext_margin_top"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/tlIdNumber"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/signup_id_number">

        <com.vipera.onepay.ui.component.custom.CustomTextInputEditText
            android:id="@+id/etIdNumber"
            android:layout_width="match_parent"
            android:layout_height="@dimen/edit_text_height"
            android:inputType="text"
            android:paddingRight="40dp"
            android:textColor="@color/dark_gray"
            android:textSize="@dimen/edit_text_size" />
    </android.support.design.widget.TextInputLayout>

    <ImageButton
        android:id="@+id/imgClearUser"
        android:layout_gravity="right|center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/etIdNumber"
        android:layout_alignRight="@+id/etIdNumber"
        android:layout_alignTop="@+id/etIdNumber"
        android:background="@android:color/transparent"
        android:padding="5dp"
        android:src="@drawable/ic_clear_28dp" />
</FrameLayout>