Fading flechas en imageswitcher

Question

Estoy creando una aplicación que utiliza un ImageSwitcher para mostrar algunas imágenes. Quiero mostrar flechas en ambos lados de la pantalla, además de un botón en la parte inferior cada vez que un usuario ha tocado la pantalla o conmutación de imágenes. Al igual que usted verá durante la visualización de imágenes para una aplicación en Android Market.

Hasta ahora he tenido mi actividad implementar OnGestureListener, y he creado un AsyncTask que se desvanece en, capacidad para 1 segundo y luego se desvanece de nuevo cada vez que se activa el evento ACTION_UP. El problema es que yo quiero quitar una flecha si el usuario lanza a otra imagen. Hay tres imágenes.

Aquí está un extracto de mi código.

@Override
 public boolean onTouchEvent(MotionEvent event) {
  if (event.getAction() == MotionEvent.ACTION_UP) {
   new FadeInOutButtons().execute();
  }

  return mGesture.onTouchEvent(event);
 }

private void fadeOutAll() {


Animation fadeOut = AnimationUtils.loadAnimation(
    MyActivity.this, android.R.anim.fade_out);
  mButtonHolder.startAnimation(fadeOut);
  mButtonHolder.setVisibility(View.GONE);
  if (mRightArrow.getVisibility() == View.VISIBLE) {
   mRightArrow.startAnimation(fadeOut);
   mRightArrow.setVisibility(View.GONE);
  }
  if (mLeftArrow.getVisibility() == View.VISIBLE) {
   mLeftArrow.startAnimation(fadeOut);
   mLeftArrow.setVisibility(View.GONE);
  }
 }
private class FadeInOutButtons extends AsyncTask<Void, Void, Void> {

  @Override
  protected Void doInBackground(Void... params) {
   try {
    Thread.sleep(1000);
   } catch (InterruptedException e) {
   }
   return null;
  }

  @Override
  protected void onPostExecute(Void result) {
   fadeOutAll();
   super.onPostExecute(result);
  }

  @Override
  protected void onPreExecute() {
   Animation fadeIn = AnimationUtils.loadAnimation(
     MyActivity.this, android.R.anim.fade_in);
   mButtonHolder.startAnimation(fadeIn);
   mButtonHolder.setVisibility(View.VISIBLE);
   final int sz = mImages.size();
   if (sz > 1) {
    if (mPosition < sz - 1) {
     mRightArrow.startAnimation(fadeIn);
     mRightArrow.setVisibility(View.VISIBLE);
    }
    if (mPosition > 0) {
     mLeftArrow.startAnimation(fadeIn);
     mLeftArrow.setVisibility(View.VISIBLE);
    }
   }
   super.onPreExecute();
  }
 }
@Override


public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
   float velocityY) {
  final int sz = mImages.size();
  if (sz > 1) {

   if (velocityX < 0 && mPosition < sz - 1) {
    mInactive = mActive;
    mActive = (ImageView) mSwitcher.getNextView();
    mActive.setImageResource(mImages.get(++mPosition));
    mSwitcher.showNext();
   } else if (velocityX > 0 && mPosition > 0) {
    mInactive = mActive;
    mActive = (ImageView) mSwitcher.getNextView();
    mActive.setImageResource(mImages.get(--mPosition));
    mSwitcher.showPrevious();
   }
  }
  mInactive.setImageURI(null);

  return true;
 }

¿Alguno de ustedes todo lo hecho como esto antes? ¿Cómo puedo hacer solamente la flecha izquierda desaparece cuando la tercera imagen se enfoca, y sólo el más adecuado cuando la primera es ... y así sucesivamente ...? He estado atascado en esto durante una hora.

Gracias!

Lo sentimos sobre el formato.

Answer 1

En primer lugar, no utilice un AsyncTask si usted no está realmente haciendo ningún trabajo de fondo (para dormir no cuenta como trabajo!). Use un Handler unido al hilo de interfaz de usuario y postDelayed() a ella.

Ejemplo de trabajo del desvanecimiento vistas en Y OUT

En primer lugar, su main.xml diseño:

<?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"
    >
<ImageSwitcher  
    android:id="@+id/imageSwitcher"
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    />

<Button android:id="@+id/prev"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:text="Previous"
    />

<Button android:id="@+id/next"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:text="Next"
    />

</RelativeLayout>

Sí estoy usando los botones en lugar de imageviews, sólo para mantener el ejemplo sencillo.

Ahora el fade in y fade out animaciones:

fade_in.xml :          

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha xmlns:android="http://schemas.android.com/apk/res/android"
       android:interpolator="@android:anim/accelerate_interpolator"
       android:fromAlpha="1.0" 
       android:toAlpha="0.0" 
       android:duration="500" 
       android:fillAfter="true"/>

Por último, algo de código real de su actividad principal:

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.ImageSwitcher;
import android.widget.ImageView;
import android.widget.ViewSwitcher.ViewFactory;

public class MainActivity extends Activity implements ViewFactory, OnTouchListener {

    ImageSwitcher imageSwitcher;
    View prev,next;
    Handler handler = new Handler();

    static final int[] images = {
        R.drawable.pic1,
        R.drawable.pic2,
        R.drawable.pic3
    };
    int currentImageIndex = 0;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        imageSwitcher = (ImageSwitcher)findViewById(R.id.imageSwitcher);
        imageSwitcher.setFactory(this);
        imageSwitcher.setOnTouchListener(this);
        prev = findViewById(R.id.prev);        
        next = findViewById(R.id.next);        
        setCurrentImage();
        scheduleHideButtons();
    }

    private void setCurrentImage() {
        imageSwitcher.setImageResource(images[currentImageIndex]);
    }

    private void scheduleHideButtons() {
        handler.removeCallbacks(hideButtonsRunnable);
        handler.postDelayed(hideButtonsRunnable, 3000);
    }
    private Runnable hideButtonsRunnable = new Runnable() {
        @Override public void run() {
            fadeButtons(false);
        }       
    };

    private void fadeButtons(final boolean fadeIn) {
        if (fadeIn) {
            scheduleHideButtons();
        }
        Animation anim = AnimationUtils.loadAnimation(this, fadeIn?R.anim.fade_in:R.anim.fade_out);
        prev.startAnimation(anim);
        next.startAnimation(anim);
        anim.setAnimationListener(new AnimationListener() {
        @Override
        public void onAnimationEnd(Animation animation) {
                prev.setVisibility(fadeIn?View.VISIBLE:View.GONE);
                next.setVisibility(fadeIn?View.VISIBLE:View.GONE);
            }
            @Override public void onAnimationRepeat(Animation animation) { }
            @Override public void onAnimationStart(Animation animation) { }             
        });
    }

    @Override
    public View makeView() {
        ImageView imageView = new ImageView(this);
        imageView.setBackgroundColor(0xFF000000);
        imageView.setScaleType(ImageView.ScaleType.FIT_CENTER);
        imageView.setLayoutParams(new ImageSwitcher.LayoutParams(
            ImageSwitcher.LayoutParams.FILL_PARENT,
            ImageSwitcher.LayoutParams.FILL_PARENT));
        return imageView;
    }

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        if (event.getAction()==MotionEvent.ACTION_DOWN) {
            if (prev.getVisibility()==View.GONE) {
                fadeButtons(true);
            }
            else {
                scheduleHideButtons();
            }
        }
        return false;
    }
}