1. 程式人生 > >android基於Activity共享元素切換效果的實現

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