android基於Activity共享元素切換效果的實現
阿新 • • 發佈:2019-02-17
先上一張效果圖:
主要用到的類有:
android.support.v4下的三個類:
ActivityOptionsCompat, ActivityCompat, ViewCompat
這三個類的主要作用就是 適配不同的android版本, 即使是在不支援這種效果的裝置上也不回發生異常;
下面開始貼程式碼:
MainActiviy中其實就只有一個GridView用於展示一些簡單的圖片,然後在點選Item的時候跳轉到DetailActivity;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()); } });
其中最總要就是這幾句話:
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