RecyclerView点击item图片，从点击位置，放大到全屏，再次点击关闭

code小生,一个专注 Android 领域的技术分享平台

作者：卖臭豆腐的王致和
地址：https://www.jianshu.com/p/c46020080034
声明：本文已获 卖臭豆腐的王致和 授权,转发等请联系原作者授权

github：https://github.com/feng19960223

ps：最近要写一个小模块，类似于微信的九宫格，点击一张图片，放大到全屏，再次点击会缩小，而且有一个动画，图片从点击位置开始放大，缩小的时候同样有这样一个缩小动画

效果图.gif

当出现需求时，我一般不会去直接写，我会上网搜了一下其他博客，发现大多数写的很麻烦，有人用弹出Dialog实现，有人在Imageview上面盖了一层视图方法实现，而且代码也很多，上百行，当他们都有一些问题，例如

• 没有放大缩小的动画

• Dialog扩展性不是太高

• 上面盖一层视图，实现RecyclerView太麻烦

• 代码量大，等等

而我的核心代码，只有3行，就完美的实现了这个效果，而且是在2个Activity实现这个效果，这个效果用到的知识点是Shared Element效果（共享元素效果），有兴趣的同学，可以查阅其他资料。

item的点击事件代码

viewHolder.imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                view.getContext().startActivity(
                        new Intent(view.getContext(), OtherActivity.class),
                        // 注意这里的sharedView
                        // Content，View（动画作用view），String（和XML一样）
                        ActivityOptions.makeSceneTransitionAnimation((Activity) view.getContext(), view, "sharedView").toBundle());
            }
        });

item.xml布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <!--注意这里的sharedView-->
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@mipmap/ic_launcher"
        android:transitionName="sharedView" />
</LinearLayout>

OtherActivity的页面布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">
    <!--注意这里的sharedView-->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@mipmap/ic_launcher"
        android:transitionName="sharedView" />
</LinearLayout>

OtherActivity.java(主要实现点击缩小)

findViewById(R.id.imageView2).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // 注意这里不使用finish
                ActivityCompat.finishAfterTransition(OtherActivity.this);
            }
        });

以上代码，就可以完成我们上面图片的效果，要注意我的注释

• 共享元素效果是将前面一个Activity的某个子View与后面一个Activity的某个子View之间有过渡效果

• 相关联的View都添加android:transitionName属性，并且取名一致。

• ActivityOptions的makeSceneTransitionAnimation函数第一个参数上下文，没啥解释的，第二个参数就是第一个Activity中的View对象，第三个参数就是两个Activity的View的 android:transitionName属性的值。

• makeSceneTransitionAnimation函数只能实现一个view对一个view的效果，如果想让多个View同时有切换效果。需要使用Pair对象！！！（例如，A界面有2个view，B见面有2个view，我们点击item，要让这2个view，互相有一定的放大动画）