android - Android：エディットテキスト内の「機能する」画像

Question

次のように、ユーザーが入力している間、アニメーションで描画可能になるように編集テキスト内に画像を配置したいと思います。

ありがとう ：）

Answer 1

以下に示すxmlコードスニペットをメインのxmlファイル（UIを担当）の一部として使用してください。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/widget665"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="left"
    android:paddingLeft="1dip"
    android:paddingRight="2dip">
        <ImageView
            android:id="@+id/searchImageView"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:src="@android:drawable/ic_search_category_default"
            android:layout_gravity="center_vertical"
            android:paddingTop="2dip"
            android:paddingBottom="2dip">
        </ImageView>
            <EditText
            android:id="@+id/search_edit_text"
            android:layout_width="fill_parent"
            android:layout_height="35dip"
            android:text=""
            android:textSize="18sp"
            android:background="#f5f5dc"
            android:layout_gravity="center_vertical">
        </EditText>
</LinearLayout>

この内部クラスをメインアクティビティ内に配置します

public class SearchTextWatcher implements TextWatcher{

    @Override
    public void afterTextChanged(Editable arg0) {

    }

    @Override
    public void beforeTextChanged(CharSequence arg0, int arg1, int arg2,
            int arg3) {

    }

    @Override
    public void onTextChanged(CharSequence prefix, int start, int before, int count) {



                if(!prefix.equals("")){
                    changeImageToProcessing();
                }else{
                    changeImageToIdle();
                }




    }

}

onCreate（）中にcontentViewからsearchBar（EditText）とiv（ImageView）を抽出します。

searchBar = (EditText)contentView.findViewById(R.id.customer_search_edit_text);
iv = (ImageView)contentView.findViewById(R.id.searchImageView);

テキストchangelistenberを検索バーのedittextに添付します

    searchBar.addTextChangedListener(searchTextWatcher);

それに応じて画像を変更する責任があるヘルパーメソッドをいくつか追加します

    public void changeImageToProcessing(){

        iv.setImageResource(resId);// resid is the id of the working image
    }

public void changeImageToIdle(){


    iv.setImageResource(resId);// resid is the id of the idle image
}

//これらのメソッドはSearchTextWatcherクラス内のonTextChange（）から呼び出されます

Answer 2

必要なのは、CompoundDrawables {Right | 左| トップ| xmlのBottom}プロパティ

<EditText 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/searchedTxt"
        android:width="200dp"
        android:layout_alignParentRight="true"
        android:drawableLeftt="@android:drawable/ic_menu_search"/> 

Answer 3

テキストEditTextを変更すると画像が変更ImageViewされますRelativeLayout

編集：サンプルコードを追加

1) main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">
    <EditText
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:text="New EditText"
            android:id="@+id/editText"/>
    <ImageView
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:id="@+id/imageView"
            android:background="@drawable/first_image"
            />
</RelativeLayout>

2) MyActivity クラス

public class MyActivity extends Activity {

    private EditText editText;
    private ImageView image;
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        initializeFormViews();
        initializeFormEvents();
    }

    public void initializeFormViews(){
        editText = (EditText) findViewById(R.id.editText);
        image = (ImageView) findViewById(R.id.imageView);
    }

    public void initializeFormEvents(){

        editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {
            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
            }

            @Override
            public void afterTextChanged(Editable s) {
                // changes image after editing text in EditText
                image.setBackgroundResource(R.drawable.second_image);
            }
        });

    }
}