Android TransitionDrawable с несколькими элементами

Я хочу создать кнопку в Android с текстом и фоновым изображением. Фоновое изображение должно пересекаться каждые X раз.

У меня это работает, используя TransitionDrawable с двумя изображениями.

Но я не могу заставить это работать с более чем двумя изображениями.

Что у меня:

В коде Java я создаю кнопку и устанавливаю фон (который является TransitionDrawable, определенным в XML). И я начинаю переход.

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

В XML я определяю в 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>

И, наконец, 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>

Теперь эффект заключается в том, что при запуске приложения отображается изображение пустыни. Это изображение пересекает изображение гортензии, как должно. Но изображение медузы никогда не отображается.

В документе для TransitionDrawables указано, что вы можете указать более двух чертежей, но я не могу заставить это работать.

Я также пробовал это без какого-либо XML, но в чистом JAVA, но это дало точно такую же проблему: - (

Ответ 1

Вы можете сделать это, используя обработчик

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

Ответ 2

Согласно официальной документации TransitionDrawable может пересекать только 2 слоя, ссылаясь на официальную ссылку на Android.

Расширение LayerDrawables, предназначенное для первый и второй слои. Чтобы начать переход, вызовите startTransition (INT). Чтобы отобразить только первый слой, вызовите resetTransition().

Если вы не прочитали его внимательно, так как он расширяет LayerDrawables, который может иметь несколько уровней, можно ожидать, что вы сможете пересечь слои из N слоев. Но это очень ясно, startTransition показывает второй уровень, resetTransition показывает первый.

Я предлагаю вам выполнить свою собственную реализацию для нескольких переходов. Я бы сделал это, чтобы иметь 2 изображения и оживить их. Вам может потребоваться установить чертежи вручную, но это должен быть довольно простой фрагмент кода.

Ответ 3

в приложении время работы вы можете динамически изменять фотографии

Используйте td.setDrawableByLayerId(td.getId(1), drawable) на TransitionDrawable

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

Ответ 4

Вы можете переместить максимум два изображения с помощью TransitionDrawable. Чтобы работать с более чем двумя изображениями, вы можете расширить LayerDrawable и реализовать свой собственный TransitionDrawable.

Вот готовая реализация пользовательского TransitionDrawable для работы с более чем двумя изображениями.

Вы можете увидеть полный образец вместе с демонстрацией gif здесь, на Github.