具有两个视图的CollapsingToolbarLayout，滚动一个但不滚动另一个

时间：2018-09-13 12:07:19

标签： android android-collapsingtoolbarlayout

我有一个带有工具栏和recyclerview的活动。在recyclerview的顶部，我有一个要滚动的面板（随recyclerview的滚动一起移动）。

我希望此面板在工具栏后面滚动，因此，在发生滚动时，工具栏会留在原处，并且面板会在其后面滑动。

他们在这里做什么？

https://i.imgur.com/fQA6bPH.gif

但是我无法通过CollapsingToolbarLayout找到正确的选项组合来实现此效果：

<android.support.design.widget.CoordinatorLayout 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"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".ui.profile.ProfileActivity">
    <android.support.design.widget.AppBarLayout
                android:id="@+id/profile_appbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/topbar_gradient"
                android:theme="@style/AppTheme.Dark">


                <android.support.design.widget.CollapsingToolbarLayout
                    android:orientation="vertical"
                    android:id="@+id/detail_collapsing"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:fitsSystemWindows="true"
                    app:layout_scrollFlags="scroll|exitUntilCollapsed">

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?android:attr/actionBarSize"
                        android:background="@drawable/topbar_gradient"
                        app:layout_collapseMode="none"
                        android:minHeight="?android:attr/actionBarSize" />

                    <LinearLayout
                        android:layout_marginTop="?actionBarSize"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        app:layout_collapseMode="none"
                        app:layout_collapseParallaxMultiplier="0.5">


        ...


           </LinearLayout>

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

    <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior">
    (...)
    </FrameLayout>


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

为简化起见，我将结构更改为：

    <android.support.design.widget.CollapsingToolbarLayout
        android:orientation="vertical"
        android:id="@+id/detail_collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:contentScrim="?colorPrimary"
        android:fitsSystemWindows="true"
        app:layout_scrollFlags="scroll|enterAlways">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@drawable/topbar_gradient"
            app:layout_collapseMode="pin"
            android:minHeight="?android:attr/actionBarSize" />

        <LinearLayout
            android:layout_marginTop="?actionBarSize"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/bar"/>

        </LinearLayout>

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

3 个答案:

答案 0 :(得分：0)

您需要更改此设置以获得所需的效果： 

<android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/detail_collapsing"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:orientation="vertical"
        app:contentScrim="?colorPrimary"
        app:layout_scrollFlags="scroll|enterAlwaysCollapsed|exitUntilCollapsed"
        app:titleEnabled="false">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="?actionBarSize"
            android:orientation="vertical"
            app:layout_collapseMode="parallax"
            app:layout_collapseParallaxMultiplier="0.5">

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:src="@drawable/bar" />
        </LinearLayout>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?android:attr/actionBarSize"
            android:background="@drawable/topbar_gradient"
            android:minHeight="?android:attr/actionBarSize"
            app:layout_collapseMode="pin" />
</android.support.design.widget.CollapsingToolbarLayout>

您的更改在CollapsingToolbar中，通过一起使用"scroll|enterAlwaysCollapsed|exitUntilCollapsed"这三个属性，将改变这种效果。

说明：

app:layout_collapseMode=""是用于折叠/固定CollapsingToolbarLayout的子视图的属性。

对此具有三个属性：

none：完全没有效果。

pin：滚动时将该视图固定在CollapsingToolbar上。

parallax：隐藏视图，同时隐藏CollapsingToolbar。

因此，如果您将Toolbar固定到CollapsingToolbarLayout，则添加此属性pin （滚动时将其固定到“折叠”工具栏）和{ {1}}将为其设置动画，直到崩溃。

让我们看看

  

使用以下4个属性，滚动实际上如何工作    parallax

     

app:layout_scrollFlags="" ：视图将以与滚动直接相关的方式滚动   事件。（必要，否则其他任何属性均无效）

     

scroll ：进入（在屏幕上滚动）时，视图将   无论是否向下滚动事件，都可以向下滚动   滚动视图也在滚动。

     

enterAlways ：“ enterAlways”的附加标志，其中   修改返回的视图以仅最初滚动回到它的   折叠高度。

     

enterAlwaysCollapsed ：退出（滚动到屏幕之外）视图时   将一直滚动到“收起”。

     

exitUntilCollapsed ：在滚动结束时，如果视图仅部分可见   那么它将被捕捉并滚动到最接近的边缘。

     

More details from here和demo here

  

从此处了解更多信息：link

答案 1 :(得分：0)

当我们像这样将ImageView标记为CollapsingToolbarLayout的{​​{1}}内添加parallax时，其作用完全相同：

app:layout_collapseMode

所以您可能要添加：

<android.support.design.widget.CollapsingToolbarLayout
    android:id="@+id/collapsing_toolbar"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:contentScrim="?attr/colorPrimary"
    app:expandedTitleMarginEnd="64dp"
    app:expandedTitleMarginStart="48dp"
    app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_scrollFlags="pin" />

            <ImageView
                android:src="@drawable/cheese_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax" //Here is the solution
                android:minHeight="100dp" />

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

在您看来（app:layout_collapseMode="parallax" ）或里面的任何东西。

阅读： https://guides.codepath.com/android/handling-scrolls-with-coordinatorlayout#creating-parallax-animations

答案 2 :(得分：0)

我通过将工具栏移到AppBarLayout之外解决了这个问题。然后在代码设置工具栏中将其设置为SupportActionBar。

<android.support.design.widget.CoordinatorLayout 
    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"
    android:gravity="center_horizontal"
    android:orientation="vertical"
    tools:context=".ui.profile.ProfileActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/profile_appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/topbar_gradient"
        android:theme="@style/AppTheme.Dark">

        <android.support.design.widget.CollapsingToolbarLayout
            android:orientation="vertical"
            android:id="@+id/detail_collapsing"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:layout_scrollFlags="scroll|enterAlways">

            <LinearLayout
                android:layout_marginTop="?actionBarSize"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                app:layout_collapseMode="pin">

                ...

            </LinearLayout>

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

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
        (...)
    </FrameLayout>

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        android:background="@drawable/topbar_gradient"
        android:minHeight="?android:attr/actionBarSize" />
</android.support.design.widget.CoordinatorLayout>
相关问题
最新问题