如何在 EditText 中放置按钮答案

【问题标题】：How to place button inside of EditText如何在 EditText 中放置按钮
【发布时间】：2012-10-20 12:32:54
【问题描述】：

我想在EditText里面放一个图片按钮，但是我没有idea请告诉我怎么做，如图。谢谢

【问题讨论】：

你想点击这张图片吗？
使用EditText的android:drawableRight="@drawable/ic_search"
我已经提到这是一个图片按钮

标签： android android-layout android-edittext imagebutton

【解决方案1】：

如果您不想单击该图像，则可以使用 drawableRight 属性为 EditText..

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>

【讨论】：

感谢您的回复，但我希望图像像可点击的按钮
@ArshadAliSoomro 检查我的答案
这可行，但不符合我的需要，因为它也显示按钮和边框的背景颜色，我只想要透明图像..
@ArshadAliSoomro 使用透明图片作为背景
@CapDroid ...如果我使用你设计 xml 的方式，用户文本会隐藏在顶部的 imageview 后面。你有什么想法，如何通过限制文本超出限制来实现这一点。

【解决方案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>

输出：

【讨论】：

如何在这张图片上添加点击事件
在 Activity 类中按 id 映射 imageview 并将 Listener 设置为 See clickListener
如何防止我的文字落后于ImageView？
在您的 XML for edittext 中，使用 android:singleLine="true" 和 android:paddingRight="50dp" 防止您的文本出现在右侧的图像按钮后面
在 alignTop、alignBottom 和 alignRight 中没有“+”，因为您已经在 EditText 本身中使用“+”声明了 @id/editText1。

【解决方案3】：

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

为此，只需使用填充

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>

它将文本限制为图像，并且图像不会与文本重叠，无论文本有多长。

【讨论】：

【解决方案4】：

我的解决方案将适合所有屏幕尺寸，而editText 不会“落后”imageButton。这也使用了android资源，因此您不需要提供自己的图标或字符串资源。将此 sn-p 复制并粘贴到您想要搜索栏的任何位置：

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

结果：

【讨论】：

非常感谢您的典型回答，希望将来它会帮助一些新手和我......！但我建议使用SearchView
@ArshadAli 啊，是的。那个更好。
我在这件事上浪费了很多时间。谢谢。安卓怎么让我们做这种简单的事情变得困难？

【解决方案5】：

您可以使用以下代码：

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

【讨论】：

【解决方案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）。

希望对你有帮助。

【讨论】：

@style/EditTextColorCustom 的样式是什么？
嗨，它只是 EditText (styles.xml) 的自定义样式，我在这个特殊情况下使用的代码是：

【解决方案7】：

将您的 EditText 放置在线性布局（水平）内，并在其旁边添加一个图像按钮（0 填充）。设置 EditText 和 ImageButton 的背景颜色会融入其中。

【讨论】：

【解决方案8】：

有可点击复合drawable的解决方案。它工作得很好 - 我已经测试过了

SOLUTION

【讨论】：

【解决方案9】：

我觉得这很简单。使用相对布局作为父布局。将editText放在左边，ImageButton放在右边，

ImageButton 的 alignRight 属性
通过指定每个字段的布局权重

【讨论】：

【解决方案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>

【讨论】：

【解决方案11】：

不知道为什么要放置ImageButton来实现，可以通过EditText的简单属性来实现

android:drawableRight="你的drawable"

它不适合你吗？

【讨论】：

好的，这可能有效，但我需要点击图像按钮并对其进行一些操作！

【解决方案12】：

在 EditText 上使用 android:drawableLeft 属性。

<EditText
    ...     
    android:drawableLeft="@drawable/my_icon" />

【讨论】：