Android篇 Activity共享元素跳轉

什麼叫Activity共享元素跳轉？咱們來看看下面的效果，其實就是在這個轉場動畫中，整個子佈局都是共享元素，固然也能夠是圖片和文字的任何控件，具體怎麼實現這種效果呢？

查看示例圖

以MainActivity跳轉到HomeDetailActivity爲例。

第一步 在須要跳轉到HomeDetailActivity設置共享的元素設置transtionName，能夠在xml中設置android:transitionName

<RelativeLayout
    android:id="@+id/rl_container"
    android:background="@color/white"
    android:layout_width="match_parent"
    android:transitionName="CONTENT"
    android:layout_height="match_parent"/>

或者在java代碼中用ViewCompat.setTransitionName(@NonNull View view, String transitionName)設置

ViewCompat.setTransitionName(mViewBinding.rlContainer, "CONTENT");

第二步 在開始跳轉的MainActivity增長轉場過渡

ActivityOptionsCompat activityOptions = ActivityOptionsCompat.makeSceneTransitionAnimation(
        this, new Pair<View, String>(v, "CONTENT"));
Intent intent = new Intent(this, HomeDetailActivity.class);
// ActivityCompat是android支持庫中用來適應不一樣android版本的
ActivityCompat.startActivity(this, intent, activityOptions.toBundle());

多個控件過渡能夠在後面增長多個Pair<View, String>(View v, String transtionName) OK 結束啦。試一下能夠實現完美的轉場啦~~~ 那怎麼退出來的時候還保持轉場回來呢？

第三步 結束轉場的HomeDetailActivity，在按物理返回鍵，以及返回按鈕的地方加上

if (Build.VERSION.SDK_INT >= 21) {
    finishAfterTransition();
} else {
    finish();
}

當HomeDetailActivity結束轉場的過程當中，你會發現出現背景黑屏的問題，解決辦法：在styles.xml配置一個透明背景的樣式並配置給HomeDetailActivity。

<style name="DetailActivityStyle" parent="AppTheme">
    <item name="android:windowBackground">@color/tran_white</item>
    <item name="android:windowIsTranslucent">true</item>
</style>

在colos.xml加上<color name="tran_white">#00FFFFFF</color> AndroidManifest.xml給註冊的HomeDetailActivity配置透明背景樣式

<activity
    android:name=".HomeDetailActivity"
    android:theme="@style/DetailActivityStyle" />

這種處理方法在7.0及如下的設備仍是會出現黑屏狀況。。（QAQ不知道是否是三星Galaxy太強硬嗯。。） 小編採用的終極解決辦法是在HomeDetailActivity結束時，給window設置一個透明背景圖片，即java代碼關閉時更改成

if (Build.VERSION.SDK_INT >= 21) {
   # 給window設置透明背景圖片
    ColorDrawable colorDrawable = new ColorDrawable();
    colorDrawable.setColor(getResources().getColor(R.color.white));
    colorDrawable.setAlpha(0);
    getWindow().setBackgroundDrawable(colorDrawable);

    finishAfterTransition();
} else {
    finish();
}

原文連接

💡 更多好文歡迎關注個人公衆號~