仅当位于顶部时，CollapsingToolbarLayout才会展开 [英] CollapsingToolbarLayout expand only when at the top

问题描述

我在AppBarLayout和CollapsingToolbarLayout上遇到一些问题.这是当前发生的情况:

I have some problems with AppBarLayout and CollapsingToolbarLayout. This is what currently happens:

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

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

The downwards scrolling motion is exactly what I want. However when I scroll up again, the orange bar should appear immediately (which it does), but I want the ImageView to start appearing only when the user has scrolled to the very top. Can anyone help me to achieve this effect?

这是我的布局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"/>

推荐答案

我最终将橙色条从CollapsingToolbarLayout移出，并设置了OnOffsetChangedListener来更改translationY >.

I ended up moving the orange bar out of the CollapsingToolbarLayout and setting an OnOffsetChangedListener that changes the translationY of the top bar on the AppBarLayout.

设置OnOffsetChangedListener:

app_bar.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appbar, offset ->

    topbar.translationY = Math.min(image.height.toFloat(),  - offset.toFloat())

})

布局:

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

    <TextView
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:id="@+id/topbar"
            app:elevation="8dp"
            android:elevation="8dp"
            android:background="#ff8000"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Top bar"
            android:textColor="@android:color/white"
            app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways|enterAlwaysCollapsed">

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


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

    <TextView
            android:id="@+id/bottombar"
            android:layout_width="match_parent"
            android:layout_height="50dp"
            app:elevation="8dp"
            android:elevation="8dp"
            android:background="#ddd"
            android:gravity="center_vertical"
            android:paddingStart="16dp"
            android:paddingEnd="16dp"
            android:text="Bottom bar"
            android:textColor="@android:color/black"
            app:layout_scrollFlags="enterAlways" />
</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipToPadding="false"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

</android.support.v4.widget.NestedScrollView>

这篇关于仅当位于顶部时，CollapsingToolbarLayout才会展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！