Переход с измененного элемента не работает

Я создал проект github только с этой проблемой. Вы можете увидеть его/клонировать/построить его здесь: https://git.io/vMPqb


Я пытаюсь получить общие элементы, работающие для перехода фрагмента.

В проекте есть два FAB - Feather and Plane. Перо и плоскость являются общими элементами. Когда кликнуто перо, открывается SheetDialog, и перо должно анимировать диалог Plane. На данный момент это не так, и я пытаюсь определить, почему.

Возможно, стоит отметить, что я запускаю это на API 24, поэтому проблемы с переходами, которые не поддерживаются ниже версии 21, не являются проблемой.

Может ли кто-нибудь сказать мне, почему общие переходы элементов не работают?

Чтобы повторить то, что есть в репо, есть четыре важных файла:

Основная деятельность

package test.example.fabpop;

import android.os.Bundle;
import android.support.design.widget.FloatingActionButton;
import android.support.transition.ChangeBounds;
import android.support.transition.Fade;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    FloatingActionButton fab_feather;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        fab_feather = (FloatingActionButton) findViewById(R.id.initial_fab_feather);
    }

    public void fabClick(View view) {
        SheetDialog dialogFragment = new SheetDialog();

        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();

        // This seemingly has no effect. I am trying to get it to work.
        transaction.addSharedElement(fab_feather, "transition_name_plane");

        dialogFragment.setSharedElementEnterTransition(new ChangeBounds());
        dialogFragment.setSharedElementReturnTransition(new Fade(Fade.OUT));

        dialogFragment.show(transaction, "frag_tag");
    }
}

activity_main.xml Макет

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="test.example.fabpop.MainActivity">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:orientation="vertical">
        <TextView
            android:layout_width="200dp"
            android:layout_height="wrap_content"
            android:text="Transition to a BottomSheetDialogFragment that shares this FAB"
            android:textAlignment="center"/>

        <!--  Feather FAB  -->
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/initial_fab_feather"
            android:layout_width="52dp"
            android:layout_height="52dp"
            android:layout_margin="16dp"
            android:layout_gravity="center"
            android:onClick="fabClick"
            android:transitionName="transition_name_feather"
            android:src="@drawable/ic_feather"
            />
    </LinearLayout>


</RelativeLayout>

SheetDialog

package test.example.fabpop;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.design.widget.BottomSheetDialogFragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class SheetDialog extends BottomSheetDialogFragment {

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {

        return inflater.inflate(R.layout.dialog_sheet, container, false);
    }
}

dialog_sheet.xml Макет

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!--  Plane FAB  -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/final_fab_plane"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:layout_margin="16dp"
        android:transitionName="transition_name_plane"
        android:src="@drawable/ic_plane"
        />

</LinearLayout>

Невозможно ли иметь общий элемент при переходе между одним действием и одним фрагментом? Возможно, это возможно только между Activity to Activity или Fragment to Fragment, но не через два типа? Может быть, поэтому я не могу заставить его работать?

Update:

Теперь я попытался добавить <item name="android:windowContentTransitions">true</item> к теме приложения.

Я также попробовал, гарантируя, что оба значения transitionName одинаковы для обоих представлений.

ни один из них не помог устранить проблему.

Ответ 1

Прежде чем погрузиться в...

Давайте сначала выделим некоторые моменты о том, как андроидная инфраструктура выполняет магический переход общего элемента.

Переход с общим элементом - это всего лишь одна из фреймворков андроидов. Когда вы выполняете переход с общим элементом, вы фактически не используете какое-либо представление между вашими действиями, e.i, каждое действие имеет независимое дерево представлений.

Предположим, что вы пытаетесь перевести element с именем element1 из Activity1 в element2 в Activity2.

Что делает структура, так это то, что она ищет определенную информацию, такую ​​как размер (width, height) и позицию (x, y) вашего element1 в Activity1. Затем он передает эту информацию в Activity2, применяет ее к element2 и запускает переход активности путем обратного анимации вашего element2, который создает эту иллюзию общего элемента.

Однако для этого требуется создание Activity2, чтобы view, соответствующий element2, быть найденным до запуска любой анимации.

В случае использования Fragment вызов FragmentTransaction.commit() будет только планировать транзакцию фрагмента (фрагмент не будет создан сразу), поэтому, когда ваш Activity2 создан, ваш element2 отсутствует (поскольку я просто сказал, потому что фрагмент, содержащий его, еще не создан).

Решение

Убедитесь, что ваш element2 создан до начала анимации. Таким образом, вам нужно найти способ рассказать о том, что инфраструктура не выполняет обычную вещь, но перед созданием анимации подождите вместо этого.

Один из способов сделать это - изменить код на что-то похожее на это:

деятельности2

class Activity2 extends Activity{
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // ...
        // Tell the framework to wait.
        postponeEnterTransition();
    }
}

FRAGMENT2

class Fragment2 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    View element2 = getView().findViewById(R.id.element);
    sharedview.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
        @Override
        public boolean onPreDraw() {
                // Tell the framework to start.
                sharedview.getViewTreeObserver().removeOnPreDrawListener(this);
                getActivity().startPostponedEnterTransition(); 
                return true;
         }
       });
    }
}

Дальнейшее чтение

Начало работы с действиями и переходы фрагментов

Ответ 2

Что вы ищете, так это: https://github.com/hujiaweibujidao/FabDialogMorph. Обратите внимание, что то, что вы пытаетесь достичь, не является стандартным Android-переходом, вам нужно создать свой собственный переход на морфинг, основанный на переходе ChangeBounds. Первоначально это было показано в Plaid, благодаря Nick Butcher для, поэтому вы можете проверить его для получения дополнительных советов и фона.

Ответ 3

Просто указывая Android Docs:

Запустить действие с общим элементом

  1. Назначьте общее имя совместно используемым элементам в обоих макетах с атрибутом android: transitionName.

Из того, что я вижу, оба ваших XML не используют один и тот же android: transitionName.

Попробуйте изменить оба android: transitionName в макете XML (activity_main.xml и dialog_sheet.xml) в одну строку, например: transition_plane_feather

Я сам не тестировал коды, но думаю, что это может быть хорошей отправной точкой.

Бонусный совет

Если вы планируете полностью реализовать Material Design без совместимости с более низкими уровнями API (pre-Lollipop), я настоятельно рекомендую проверить образец, сделанный дизайнером пользовательского интерфейса UI/UX: https://github.com/nickbutcher/plaid

Кроме того, ознакомьтесь с отличным дополнительным видео YouTube на этот образец: https://www.youtube.com/watch?v=EjTJIDKT72M

Он показывает вам некоторые из лучших трюков и практик, которые вы можете использовать для полного выполнения Material Design, а также для переходов общих элементов.