如何在Navigation Controller中使用共享元素转换

Question

我想在导航到其他片段时使用导航架构组件添加共享元素转换.但我不知道怎么做.在文件中也没有任何关于它的内容.有人能帮我吗？

Answer 1

FirstFragment

val extras = FragmentNavigatorExtras(
    imageView to "secondTransitionName")
view.findNavController().navigate(R.id.confirmationAction,
    null, // Bundle of args
    null, // NavOptions
    extras)

first_fragment.xml

<ImageView
    android:id="@+id/imageView"
    android:transitionName="firstTransitionName"
    ...
 />

SecondFragment

override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?,
                          savedInstanceState: Bundle?): View {
    sharedElementEnterTransition = ChangeBounds().apply {
        duration = 750
    }
    sharedElementReturnTransition= ChangeBounds().apply {
        duration = 750
    }
    return inflater.inflate(R.layout.second_fragment, container, false)
}

second_fragment.xml

<ImageView
    android:transitionName="secondTransitionName"
    ...
 />

我测试了它.这是有效的.

Answer 2

从1.0.0-alpha06开始,导航组件支持在目标之间添加共享元素转换.只需将FragmentNavigatorExtras添加到navigate()调用即可.更多详细信息:https://developer.android.com/topic/libraries/architecture/navigation/navigation-implementing#shared-element

val extras = FragmentNavigatorExtras(
    imageView to "header_image",
    titleView to "header_title")
view.findNavController().navigate(R.id.confirmationAction,
    null, // Bundle of args
    null, // NavOptions
    extras)

Answer 3

要从 recyclerView 的 ImageView 进行这项工作，请设置如下所示的所有内容：

val adapter = PostAdapter() { transitionView, post ->
    findNavController().navigate(
        R.id.action_postsFragment_to_postsDetailFragment,
        null,
        null,
        FragmentNavigatorExtras(transitionView to getString(R.string.transition_image)))
}

在适配器中，这可以解决问题：

itemView.setOnClickListener {
    ViewCompat.setTransitionName(imageView, itemView.context.getString(R.string.transition_image))
    onClickedAction?.invoke(imageView, post)
}

您不必在适配器的项目的 xml 中指定转换名称，只需在单击项目后立即从代码中设置它。

onClickedAction 看起来像：

private val onClickedAction: ((transitionView: View, post: Post) -> Unit)?

然后你把它传递给你的 ViewHolder。

在第二个 Fragment 中，您将转换名称设置为 xml 中的 ImageView：

android:transitionName="@string/transition_image"

并分配过渡像

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    val transition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)
    sharedElementEnterTransition = transition
    sharedElementReturnTransition = transition
}

Answer 4

我从这个github示例https://github.com/serbelga/android_navigation_shared_elements中引用了

cardView.setOnClickListener{
  val extras = FragmentNavigatorExtras(
    imageView to "imageView"
  )
  findNavController().navigate(R.id.detailAction, null, null, extras)
}

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  sharedElementEnterTransition = TransitionInflater.from(context).inflateTransition(android.R.transition.move)

它工作正常。

Answer 5

对于 Java

要使共享元素创建一个方法，如：

void sharedNavigation(int id, View... views) {
        FragmentNavigator.Extras.Builder extras = new FragmentNavigator.Extras.Builder();
        for (View view : views)
            extras.addSharedElement(view, view.getTransitionName());
        FragmentNavigator.Extras build = extras.build();
        Navigation.findNavController(getView()).navigate(id,
                null,
                null,
                build);
    }

在目标类或基类中，您必须在 onCreate() 中添加以下代码。

@Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setSharedElementEnterTransition(TransitionInflater.from(getContext())
                .inflateTransition(android.R.transition.move));
    }

并制作过渡动画，将 id 和视图提供给 sharedNavigation() ，如下所示：

sharedNavigation(R.id.action_splashFragment_to_loginFragment,
                        getView().findViewById(R.id.logo));