时间戳

首页 > 解决方案 > CollapsingToolbarLayout 仅在顶部时展开

android - CollapsingToolbarLayout 仅在顶部时展开

问题描述

我对 AppBarLayout 和 CollapsingToolbarLayout 有一些问题。这是目前发生的情况：

https://www.youtube.com/watch?v=z4yD8rmjSjU

向下滚动的动作正是我想要的。但是，当我再次向上滚动时，橙色条应立即出现（确实如此），但我希望 ImageView 仅在用户滚动到最顶部时才开始出现。谁能帮我实现这个效果？

这是我的布局 xml：

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

    <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed">

        <TextView
                android:text="ImageView"
                android:textSize="20sp"
                android:textColor="@android:color/white"
                android:gravity="center"
                android:layout_marginTop="56dp"
                android:layout_width="match_parent"
                android:layout_height="145dp"
                app:layout_collapseMode="parallax"
                android:background="#444"/>

        <TextView
                android:text="Top bar"
                android:textColor="@android:color/white"
                android:gravity="center_vertical"
                android:paddingStart="16dp"
                android:paddingEnd="16dp"
                android:layout_width="match_parent"
                android:layout_height="56dp"
                android:background="#ff8000"
                app:layout_collapseMode="pin"/>

    </android.support.design.widget.CollapsingToolbarLayout>

    <TextView
            android:text="Bottom bar"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:layout_width="match_parent"
            android:textColor="@android:color/black"
            android:layout_height="50dp"
            android:background="#ddd"
            app:layout_scrollFlags="enterAlways"/>


</android.support.design.widget.AppBarLayout>

<include layout="@layout/content_scrolling"/>

标签： androidandroid-coordinatorlayoutandroid-collapsingtoolbarlayoutandroid-appbarlayout

解决方案

行为的定制CoordinatorLayout是困难的。您希望橙色条立即出现，但 ImageView 仅在内容滚动到顶部后出现，但这些视图属于一个父级CollapsingToolbarLayout，并且都获得您现在的行为或带有标志的相反行为。如果不弄乱 CoordinatorLayout/CollapsingToolbarLayout Java API，我认为没有办法分离这些视图的行为。enterAlwaysCollapsed

如果更简单的行为不是一种选择，并且这里没有人指出一个简单的解决方案，我建议尝试一个相对较新MotionLayout的而不是与CollapsingToolbarLayout内部跳舞，最终你会为自己节省很多时间。开始会有点困难，但它提供了明确的定制方法。这是一篇非常好的文章，展示了如何构建类似于CoordinatorLayout但使用MotionLayout. 本文的第二部分还有一些额外的定制。

推荐阅读