Android TransitionDrawable con varios elementos
Quiero crear un botón en Android con un texto, y una imagen de fondo. La imagen de fondo debe fundirse cada vez X.
Tengo esto trabajando con un TransitionDrawable con 2 imágenes.
Pero no puedo conseguir que esto funcione con más de 2 imágenes.
Lo que tengo :
En código Java creo un botón y establecer un fondo (que es un TransitionDrawable definido en XML). Y comienzo la transición.
final Button b = new Button(getApplicationContext()); b.setTextColor(getResources().getColor(R.color.white)); b.setText("Some text"); b.setBackgroundDrawable(getResources().getDrawable(R.drawable.tile)); StateListDrawable background = (StateListDrawable) b.getBackground(); TransitionDrawable td = (TransitionDrawable) background.getCurrent(); td.startTransition(2000); En XML que defino en tile.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:state_pressed="true" > <shape> <solid android:color="#449def" /> </shape> </item> <item android:drawable="@drawable/transition"> <shape> <solid android:color="#0000ff" /> </shape> </item> </selector>
Y finalmente una transition.xml
<?xml version="1.0" encoding="utf-8"?> <transition xmlns:android="http://schemas.android.com/apk/res/android" android:oneshot="false"> <item android:drawable="@drawable/desert"/> <item android:drawable="@drawable/hydrangeas" /> <item android:drawable="@drawable/jellyfish" /> </transition>
Ahora el efecto es que cuando comienzo la aplicación se muestra la imagen del desierto. Esta imagen se transfiere a la imagen de los hortensias como debería. Pero la imagen de las medusas nunca se muestra.
En el documento de TransitionDrawables se afirma que puede especificar más de 2 drawables pero no puedo conseguir que esto funcione.
También he intentado esto sin ningún XML, pero en JAVA puro, pero esto dio exactamente el mismo problema 🙁
De acuerdo con la documentación oficial, TransitionDrawable sólo puede cruzarse entre dos capas, citando a partir de la referencia oficial de Android.
Una extensión de LayerDrawables que está destinada a cross-fade entre la primera y la segunda capa. Para iniciar la transición, llame a startTransition (int). Para mostrar sólo la primera capa, llame a resetTransition ().
Si no lo lees con cuidado, ya que extiende LayerDrawables, que puede tener múltiples capas, uno puede esperar que puedas desvanecerse de N capas. Pero es muy claro, startTransition muestra la segunda capa, resetTransition muestra la primera.
Le sugiero que haga su propia implementación para múltiples transiciones. Lo que haría es tener 2 imágenes y animarlas. Es posible que necesite ajustar los caracteres desplegables a mano, pero debería ser un código de código bastante simple.
En el tiempo de funcionamiento del apéndice puede cambiar dinámicamente las imágenes
Utilice td.setDrawableByLayerId (td.getId (1), drawable) en su TransitionDrawable
TransitionDrawable transitionDrawable = (TransitionDrawable) myImage .getDrawable(); transitionDrawable.setDrawableByLayerId(transitionDrawable.getId(1), getResources() .getDrawable(R.drawable.c));
Puede hacerlo utilizando un manejador
mAnimateImage is your button int DrawableImage[] = {R.drawable.back_red, R.drawable.back_green, R.drawable.back_purple}; final Handler handler = new Handler(); final int[] i = {0}; final int[] j = {1}; handler.postDelayed(new Runnable() { @Override public void run() { runOnUiThread(new Runnable() { @Override public void run() { Resources res = getApplicationContext().getResources(); TransitionDrawable out = new TransitionDrawable(new Drawable[]{res.getDrawable(DrawableImage[i[0]]), res.getDrawable(DrawableImage[j[0]])}); out.setCrossFadeEnabled(true); mAnimateImage.setBackgroundDrawable(out); out.startTransition(4000); i[0]++; j[0]++; if (j[0] == DrawableImage.length) { j[0] = 0; } if (i[0] == DrawableImage.length) { i[0] = 0; } handler.postDelayed(this, 8000); } }); } }, 0);
Sólo puede transicionar dos imágenes como máximo con TransitionDrawable . Para trabajar con más de dos imágenes, puede extender LayerDrawable e implementar su propio TransitionDrawable .
Aquí está la implementación lista de TransitionDrawable personalizado para trabajar con más de dos imágenes.
Usted puede ver la muestra completa junto con la demo gif aquí en Github .