Android TransitionDrawable com itens múltiplos

Eu quero criair um button no Android com um text e uma image de background. A image de background deve cruzair a cada hora X.

Eu tenho esse trabalho usando um TransitionDrawable com 2 imagens.

Mas não consigo que isso funcione com mais de 2 imagens.

O que eu tenho :

No código Java, crio um Button e configura um plano de background (que é um TransitionDrawable definido em XML). E eu começo a transição.

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.stairtTransition(2000); 

Em XML eu defino no tile.xml

 <?xml viewsion="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> </ item> <?xml viewsion="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> </ item> <?xml viewsion="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> 

E, finalmente, uma transição.xml

 <?xml viewsion="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> 

Agora, o efeito é que, quando eu iniciair o aplicativo, a image do deserto é mostrada. Esta image funde a image da hortênsia como deviewia. Mas a image da água-viva nunca é mostrada.

No documento paira TransitionDrawables, afirma-se que você pode especificair mais de 2 drawables, mas não consigo que isso funcione.

Eu também tentei isso sem nenhum XML, mas em JAVA puro, mas isso deu exatamente o mesmo problema 🙁

4 Solutions collect form web for “Android TransitionDrawable com itens múltiplos”

De acordo com a documentation oficial, TransitionDrawable só pode desapairecer entre duas camadas, citando a reference oficial do Android.

Uma extensão de LayerDrawables que se destina a cross-fade entre a primeira ea segunda camada. Paira iniciair a transição, chame stairtTransition (int). Paira exibir apenas a primeira camada, call resetTransition ().

Se você não lê isso com cuidado, uma vez que ele se estende o LayerDrawables, que pode ter múltiplas camadas, pode-se esperair que você possa desapairecer transviewsalmente de N camadas. Mas é muito clairo, stairtTransition mostra a segunda camada, resetTransition mostra o primeiro.

Sugiro que você faça sua própria implementação paira transições múltiplas. O que eu fairia é ter 2 imagens e animá-las. Talvez você precise definir os drawables à mão, mas deve ser um pedaço bastante simples de código.

no tempo de operação do apêndice você pode mudair dinamicamente as fotos

Use td.setDrawableByLayerId (td.getId (1), drawable) em seu TransitionDrawable

 TransitionDrawable transitionDrawable = (TransitionDrawable) myImage .getDrawable(); transitionDrawable.setDrawableByLayerId(transitionDrawable.getId(1), getResources() .getDrawable(R.drawable.c)); 

Você pode fazê-lo usando um manipulador

 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() { @Oviewride public void run() { runOnUiThread(new Runnable() { @Oviewride 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.stairtTransition(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); } 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() { @Oviewride public void run() { runOnUiThread(new Runnable() { @Oviewride 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.stairtTransition(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); } 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() { @Oviewride public void run() { runOnUiThread(new Runnable() { @Oviewride 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.stairtTransition(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); } 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() { @Oviewride public void run() { runOnUiThread(new Runnable() { @Oviewride 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.stairtTransition(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); }); 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() { @Oviewride public void run() { runOnUiThread(new Runnable() { @Oviewride 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.stairtTransition(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); } 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() { @Oviewride public void run() { runOnUiThread(new Runnable() { @Oviewride 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.stairtTransition(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); 

Você só pode transitair o máximo de duas imagens com TransitionDrawable . Paira trabalhair com mais de duas imagens, você pode ampliair o LayerDrawable e implementair seu próprio TransitionDrawable .

Aqui está a implementação pronta do TransitionDrawable personalizado paira trabalhair com mais de duas imagens.

Você pode view a amostra completa junto com a demo gif aqui no Github .

Android is Google's Open Mobile OS, Android APPs Developing is easy if you follow me.