SharedElement 实现界面切换时的平滑过渡

前言

  在 App 中，界面之间的切换是常有的。我们有时候还会碰到这样的情况，在切换界面时，切换前的界面和切换后的界面中有相同的组件。
  比如说，切换前的界面是一个列表界面，列表的每一项都含有标题、内容、图片等信息，当我们点击列表中的一项时，会调转至详情界面，详情界面中也含有与列表项相同的标题、内容、图片等信息。
  界面切换的逻辑很容易实现。但是我们想，是否有这样的操作，让列表项中的组件，平滑地 “移动” 至切换后的界面，让界面的切换不显得那么生硬。SharedElement 可以帮助我们实现这样的操作。
  先看一下普通的界面切换和使用 SharedElement 的界面切换两者之间的区别。

普通切换 SharedElement

  可以看出，两者的差别很大，同样是列表界面切换至详情界面，普通的就是两个界面之间生硬的切换，两个界面各自独立，而用 SharedElement 处理过后，给人的感觉就是在同一个界面中进行操作（实质还是两个独立的界面），整个交互给人的感觉，比前者好太多。
  下面介绍一下，如何使用 SharedElement 将原本生硬的界面切换 优化成平滑的切换。

实现

  先来看一下逻辑，很简单，就只有两个界面，一个界面用于列表的展示，列表是用 RecyclerView 来实现，RecyclerView 的 Item 被设置了点击事件，当列表项被点击时，会跳转至另外一个详情界面。

列表界面和详情界面

  直接上步骤。
  首先在 App 的主题中设置允许启用窗口内容转换效果

    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <!--允许启用窗口内容转换效果-->
        <item name="android:windowContentTransitions">true</item>
    </style>

  在xml文件中，将两个界面中相同视图组件的定义都加上 android:transitionName 属性（这边是在列表 item 的 layout 和 详情界面的 layout 中修改），要确保两者的值是相等的，值是 string 类型，可以随意定义，但是要保证同一个 view 的值是相等 。

            <ImageView
            android:id="@+id/imageView"
            android:layout_width="match_parent"
            android:layout_height="250dp"
            android:scaleType="centerCrop"
            android:transitionName="image"/>

  在列表的点击事件中，常规的操作是创建一个 Intent，加入一些参数后，调用 startActivity 去启动另一个界面。

                Intent i = new Intent(mContext, DetailActivity.class);
                i.putExtra("pos",position + "");
                startActivity(i);

  若要实现平滑过渡， 则需要使用 ActivityOptionsCompat，调用它的 makeSceneTransitionAnimation 方法。传入上下文 context，以及由 View 对象和我们之前声明的 transitionName 构建的 Pair 类型的对象（我这边定义了三个Pair，实现三个 view 的平滑切换，Pair 数量随意，主要看需求），创建完 ActivityOptionsCompat 对象后，将其转换成 Bundle 类型，与 Intent 一起作为参数传给 startActivity 方法去启动另一个界面。

                Intent i = new Intent(mContext, DetailActivity.class);
                i.putExtra("pos",position + "");
                android.support.v4.util.Pair<View, String> image = new android.support.v4.util.Pair(imageView, "image");
                android.support.v4.util.Pair<View, String> text = new android.support.v4.util.Pair(textView, "text");
                android.support.v4.util.Pair<View, String> longtext = new android.support.v4.util.Pair(textViewLong, "longtext");
                ActivityOptionsCompat optionsCompat =
                        ActivityOptionsCompat.makeSceneTransitionAnimation((Activity) mContext, image,text,longtext);
                startActivity(i,optionsCompat.toBundle());

  然后就没有下一步了，是不是没有想象中的麻烦，编译运行，来看一下效果。

  这样，我们就把一个生硬的切换变成了一个平滑的切换，大大地增加了用户感官上的体验。

还有

  sharedElement 从名字上来看是共享元素的意思，但是“元素”并没有被共享，两个界面依旧是独立的不相干的，直白的讲，sharedElement 可以理解成一种界面切换的动画，这个动画不用你自己去定义，你只要设定好同一个元素，之前的位置和之后的位置，位置变化的过程交由系统会帮你解决。
  还要注意的是，界面切换时被移动的组件，尽量保持切换界面前和切换界面后的差别不要太大，比如说你之前 TextView 的字体大小为10sp，之后不要设置成30sp，颜色之类的也尽量保持一致，不然可能会出现闪屏现象。
  我把这个 demo 放 GitHub 上了，感兴趣的朋友可以了解一下 SharedElementDemo

以上。