Android: How to place an animated image inside an EditText that we can show and hide

问题

I am trying to add an animated spinner inside a EditText view to the right. And programmatically show/hide it.

I have created the animated spinner by introducing a linear interpolation rotation:

res/anim/rotate_forever.xml

<?xml version="1.0" encoding="UTF-8"?>
<rotate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:fromDegrees="0"
    android:toDegrees="360"
    android:pivotX="50%"
    android:pivotY="50%"
    android:repeatCount="infinite"
    android:interpolator="@anim/linear_interpolator"
    android:duration="1200" />

res/layout/main.xml

 <LinearLayout android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:paddingRight="6dip"
      android:paddingLeft="6dip"
      android:orientation="horizontal" 
      android:background="@drawable/header_gradient" >
  <EditText android:id="@+id/search_text"
       android:layout_height="fill_parent"
       android:layout_width="fill_parent"
       android:layout_weight="1"
       android:singleLine="true"
       android:focusable="true" />
  <ImageView android:id="@+id/search_spinner"
      android:gravity="center_vertical|right"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/spinner_black"/>
 </LinearLayout>

The way I trigger an animation is programmatically which works, I see the EditView on the left and the ImageView spinning on the right (because I have no idea otherwise)

ImageView searchSpinner = (ImageView) findViewById(R.id.search_spinner);
Animation spinnerAnimation = AnimationUtils.loadAnimation(this, R.anim.rotate_forever);
searchSpinner.startAnimation(spinnerAnimation);

My questions are this:

How can I place the ImageView inside the EditText on the far right. So it will appear inside not outside. (I thought I can just place a android:drawableRight, but that didn't work.
How can I hide/show the ImageView (spinner), I tried setting the View's invisibility, by doing searchSpinner.setVisibility(View.INVISIBLE); but that didn't work.

Thanks, if you have any better ideas how to approach this, I am listening :)

回答1:

With the work that you've already done, I think the easiest answer would be to change your LinearLayout to a RelativeLayout, so that you can set alignParentRight on the ImageView and add paddingRight as needed.

Another option is to create a custom view component: http://developer.android.com/guide/topics/ui/custom-components.html

回答2:

I'd probably use a FrameLayout and do something like this:

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    >
    <EditText
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="Some text..."
        />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right|center_vertical"
        android:src="@drawable/...."
        />
</FrameLayout>

Notice the "layout_gravity" on the ImageView...

回答3:

This also works

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

回答4:

If you are using TextInputLayout and want to animate the drawable look into this

First define the animation set like this way in res/anim/

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:duration="200"
     android:interpolator="@android:interpolator/linear"
    >
    <scale
        android:fromXScale="0%"
        android:fromYScale="0%"
        android:toXScale="60%"
        android:toYScale="60%"
        android:pivotX="50%"
        android:pivotY="50%"
        />
    <translate
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:startOffset="100"
        android:fromYDelta="0%"
        android:toYDelta="-80%"/>

</set>

and in your code set the animation

final Animation animation = AnimationUtils.loadAnimation(this, R.anim.anims);
        final ImageView imgLeft = (ImageView) findViewById(R.id.imgLeft);

        final EditText et = (EditText) findViewById(R.id.cardnumEditTexst);
        et.setOnFocusChangeListener(new View.OnFocusChangeListener()
        {
            @Override
            public void onFocusChange(View v, boolean hasFocus)
            {
                if (hasFocus)
                {
                    if (et.getText().length() == 0)
                    {
                        imgLeft.startAnimation(animation);
                    }
                } else
                {
                    if (et.getText().length() == 0)
                        imgLeft.clearAnimation();
                }
            }
        });

来源：https://stackoverflow.com/questions/3705809/android-how-to-place-an-animated-image-inside-an-edittext-that-we-can-show-and

标签

android

android-widget