Как начать общий переход элементов с помощью фрагментов?

Question

Я пытаюсь реализовать переходы между фрагментами, которые имеют «общие элементы», как описано в новых спецификациях дизайна материалов. Единственный способ, который я могу найти, это ActivityOptionsCompat.makeSceneTransitionAnimation, который, я считаю, работает только с Activity. Я искал эту же функциональность, но с/для фрагментов.

Answer 1

У меня была такая же проблема, но она работала, добавляя новый фрагмент из другого фрагмента. Следующая страница этого раздела очень полезна для начала работы: https://developer.android.com/training/material/animations.html#Transitions

Следующий мой код, который работает. Я анимация ImageView от одного фрагмента к другому. Убедитесь, что View, который вы хотите оживить, имеет одинаковые android:transitionName в обоих фрагментах. Другое содержание не имеет большого значения.

В качестве теста вы можете скопировать его в оба ваших XML-файла макета. Убедитесь, что изображение существует.

<ImageView 
android:transitionName="MyTransition" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:scaleType="centerCrop" 
android:src="@drawable/test_image" /> 

Тогда у меня есть 1 файл в моем res/transition папку с именем change_image_transform.xml.

<?xml version="1.0" encoding="utf-8"?> 
<transitionSet xmlns:android="http://schemas.android.com/apk/res/android"> 
    <changeImageTransform /> 
</transitionSet> 

Теперь вы можете начать. Допустим, у вас есть фрагмент А, содержащий изображение и хотите добавить фрагмент B.

Запустить в Fragment A:

@Override 
public void onClick(View v) { 
    switch(v.getId()) { 
     case R.id.product_detail_image_click_area: 
      if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) { 
       setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.change_image_transform)); 
       setExitTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.explode)); 

       // Create new fragment to add (Fragment B) 
       Fragment fragment = new ImageFragment(); 
       fragment.setSharedElementEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.change_image_transform)); 
       fragment.setEnterTransition(TransitionInflater.from(getActivity()).inflateTransition(android.R.transition.explode)); 

       // Our shared element (in Fragment A) 
       mProductImage = (ImageView) mLayout.findViewById(R.id.product_detail_image); 

       // Add Fragment B 
       FragmentTransaction ft = getFragmentManager().beginTransaction() 
         .replace(R.id.container, fragment) 
         .addToBackStack("transaction") 
         .addSharedElement(mProductImage, "MyTransition"); 
       ft.commit(); 
      } 
      else { 
       // Code to run on older devices 
      } 
      break; 
    } 
} 

Answer 2

Я отправляю это как ответ, так как я новичок здесь и не могу комментировать.

Переходы фрагмента общего элемента do работают с ListViews, если исходное и целевое представления имеют одинаковое (и уникальное) имя перехода.

Если вы сделаете свой список вид адаптера установить уникальные transitionNames мнение, которые вы хотите (например, некоторая константа + конкретный идентификатор элемента) , а также изменить фрагмент детали, чтобы установить то же transitionNames на целевых просмотры во время выполнения (onCreateView), переходы действительно работают!

Answer 3

Общие элементы работают с фрагментами, но есть некоторые вещи, которые нужно иметь в виду:

1. Не пытайтесь установить sharedElementsTransition в onCreateView вашего фрагмента. Вы должны определить их при создании экземпляра вашего фрагмента или в onCreate.

2. Обратите внимание на официальную документацию о возможных анимациях для переходов ввода/выхода & sharedElementTransition. Они не одинаковы.

3. проб и ошибок :)

Answer 4

Это должно быть комментарий к принятому ответ, так как я не могу прокомментировать.

Принятый ответ (от WindsurferOak и ar34z) работает, за исключением «незначительной» проблемы, которая вызвала исключение нулевого указателя при навигации с backStack. Кажется, что setSharedElementReturnTransition() следует вызывать на целевом фрагменте вместо исходного фрагмента.

Таким образом, вместо:

setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.change_image_transform)); 

должно быть

fragment.setSharedElementReturnTransition(TransitionInflater.from(getActivity()).inflateTransition(R.transition.change_image_transform)); 

https://github.com/tevjef/Rutgers-Course-Tracker/issues/8

Answer 5

Ниже приведены некоторые полезные ресурсы:

https://github.com/lgvalle/Material-Animations

http://www.androiddesignpatterns.com/2014/12/activity-fragment-transitions-in-android-lollipop-part1.html

https://www.youtube.com/watch?v=5e1Yh0fSZhQ

Answer 6

Ключ использовать пользовательскую транзакцию с

transaction.addSharedElement(sharedElement, "sharedImage"); 

---

Shared элемент перехода между двумя фрагментами

В этом примере, один из двух различных ImageViews следует перевести с ChooserFragment - DetailFragment.

В ChooserFragment макете нам нужны уникальные transitionName атрибуты:

<ImageView 
    android:id="@+id/image_first" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_first" 
    android:transitionName="fistImage" /> 

<ImageView 
    android:id="@+id/image_second" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:src="@drawable/ic_second" 
    android:transitionName="secondImage" /> 

В ChooserFragments классе, нам нужно пройти View, который щелкнул и идентификатор родительского Activity которым обрабатывает замена фрагменты (нам нужен идентификатор, чтобы узнать, какой ресурс изображения будет отображаться в DetailFragment). Как подробно передавать информацию в родительскую деятельность, безусловно, рассматривается в другой документации.

view.findViewById(R.id.image_first).setOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View view) { 
     if (mCallback != null) { 
      mCallback.showDetailFragment(view, 1); 
     } 
    } 
}); 

view.findViewById(R.id.image_second).setOnClickListener(new View.OnClickListener() { 
    @Override 
    public void onClick(View view) { 
     if (mCallback != null) { 
      mCallback.showDetailFragment(view, 2); 
     } 
    } 
}); 

В DetailFragment, то ImageView совместно используемого элемента также нуждается уникальный transitionName атрибут.

<ImageView 
    android:id="@+id/image_shared" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="center" 
    android:transitionName="sharedImage" /> 

В onCreateView() способе DetailFragment, мы должны решить, какое изображение ресурс должен быть показаны (если мы не делаем этого, общий элемент исчезнет после перехода).

public static DetailFragment newInstance(Bundle args) { 
    DetailFragment fragment = new DetailFragment(); 
    fragment.setArguments(args); 
    return fragment; 
} 

@Nullable 
@Override 
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { 
    super.onCreateView(inflater, container, savedInstanceState); 
    View view = inflater.inflate(R.layout.fragment_detail, container, false); 

    ImageView sharedImage = (ImageView) view.findViewById(R.id.image_shared); 

    // Check which resource should be shown. 
    int type = getArguments().getInt("type"); 

    // Show image based on the type. 
    switch (type) { 
     case 1: 
      sharedImage.setBackgroundResource(R.drawable.ic_first); 
      break; 

     case 2: 
      sharedImage.setBackgroundResource(R.drawable.ic_second); 
      break; 
    } 

    return view; 
} 

Родитель Activity является получение обратных вызовов и обрабатывает замену фрагментов.

@Override 
public void showDetailFragment(View sharedElement, int type) { 
    // Get the chooser fragment, which is shown in the moment. 
    Fragment chooserFragment = getFragmentManager().findFragmentById(R.id.fragment_container); 

    // Set up the DetailFragment and put the type as argument. 
    Bundle args = new Bundle(); 
    args.putInt("type", type); 
    Fragment fragment = DetailFragment.newInstance(args); 

    // Set up the transaction. 
    FragmentTransaction transaction = getFragmentManager().beginTransaction(); 

    // Define the shared element transition. 
    fragment.setSharedElementEnterTransition(new DetailsTransition()); 
    fragment.setSharedElementReturnTransition(new DetailsTransition()); 

    // The rest of the views are just fading in/out. 
    fragment.setEnterTransition(new Fade()); 
    chooserFragment.setExitTransition(new Fade()); 

    // Now use the image's view and the target transitionName to define the shared element. 
    transaction.addSharedElement(sharedElement, "sharedImage"); 

    // Replace the fragment. 
    transaction.replace(R.id.fragment_container, fragment, fragment.getClass().getSimpleName()); 

    // Enable back navigation with shared element transitions. 
    transaction.addToBackStack(fragment.getClass().getSimpleName()); 

    // Finally press play. 
    transaction.commit(); 
} 

Не следует забывать - сама Transition. Этот пример перемещает и масштабирует общий элемент.

@TargetApi(Build.VERSION_CODES.LOLLIPOP) 
public class DetailsTransition extends TransitionSet { 

    public DetailsTransition() { 
     setOrdering(ORDERING_TOGETHER); 
     addTransition(new ChangeBounds()). 
      addTransition(new ChangeTransform()). 
      addTransition(new ChangeImageTransform()); 
    } 

}