android - How to start shared element transition between 2 activity?
问题描述
I just learn about Shared Element in Android and I have one image which one of them in ActivitySplashScreen and one other is into Toolbar and I want to use shared element to move this image from ActivitySplashScreen to ActivityMain
after some search and try to implement that simple way to make this feature don't work on my code, for example:
style.xml:
<style name="AppTheme" parent="BaseTheme">
<item name="android:windowContentTransitions">true</item>
</style>
<style name="BaseTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
...
</style>
ActivitySplashScreen.java:
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash_screen);
ButterKnife.bind(this);
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
Intent intent = new Intent(ActivitySplashScreen.this, MainActivity.class);
ActivityOptionsCompat options = ActivityOptionsCompat.
makeSceneTransitionAnimation(ActivitySplashScreen.this,
app_logo,
ViewCompat.getTransitionName(app_logo));
startActivity(intent, options.toBundle());
finish();
}
}, 3000);
}
ActivityMain.java:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
supportPostponeEnterTransition();
}
and ImageView widget on my ActivitySplashScreen and ActivityMain xml layout:
<ImageView
android:id="@+id/instagram_add_story"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="16dp"
android:layout_marginBottom="8dp"
android:src="@drawable/img_wizard_1"
android:transitionName="app_logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:ignore="VectorDrawableCompat" />
this code is not working as well and I'm not sure what exactly problem on that
UPDATED
ActivitySplashScreen xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/alachiq_header_animation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@drawable/instagram_animation_gradient_list"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="40dp">
<ImageView
android:id="@+id/app_logo"
android:layout_width="150dp"
android:layout_height="150dp"
android:transitionName="app_logo"
android:tint="@android:color/white"
app:srcCompat="@drawable/img_wizard_1" />
<TextView
android:id="@+id/title"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:fontFamily="@font/iran_sans_bold"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@color/mdtp_white" />
<TextView
style="@style/TextAppearance.AppCompat.Caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fontFamily="@font/iran_sans_light"
android:gravity="center"
android:textColor="@color/mdtp_white" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
MainActivity xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:slidingLayer="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/grey_5"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp"
android:theme="@style/AppTheme.AppBarOverlay">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:contentInsetStartWithNavigation="0dp"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:theme="@style/Toolbar.Light">
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/activityTitle"
style="@style/Base.TextAppearance.AppCompat.Caption"
android:layout_width="90dp"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:fontFamily="@font/iran_sans_bold"
android:gravity="center|right"
android:text="@string/app_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/application_logo"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="@+id/application_logo"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="centerCrop"
android:layout_marginBottom="8dp"
android:src="@drawable/ic_app_logo"
android:transitionName="app_logo"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/drawerMenu"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
tools:ignore="VectorDrawableCompat" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
解决方案
我可以这样使用，这是我根据您的场景的解决方案。
风格：
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
飞溅.XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/alachiq_header_animation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:background="@drawable/ic_launcher_background"
android:gravity="center"
android:orientation="vertical"
android:paddingTop="40dp">
<ImageView
android:id="@+id/app_logo"
android:layout_width="150dp"
android:layout_height="150dp"
android:tint="@android:color/black"
app:srcCompat="@android:drawable/ic_dialog_email" />
<TextView
android:id="@+id/title"
style="@style/TextAppearance.AppCompat.Title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:fontFamily="sans-serif"
android:gravity="center"
android:text="@string/app_name"
android:textColor="@android:color/background_dark" />
<TextView
style="@style/TextAppearance.AppCompat.Caption"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:fontFamily="sans-serif"
android:textColor="@android:color/background_dark" />
</LinearLayout>
</android.support.constraint.ConstraintLayout>
飞溅.Java
public class SplashActivity extends AppCompatActivity {
@BindView(R.id.app_logo)
ImageView app_logo;
Activity mActivity;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_splash);
ButterKnife.bind(this);
mActivity = this;
ViewCompat.setTransitionName(app_logo, "app_logo");
new Handler().postDelayed(new Runnable() {
@RequiresApi(api = Build.VERSION_CODES.JELLY_BEAN)
@Override
public void run() {
Intent intent = new Intent(SplashActivity.this, MainActivity.class);
intent.putExtra("transition_name", ViewCompat.getTransitionName(app_logo));
ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(mActivity,app_logo,ViewCompat.getTransitionName(app_logo));
startActivity(intent, options.toBundle());
finish();
}
}, 3000);
}
}
MainActivity.XML
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:slidingLayer="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/darker_gray"
android:orientation="vertical">
<android.support.design.widget.AppBarLayout
android:id="@+id/appBar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:elevation="5dp">
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:contentInsetStartWithNavigation="0dp"
>
<android.support.constraint.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/activityTitle"
android:layout_width="90dp"
android:layout_height="30dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:gravity="center|right"
android:text="@string/app_name"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/application_logo"
app:layout_constraintTop_toTopOf="parent"
android:layout_marginRight="8dp" />
<ImageView
android:id="@+id/application_logo"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="centerCrop"
android:layout_marginBottom="8dp"
android:tint="@android:color/black"
app:srcCompat="@android:drawable/ic_dialog_email"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
android:layout_marginRight="8dp" />
</android.support.constraint.ConstraintLayout>
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
MainActivity.Java
public class MainActivity extends AppCompatActivity {
@BindView(R.id.toolbar)
Toolbar mToolbar;
Activity mActivity;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
mActivity = this;
setSupportActionBar(mToolbar);
ActivityCompat.postponeEnterTransition(this);
ImageView application_logo = (ImageView) mToolbar.findViewById(R.id.application_logo);
if (getIntent() != null) {
Bundle extras = getIntent().getExtras();
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
String imageTransitionName = extras.getString("transition_name");
application_logo.setTransitionName(imageTransitionName);
ActivityCompat.startPostponedEnterTransition(mActivity);
}
}
}
}
这是SharedElementTransition根据您的场景的示例代码。每当您使用某种样式时，请始终写入样式文件然后使用它。
注意：
import android.support.v7.widget.Toolbar;用于 Java 文件中的 ToolBar。这工作正常。
推荐阅读
- javascript - 如何在情节中为颜色条设置不均匀的刻度值
- python - pandas - 筛选在 groupby 中至少有一列包含非空值的组
- julia - 如何对 Julia 进行多重插补？
- forms - Symfony 4 表单处理
- three.js - 物体可以隐藏在其他透明物体后面吗？
- python - 读取文件并匹配多行
- python-3.x - Python 计算前导和尾随空格
- docker - docker如何连接到外部DNS
- performance - ff4j 和 togglz 之间的性能比较
- java - Java MySQLSyntaxErrorException？为什么我的 SELECT 语句不正确？