具有2 CollapsingToolbarLayout可展开/折叠一前一后 [英] Having 2 CollapsingToolbarLayout that can be expanded / collapsed one after the other

问题描述

有没有办法有2个CollapsingToolbarLayouts（一个低于其他），可以展开/折叠一前一后？

Is there a way to have 2 CollapsingToolbarLayouts (one below the other) that can be expanded / collapsed one after the other ?

让我们来这个形象的例子：

Let's take this image as an example :

的部分1和2是两个CollapsingToolbarLayouts（和每一个含有一个工具栏我想），并且部分3是一个列表（RecyclerView）可滚动

The section 1 and 2 are two CollapsingToolbarLayouts (and each one contains a Toolbar I suppose), and the section 3 is a list (a RecyclerView) that can be scrolled.

用户可以滚动的第3节，它将折叠部分1.当第1部分完全崩溃了，它会崩溃的部分2.一旦2布局崩溃，用户可以继续在滚动名单。

The user can scroll on the section 3, and it will collapse the section 1. Once the section 1 is fully collapsed, it will collapse the section 2. Once the 2 layouts are collapsed, the user can continue to scroll on the list.

如果在其它方向上的用户滚动，他首先必须达到列表的顶部，然后如果他继续滚动，它会扩大部2，然后展开部1一旦部2完全扩大。

If the user scrolls in the other direction, he will first have to reach the top of the list, and then if he continues scrolling, it will expand the section 2, and then expand the section 1 once the section 2 is fully expanded.

推荐答案

我希望这是你在找什么：应用：layout_collapseMode =视差应该做的绝招：

I hope this is what you are looking for: app:layout_collapseMode="parallax" should do the trick.:

示例：

<?xml version="1.0" encoding="utf-8"?>
<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:id="@+id/drawer"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#EEEEEE"
    android:fitsSystemWindows="true"
    tools:context=".MainActivity">

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


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">


            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:text="New Button" />

            <Button
                android:id="@+id/button2"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:text="New Button" />

            <Button
                android:id="@+id/button3"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:text="New Button" />

            <Button
                android:id="@+id/button4"
                android:layout_width="wrap_content"
                android:layout_height="250dp"
                android:text="New Button" />
        </LinearLayout>


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

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

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

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

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:minHeight="190dp"
                    android:src="@mipmap/ic_launcher"
                    app:layout_collapseMode="parallax" />

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="100dp"
                    android:layout_marginTop="102dp"
                    android:minHeight="190dp"
                    android:scaleType="fitXY"
                    android:src="@drawable/social"
                    app:layout_collapseMode="parallax" />


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

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

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

此外，你可能想看一看：应用：layout_scrollFlags

标记

<一个href=\"http://developer.android.com/reference/android/support/design/widget/AppBarLayout.LayoutParams.html\" rel=\"nofollow\">http://developer.android.com/reference/android/support/design/widget/AppBarLayout.LayoutParams.html

另外，有两个工具栏是不是一个好主意，我想你要找的 TabLayout ，像这样的例子：

Also, having two Toolbars is not a good idea, i think you were looking for TabLayout, something like this example:

https://github.com/TheLittleNaruto/SupportDesignExample

这篇关于具有2 CollapsingToolbarLayout可展开/折叠一前一后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！