web-dev-qa-db-ja.com

編集テキスト内にボタンを配置する方法

EditText内に画像ボタンを配置したいのですが、図に示すようにその方法を教えてください。ありがとう

enter image description here

androidandroid-layoutandroid-edittextimagebutton
36
Arshad Ali

その画像をクリックしたくない場合は、EditTextに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>
48
Niranj Patel

あなたがそのようなレイアウトとクリック可能な画像を望むなら、あなたはこのような何かをすることができます

<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

33
Azhar Shaikh

マテリアルでは、EditTextの下にその下線があります。ほとんどのアプリケーションでは、アイコンが下線で表示されます内部。

enter image description here

そのためには、パディングを使用します

Android:paddingEnd = "@dimen/my_button_size"

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

テキストが画像に制限され、画像がテキストと重なることはありませんが、テキストが長くてもかまいません。

15
Meymann

私のソリューションは、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：

enter image description here

7
Chad Bingham

以下のコードを使用できます：

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

4
Bhavesh Patadiya

このように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）の可視性を処理できます。

それが役に立てば幸い。

2
Marcos

クリック可能な複合ドローアブルを使用したソリューションがあります。それは非常にうまく機能しています-私はそれをテストしました

[〜＃〜] solution [〜＃〜]

1
Yorgi

これは非常に簡単です。親レイアウトとして相対レイアウトを使用します。次のいずれかを使用して、editTextを左に、ImageButtonを右に配置します。

  • imageButtonのalignRightプロパティ
  • 各フィールドのレイアウトの重みを指定することにより
1
Akanksha Hegde

ImageButtonの単純なプロパティで実現できるEditTextを配置する理由がわかりません。

Android：drawableRight = "描画可能"

それはあなたのために働くことはできませんか？

1
RobinHood

EditTextを線形レイアウト（水平）内に配置し、その横にImage Buttonを追加します（0パディング）。 EditTextとImageButtonの背景色を設定するとブレンドされます。

1
Mani