Android TransitionDrawable mit mehreren Elementen

Question

Ich möchte eine Schaltfläche in Android mit einem Text und einem Hintergrundbild erstellen. Das Hintergrundbild sollte jede X-Zeit überblenden.

Ich habe dies funktioniert mit einem TransitionDrawable mit 2 Bildern.

Aber ich kann das nicht mit mehr als 2 Bildern arbeiten.

Was ich habe:

In Java Code, den ich einen Button erstellen und einen Hintergrund (das ist ein TransitionDrawable in XML definiert ist). Und ich beginne den Übergang.

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); 

In XML definiere ich in 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> 

Und schließlich ein 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> 

Nun wird der Effekt, dass, wenn ich die App die Wüste Bild beginnen gezeigt . Dieses Bild überblendet das Hortensien Bild wie es sollte. Aber das Quallenbild wird nie gezeigt.

In dem Dokument für TransitionDrawables wird angegeben, dass Sie mehr als 2 Zeichen angeben können, aber ich kann dies nicht zum Funktionieren bringen.

Ich habe auch versucht dies ohne XML aber in rein JAVA aber das gab genau das gleiche Problem :-(

Answer 1

Sie können es tun, indem Sie einen Handler

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); 

Answer 2

Nach der offiziellen Dokumentation, TransitionDrawable können nur Überblendungs ​​unter 2 Schichten, aus dem offiziellen Android zitieren Referenz.

Eine Erweiterung LayerDrawables die zwischen die erste und die zweite Schicht ist. um zu beginnen, den Übergang, rufen startTransition (int). So zeigen nur die erste Schicht, rufen resetTransition zur Überblendungs ​​vorgesehen ist ()

Wenn Sie es nicht sorgfältig lesen, da es LayerDrawables erweitert, die mehrere Ebenen haben können, könnte man erwarten, dass Sie von N Ebenen überblenden können. Aber es ist sehr klar, startTransition zeigt die zweite Schicht, resetTransition zeigt die erste.

Ich schlage vor, dass Sie Ihre eigene Implementierung für mehrere Übergänge machen. Was ich tun würde, ist 2 Bilder zu haben und sie zu animieren. Möglicherweise müssen Sie die Zeichensatz von Hand festlegen, aber es sollte ein recht einfaches Stück Code sein.

Answer 3

in Anhang Betriebszeit können Sie dynamisch Bilder ändern

Verwenden td.setDrawableByLayerId (td.getId (1), ziehbar) auf TransitionDrawable

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

Answer 4

Sie können nur maximal Übergang zwei Bilder mit TransitionDrawable. Um mit mehr als zwei Bildern zu arbeiten, können Sie LayerDrawable erweitern und eigene TransitionDrawable implementieren.

Here's die fertige Implementierung von benutzerdefinierten TransitionDrawable mit mehr als zwei Bildern zu arbeiten.

Sie können das vollständige Beispiel zusammen mit der GIF-Demo here on Github sehen.