android - Android EditText 和 ImageButton 防止重叠

Question

我已经得到了FrameLayout由EditText和组成的ImageButton，看起来像这样：

在代码中它看起来像这样：

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/input_field_red"
            android:hint="Message"
            android:singleLine="true"
            android:textColor="@color/dark_grey_3" />

        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:background="@android:color/transparent"
            android:src="@drawable/cancel" />
    </FrameLayout>

问题是，当输入文本变得足够长时，会ImageButton覆盖文本。

有没有办法防止这种情况？我不能缩短线的长度。它必须是match_parent。并且ImageButton必须位于直线上并向右对齐。

Answer 1

做这样的事情 -

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <EditText
        android:id="@+id/EditViewId"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/input_field_red"
        android:hint="Message"
        android:layout_toLeftOf="@+id/imageViewId"
        android:singleLine="true"
        android:textColor="@color/dark_grey_3" />

    <ImageButton
        android:id="@+id/imageViewId"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/EditViewId"
        android:layout_alignLeft="@+id/EditViewId"
        android:layout_gravity="right"
        android:background="@android:color/transparent"
        android:src="@drawable/cancel" />
</RelativeLayout>

这可以防止它重叠

另一种方法
还有另一种方法可以在edittext的右侧添加图像。

<EditText
        android:id="@+id/search"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_margin="4dip"
        android:layout_weight="1"
        android:background="@drawable/textfield_search1"
        android:drawableRight="@drawable/search_icon"
        android:hint="Search Anything..."
        android:padding="4dip"
        android:singleLine="true" />

并为右侧的图像设置 onClickListener

假设我有一个带有 drawableRight 的 EditText editComment

    editComment.setOnTouchListener(new OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
            final int DRAWABLE_LEFT = 0;
            final int DRAWABLE_TOP = 1;
            final int DRAWABLE_RIGHT = 2;
            final int DRAWABLE_BOTTOM = 3;

            if(event.getAction() == MotionEvent.ACTION_UP) {
                if(event.getX() >= (editComment.getRight() - editComment.getCompoundDrawables()[DRAWABLE_RIGHT].getBounds().width())) {
                    // your action here
                }
            }
            return false;
        }
    });