Android过渡框架之共享元素过渡

2021-04-23 本文已影响0人 koinzhang

上篇文章介绍了MVVM架构的搭建，这次继续完善Android All Star项目，实现Android All Star的搜索功能。使用Android的过渡框架模仿微信的搜索框，实现两个界面之间搜索框平滑切换的效果

先上最终实现效果图：

效果图

过渡框架简介

Android 4.4.2 中引入了 Transition 过渡动画，借助 Android 的过渡框架，只需提供起始布局和结束布局，即可为界面中的各种view切换添加动画效果，从开发的角度来讲，过渡框架就是实现了View树（View Hierarchy）之间的动画切换。

过渡框架包含以下功能：

群组级动画：将一个或多个动画效果应用于视图层次结构中的所有视图。
内置动画：对淡出或移动等常见效果使用预定义动画。
资源文件支持：从布局资源文件加载视图层次结构和内置动画。
生命周期回调：接收可控制动画和层次结构更改流程的回调。

作共享元素过渡为过渡框架中的一部分，可以配置fragment过渡期间相应视图如何在两个fragment之间移动。例如，您可能希望显示在fragmenA上ImageView中的图像在fragmentB变得可见后过渡到fragmentB，效果见下图：

shared-element-transition

共享元素过渡的实现

普通方式实现共享元素过渡需要三步：

为每个共享元素视图分配一个唯一的过渡名称。
FragmentTransaction添加共享元素视图和切换后对应共享元素视图的过渡名称。
设置共享元素过渡动画。

首先，为了将视图从一个fragment映射到下一个fragment，必须为每个共享元素视图分配唯一的过渡名称。使用ViewCompat.setTransitionName()为每个fragment布局中的共享元素上设置过渡名称，该方式与API级别14及更高版本兼容。例如，fragmentA和fragmentB中的ImageView的过渡名称可以如下分配：

class FragmentA : Fragment() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
         val itemImageView = view.findViewById<ImageView>(R.id.item_image)
         ViewCompat.setTransitionName(itemImageView, “item_image”)
    }
 }
 
 class FragmentB : Fragment() {
     override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        ...
         val heroImageView = view.findViewById<ImageView>(R.id.hero_image)
         ViewCompat.setTransitionName(heroImageView, “hero_image”)
    }
 }

要将共享元素包括在fragment过渡中，FragmentTransaction还需要知道每个共享元素视图如何从一个fragment映射到下一个fragment。通过调用FragmentTransaction.addSharedElement()将每个共享元素添加到FragmentTransaction中，传入的参数是共享元素视图和下一个fragment中对应共享元素的过渡名称，如以下示例所示：

val fragment = FragmentB()
 supportFragmentManager.commit {
     setCustomAnimations(...)
     addSharedElement(itemImageView, “hero_image”)
     replace(R.id.fragment_container, fragment)
     addToBackStack(null)
 }

要指定共享元素如何从一个fragment过渡到下一个fragment，必须在要导航到的fragment中设置进入的过渡效果。在fragment的onCreate()方法中调用Fragment.setSharedElementEnterTransition()添加过渡效果，如以下示例所示：

class FragmentB : Fragment() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         sharedElementEnterTransition = TransitionInflater.from(requireContext())
              .inflateTransition(R.transition.shared_image)
    }
 }

shared_image过渡在xml文件中定义如下：

<!-- res/transition/shared_image.xml -->
 <transitionSet>
     <changeImageTransform />
 </transitionSet>

过渡框架支持将Transition的所有子类作为共享元素的过渡。如果要创建自定义过渡，请参阅创建自定义过渡动画。在上一个示例中使用的changeImageTransform是可以使用的可用预构建转换之一。您可以在Transition类的API参考中找到其他Transition子类。

默认情况下，共享元素的进入过渡动画也用作共享元素的退出过渡动画。退出过渡动画确定了FragmentTransaction从堆栈中弹出时共享元素如何退回上一个fragment。如果要指定其他退出过渡动画，则可以在fragment的onCreate()方法中使用Fragment.setSharedElementReturnTransition()进行指定。

Navigation实现共享元素过渡

在两个目的地之间共享某个视图时，可以使用共享元素过渡来定义从一个目的地导航到另一个目的地时该视图如何过渡。共享元素过渡是过渡框架的一部分。

注意：使用共享元素过渡时，不能使用动画框架（ enterAnim、exitAnim 等），而只能使用过渡框架来设置进入和退出过渡。

共享元素以编程方式提供，而不是通过导航 XML 文件提供。Activity 和 Fragment 目的地各自都有 Navigator.Extras接口的一个子类，它接受导航的附加选项，包括共享元素。您可以在调用 navigate() 时传递这些 Extras。

Navigation实现共享元素过度底层也是借助FragmentTransaction实现，Navigation实现共享元素过渡需要三步：

为每个共享元素视图分配一个唯一的过渡名称。
FragmentNavigatorExtras添加共享元素视图和切换后对应共享元素视图的过渡名称。
设置共享元素过渡动画。

首先，为每个共享元素视图分配一个唯一的过渡名称，每个元素在切换前后的fragment中都需要设置唯一过渡名称，如以下示例所示：

//设置共享元素过渡名称
 ViewCompat.setTransitionName(binding.llSearchBar, "search_enter")
 ViewCompat.setTransitionName(binding.imgSearch, "search_enter_img")
 ViewCompat.setTransitionName(binding.txtSearch, "search_enter_txt")

借助 FragmentNavigator.Extras类，可以按过渡名称将共享元素从一个目的地映射到另一个目的地，这与使用FragmentTransaction.addSharedElement() 类似。随后可以将 extra 传递给 navigate()，如以下示例所示：

val extras = FragmentNavigatorExtras(
 binding.llSearchBar to "search_start",
 binding.imgSearch to "search_start_img",
 binding.txtSearch to "search_start_txt"
 )

将 extra 传递给 navigate(),可以在参数中设置过渡动画效果，如以下示例所示：

binding.llSearchBar.setOnClickListener {
             it.findNavController()
                .navigate(
                     R.id.action_navigation_home_to_searchFragment,
                     null,
                     //切换时共享元素的动画效果，可选
                     NavOptions.Builder().setEnterAnim(R.animator.nav_default_enter_anim)
                        .setExitAnim(R.animator.nav_default_exit_anim)
                        .setPopEnterAnim(R.animator.nav_default_pop_enter_anim)
                        .setPopExitAnim(R.animator.nav_default_pop_exit_anim)
                        .build(),
                     extras
                )
        }

override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         sharedElementEnterTransition = TransitionInflater.from(requireContext()).inflateTransition(R.transition.slide)
         sharedElementReturnTransition = TransitionInflater.from(requireContext()).inflateTransition(R.transition.slide)
    }

slide过渡在xml文件中定义如下：

<?xml version="1.0" encoding="utf-8"?><!-- res/transition/slide_right.xml -->
 <transitionSet>
     <changeScroll />
     <changeBounds />
 </transitionSet>

最后实现的效果如下图所示：

效果图

关于过渡框架还有很多内容可以探索，包括自定义过渡动画、延迟过渡、在RecyclerView中使用共享元素等等，以后有机会继续研究分享。

项目GitHub地址：android_all_star_app

Android过渡框架之共享元素过渡

过渡框架简介

共享元素过渡的实现

Navigation实现共享元素过渡

猜你喜欢

热点阅读