Android篇 Activity共享元素跳转

什么叫Activity共享元素跳转?我们来看看下面的效果,其实就是在这个转场动画中,整个子布局都是共享元素,当然也可以是图片和文字的任何控件,具体怎么实现这种效果呢?

以MainActivity跳转到HomeDetailActivity为例。

第一步 在需要跳转到HomeDetailActivity设置共享的元素设置transtionName,可以在xml中设置android:transitionName

1
2
3
4
5
6
<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)设置

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

第二步 在开始跳转的MainActivity增加转场过渡

1
2
3
4
5
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,在按物理返回键,以及返回按钮的地方加上

1
2
3
4
5
if (Build.VERSION.SDK_INT >= 21) {
finishAfterTransition();
} else {
finish();
}

当HomeDetailActivity结束转场的过程中,你会发现出现背景黑屏的问题,解决办法:在styles.xml配置一个透明背景的样式并配置给HomeDetailActivity。

1
2
3
4
<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配置透明背景样式

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

这种处理方法在7.0及以下的设备还是会出现黑屏情况。。(QAQ不知道是不是三星Galaxy太强硬嗯。。)
小编采用的终极解决办法是在HomeDetailActivity结束时,给window设置一个透明背景图片,即java代码关闭时更改为

1
2
3
4
5
6
7
8
9
10
11
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();
}

-------------本文结束啦 感谢您的阅读-------------
所谓向日葵族 wechat
💡 更多好文欢迎关注我的公众号~
觉得不错的话,点个赞🌟吧~
0%