我想创建一个包含CollapsingToolbarLayout
的自定义共享元素过渡。当工具栏折叠时,我希望活动 ActionBar
以CollapsingToolbarLayout
开始收缩之前用户执行的滚动速率定义的速率消失。更重要的是,希望有一个共享元素转换。即,在XML中定义了两个CircularImageView
对象(如下所示),我想创建一个动画,当工具栏折叠时,该动画将大ImageView(id = profileImageview)转换为较小的(id = smallProfileImageview)(反之亦然)。用于创建动画的开始和结束状态的java和xml代码。
java:
binding.appBarLayout.addOnOffsetChangedListener(((appBarLayout, verticalOffset) -> {
if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()){
((AppCompatActivity) getActivity()).getSupportActionBar().hide();
binding.smallProfileImageview.setVisibility(View.VISIBLE);
} else if (verticalOffset == 0) {
((AppCompatActivity) getActivity()).getSupportActionBar().show();
} else {
binding.smallProfileImageview.setVisibility(View.GONE);
}
}));
xml:
<android.support.design.widget.AppBarLayout
android:id="@+id/app_bar_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/black"
app:elevation="4dp">
<android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_toolbar_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:contentScrim="@color/black"
app:expandedTitleMarginStart="12dp"
app:expandedTitleTextAppearance="@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse"
app:layout_scrollFlags="scroll|exitUntilCollapsed">
<android.support.constraint.ConstraintLayout xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top"
android:layout_marginBottom="56dp">
<TextView
android:id="@+id/tagline_textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginStart="0dp"
android:layout_marginTop="12dp"
android:text="TextView"
android:textColor="@color/green_8"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/subscribe_button"
app:layout_constraintTop_toBottomOf="@+id/subscribe_button" />
<TextView
android:id="@+id/posts_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="24dp"
android:drawableRight="@drawable/hilarity_mask_unlike_white"
android:textColor="@color/green_8"
app:layout_constraintLeft_toRightOf="@+id/profile_imageview"
app:layout_constraintTop_toTopOf="@+id/profile_imageview" />
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/profile_imageview"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:src="@color/green_8"
app:civ_border_color="@color/green_8"
app:civ_border_width="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/subscriptions_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:clickable="true"
android:drawableRight="@drawable/ic_hilarity_following_icon"
android:focusable="auto"
android:textColor="@color/green_8"
app:layout_constraintEnd_toStartOf="@+id/subscribers_tv"
app:layout_constraintStart_toEndOf="@+id/posts_tv"
app:layout_constraintTop_toTopOf="@+id/posts_tv" />
<TextView
android:id="@+id/subscribers_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="24dp"
android:clickable="true"
android:drawableRight="@drawable/ic_hilarity_follower_icon"
android:focusable="auto"
android:textAppearance="@android:style/TextAppearance.Material.Small"
android:textColor="@color/green_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/subscriptions_tv" />
<Button
android:id="@+id/subscribe_button"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:background="@drawable/button_border"
android:text="Subscribe"
android:textColor="@color/green_8"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/profile_imageview"
app:layout_constraintTop_toBottomOf="@+id/subscriptions_tv" />
</android.support.constraint.ConstraintLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/app_bar"
android:layout_width="match_parent"
android:layout_height="?actionBarSize"
android:layout_gravity="bottom"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin"
app:layout_collapseParallaxMultiplier="0.8">
<de.hdodenhof.circleimageview.CircleImageView
android:id="@+id/small_profile_imageview"
android:layout_width="52dp"
android:layout_height="52dp"
android:layout_marginStart="8dp"
android:src="@color/green_8"
android:visibility="gone"
app:civ_border_color="@color/green_8"
app:civ_border_width="2dp"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<android.support.design.widget.TabLayout
android:id="@+id/profile_tab_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="bottom"
android:visibility="visible"
app:tabGravity="fill"
app:tabIndicatorColor="@color/green_8"
app:tabMode="fixed"
app:tabSelectedTextColor="@color/green_8"
app:tabTextColor="@color/white" />
</android.support.v7.widget.Toolbar>
</android.support.design.widget.CollapsingToolbarLayout>
</android.support.design.widget.AppBarLayout>
我目前对如何进行共享元素转换的知识涉及有意图的情况,但我不确定如何处理该意图之外的情况。我没有在文档中或在线上看到任何使我能够在兄弟ViewGroup
之间执行共享元素转换的东西。