如何在编辑文本中放置按钮

时间:2012-10-31 04:39:47

标签: android android-layout android-edittext imagebutton

我想在EditText中放置一个图像按钮,但我没有想法,请告诉我如何操作,如图所示。感谢

enter image description here

12 个答案:

答案 0 :(得分:47)

如果您不想点击该图片,那么您可以使用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>

答案 1 :(得分:32)

如果你想要这样的布局和图像可点击,那么你可以做这样的事情

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

输出:

enter image description here

答案 2 :(得分:15)

在Material中,EditText下有下划线。在大多数应用程序中,图标显示为内部下划线。

enter image description here

为此目的,只需使用填充

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>

它会将文本限制为图像,图像不会与文本重叠,无论文本多长。

答案 3 :(得分:7)

我的解决方案适合所有屏幕尺寸,而editText不会imageButton落后于 <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> 。这也使用了android资源,因此您不需要提供自己的图标或字符串资源。将此代码段复制并粘贴到您想要搜索栏的任何位置:

{{1}}

<强> Restult:

enter image description here

答案 4 :(得分:4)

您可以使用以下代码:

<强> android:drawableRight="@android:drawable/ic_menu_search"

答案 5 :(得分:2)

如何将它放在像这样的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>

此外,您还可以在代码中处理Button(GONE / VISIBLE)的可见性。

希望它有所帮助。

答案 6 :(得分:1)

将EditText放在线性布局(水平)内,并在其旁边添加一个图像按钮(0填充)。设置EditText和ImageButton的背景颜色将融合在一起。

答案 7 :(得分:1)

我不知道您为什么要放置ImageButton来实现,这可以使用EditText

的简单属性来完成
  

android:drawableRight =“你的drawable”

不能对你有用吗?

答案 8 :(得分:1)

有可点击的复合可绘制的解决方案。它工作得很好 - 我测试了它

SOLUTION

答案 9 :(得分:1)

我觉得这很简单。使用相对布局作为父布局。 使用

将editText放在左边,将ImageButton放到右边
  • ImageButton的alignRight属性
  • 通过指定每个字段的布局权重

答案 10 :(得分:0)

在接受的答案中,涟漪效应不起作用,它留在后面的按钮后面。

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

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

为确保波纹有效且不会停留在背面,请将图像按钮的父背景设置为透明。

 <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 :(得分:-2)

在EditText上使用android:drawableLeft属性。

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