如何将按钮放置在EditText内部

Question

我想在EditText中添加一个图像按钮，但我不知道怎么做，请告诉我如何实现，如下图所示。谢谢。

- Arshad Ali

---

你想点击这张图片吗？ - Niranj Patel

使用EditText的android:drawableRight="@drawable/ic_search"。 - Kartik Domadiya

我已经提到这是一个图像按钮。 - Arshad Ali

Answer 1

如果您不想点击那张图片，则可以使用drawableRight属性来编辑文本框。

android:drawableRight="@drawable/icon"

如果您想要点击，则使用以下代码。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="Enter search key" />

    <ImageButton
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/search"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:text="Button"/>

</RelativeLayout>

- Niranj Patel

---

谢谢您的回复，但我希望图片可以像可点击的按钮一样。 - Arshad Ali

这个可以工作，但不符合我的需求，因为它显示了按钮的背景颜色和边框，我只想要透明的图像。 - Arshad Ali

@ArshadAliSoomro 使用透明图像作为背景。 - Niranj Patel

不，这个布局是错误的。如果我们把EditText放在底部或任意位置会怎样？ - Mohammed Azharuddin Shaikh

@CapDroid...如果我使用您的xml设计方式，用户文本将隐藏在放置在顶部的imageview后面。您有任何想法如何实现此目标并限制文本不超出限制吗？ - Shail Adi

不要将图像对齐到EditText的右侧。 - naamadheya

Answer 2

如果您想要这样的布局并使图像也可点击，那么您可以像这样做。

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

    <EditText
        android:id="@+id/editText1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true" >

    </EditText>
     <ImageView
        android:id="@+id/imageView1"
        android:padding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@+id/editText1"
        android:layout_alignBottom="@+id/editText1"
        android:layout_alignRight="@+id/editText1"
        android:src="@drawable/ic_launcher" />

</RelativeLayout>

输出：

- Mohammed Azharuddin Shaikh

---

请问如何在这个图像上添加点击事件？ - Arshad Ali

在您的Activity类中通过id映射ImageView，并为其设置监听器请参见clickListener。 - Mohammed Azharuddin Shaikh

如何防止我的文本出现在“ImageView”后面？ - Nezam

在XML中的EditText标签中，使用android:singleLine="true"和android:paddingRight="50dp"属性可以防止文本超出右侧图像按钮的范围。请注意保持原文意思不变，同时使语言表达更加通俗易懂。 - Price

由于您已经在EditText本身中声明了@id/editText1中的“+”，因此alignTop，alignBottom和alignRight中没有“+”。 - FlorianB

Answer 3

在 Material 中，EditText 下面有一个下划线。在大多数应用程序中，图标出现在这个下划线内部。

为此，只需使用padding即可。

android:paddingEnd = "@dimen/my_button_size"

别忘了在sub 4.2版本中使用paddingRight。

<RelativeLayout ....>
   ...
   <EditText
   ...
   android:id="@+id/my_text_edit"
   android:textAlignment = "viewStart"
   android:paddingEnd = "@dimen/my_button_size"
   android:paddingRight = "@dimen/my_button_size"
   .../>

   <ImageButton 
   ....
   android:layout_width="@dimen/my_button_size" 
   android:layout_height="@dimen/my_button_size"
   android:layout_alignEnd="@id/my_text_edit"
   android:layout_alignRight="@id/my_text_edit"/>
   ...
</RelativeLayout>

它将限制文本在图像内，而图像不会覆盖文本，无论文本有多长。

- Meymann

Answer 4

我的解决方案可以适应所有屏幕大小，而不会让editText出现在imageButton的“后面”。这还使用了Android资源，因此您无需提供自己的图标或字符串资源。将此片段复制并粘贴到您想要搜索栏的任何位置即可：

   <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal">
  
   <EditText
        android:layout_margin="8dp"
        android:id="@+id/etSearch"
        android:hint="@android:string/search_go"
        android:layout_weight="1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"/>

    <ImageView
        android:id="@+id/ivSearch"
        android:background="@color/transparent_black"
        android:padding="2dp"
        android:layout_width="wrap_content"
        android:layout_margin="8dp"
        android:src="@android:drawable/ic_menu_search"
        android:layout_height="wrap_content"
        tools:ignore="contentDescription" />

</LinearLayout>

Restult:

- Chad Bingham

---

非常感谢您的典型答案，希望将来它能帮助一些新手和我自己...！但是我建议使用SearchView。 - Arshad Ali

@ArshadAli 啊，没错。那个更好。 - Chad Bingham

我在做这件事上浪费了很多时间。谢谢。为什么安卓在做这种简单的事情时让我们的生活变得困难？ - DayDayHappy

Answer 5

您可以使用以下代码：

android:drawableRight="@android:drawable/ic_menu_search"

这段代码用于在Android应用程序中添加搜索图标。

- Bhavesh Patadiya

Answer 6

那么把它放在一个RelativeLayout中，像这样？：

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

    <!-- EditText for Search -->
    <EditText android:id="@+id/inputSearch"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:hint="Search whatever..."
            android:textSize="14dp"
            android:textStyle="italic"
            android:drawableLeft="@drawable/magnifyingglass"
            android:inputType="textVisiblePassword"
            android:theme="@style/EditTextColorCustom"/>

         <Button
            android:id="@+id/btn_clear"
            android:layout_width="14dp"
            android:layout_height="14dp"
            android:layout_marginTop="10dp"
            android:layout_alignRight="@+id/inputSearch"
            android:layout_marginRight="5dp"
            android:background="@drawable/xbutton"
            android:visibility="gone"/>
    </RelativeLayout>

此外，通过这种方式，您将能够在代码中处理按钮的可见性（GONE / VISIBLE）。

希望对您有所帮助。

- Marcos

---

@style/EditTextColorCustom的样式是什么？ - Waseem Akram

嗨，这只是一个针对EditText的自定义样式(styles.xml)，在这种特定情况下我使用的代码是：<style name="EditTextColorCustom" parent="Theme.AppCompat.Light"> <item name="colorAccent">@color/colorPrimary</item> </style> - Marcos

Answer 7

有一种解决方案是使用可点击的复合绘制。它非常有效 - 我已经测试过了。

解决方案

- Yorgi

Answer 8

我觉得这很简单。将相对布局作为您的父布局。使用以下任何一种方法将editText放置在左侧，将ImageButton放置在右侧：

• 使用ImageButton的alignRight属性
• 通过指定每个字段的布局权重来实现

- Akanksha Hegde

Answer 9

将EditText放置在线性布局（水平）内，并在其旁边添加一个Image Button（0填充）。设置EditText和ImageButton的背景颜色将融合在一起。

- Mani

Answer 10

在被接受的答案中，涟漪效果不起作用，它停留在按钮后面。

此示例在文本框中有2个按钮。 涟漪效果有效是因为父布局具有。

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

为确保水波纹效果正常且不停留在背景上，请将imagebutton的父级背景设置为透明。

 <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/transparent"
            android:focusableInTouchMode="true"
            android:layout_margin="4dp">

            <EditText
                android:id="@+id/editText"
                style="@android:style/TextAppearance.Medium"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:layout_marginTop="2dp"
                android:layout_marginRight="2dp"
                android:background="@drawable/shape_textbox"
                android:hint="text"
                android:imeOptions="actionDone"
                android:importantForAutofill="no"
                android:inputType="text" />

            <ImageButton
                android:id="@+id/btn1"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_centerVertical="true"
                android:layout_margin="5dp"
                android:layout_toStartOf="@+id/btn2"
                android:background="?android:selectableItemBackgroundBorderless"
                android:src="@drawable/ic_btn1" />

            <ImageButton
                android:id="@+id/btn2"
                android:layout_width="44dp"
                android:layout_height="44dp"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_margin="5dp"
                android:background="?android:selectableItemBackgroundBorderless"
                android:contentDescription="@string/clear"
                android:src="@drawable/ic_btn2" />

        </RelativeLayout>

或者您也可以将按钮包装在框架布局中：

<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@android:color/transparent"
    android:layout_alignParentEnd="true"
    android:layout_centerVertical="true"
    >
<ImageButton ... />
</FrameLayout>

- live-love