android基于Activity共享元素切换效果的实现

先上一张效果图:

主要用到的类有:
android.support.v4下的三个类:
ActivityOptionsCompat, ActivityCompat, ViewCompat

这三个类的主要作用就是适配不同的android版本, 即使是在不支持这种效果的设备上也不回发生异常;

下面开始贴代码:

 gv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {

                //获取数据(AdapterView的getItemAtPosition调用的就是Adapter的getItem()....我才知道...)
                Item item = (Item) parent.getItemAtPosition(position);

                Intent intent = new Intent(MainActivity.this, DetailActivity.class);
                //传入选中的Item对应的ID
                intent.putExtra(DetailActivity.EXTRA_PARAM_ID, item.getId());

                //主要的语句
                //通过makeSceneTransitionAnimation传入多个Pair
                //每个Pair将一个当前Activity的View和目标Activity中的一个Key绑定起来
                //在目标Activity中会调用这个Key
                ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        MainActivity.this,
                        new Pair<View, String>(view.findViewById(R.id.id_iv),
                                DetailActivity.VIEW_NAME_HEADER_IMAGE),
                        new Pair<View, String>(view.findViewById(R.id.id_tv),
                                DetailActivity.VIEW_NAME_HEADER_TITLE));

                // ActivityCompat是android支持库中用来适应不同android版本的
                ActivityCompat.startActivity(MainActivity.this, intent, activityOptions.toBundle());
            }
        });

MainActiviy中其实就只有一个GridView用于展示一些简单的图片, 然后在点击Item的时候跳转到DetailActivity;

其中最总要就是这几句话:

ActivityOptionsCompat.makeSceneTransitionAnimation;

这句话创建了一个用于绑定两个Activity之间共享的View的key-value对, 说是共享View其实还是两个Activity各有一个View;

我们只是将这两个Activity中的View用同一个Key(String)绑定了, 然后系统会自动帮我们生成切换动画;

在DetailActivity也就是要跳转的Activity中也有几句重要的语句:

    private void initView(){
        TransparentStyle.setTransparentStyle(this, R.color.color_primary);
        ViewHelper.initActionBar(this, getSupportActionBar(), "Transition");
        mHeaderImageView = (ImageView) findViewById(R.id.id_iv);
        mHeaderTitle = (TextView) findViewById(R.id.id_tv_title);

        //加载图片
        Picasso.with(mHeaderImageView.getContext())
                .load(mItem.getPhotoUrl())
                .noFade()
                .placeholder(R.mipmap.ic_launcher)
                .into(mHeaderImageView);

        //主要的语句---将当前Activity的View和自己定义的Key绑定起来
        ViewCompat.setTransitionName(mHeaderImageView, VIEW_NAME_HEADER_IMAGE);
        ViewCompat.setTransitionName(mHeaderTitle, VIEW_NAME_HEADER_TITLE);
    }

其中的VIEW_Name_XXX就是我们要用来绑定的Key

这个效果我是看着google的一个示例app模仿的, 把代码精简了一些...注释换成了中文
下面是我的app的链接, 和google原版的链接:

https://github.com/googlesamples/android-ActivitySceneTransitionBasic

https://github.com/ssthouse/MySceneTransitionTest

注释还算是比较详细的, 新手代码写的比较乱, 轻喷....

注:

代码中有一个style包, 是用来在android4.4上实现沉浸式体验的代码, 具体可以看一下我前面的一篇blog

android基于Activity共享元素切换效果的实现

猜你喜欢