共享元素过渡,包括CollapsingToolbarLayout

时间:2018-07-19 02:12:37

标签: android android-animation

我想创建一个包含CollapsingToolbarLayout的自定义共享元素过渡。当工具栏折叠时,我希望活动 ActionBarCollapsingToolbarLayout开始收缩之前用户执行的滚动速率定义的速率消失。更重要的是,希望有一个共享元素转换。即,在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之间执行共享元素转换的东西。

0 个答案:

没有答案