CoordinatorLayout 滚动和固定答案

【问题标题】：CoordinatorLayout Scrolling and PinningCoordinatorLayout 滚动和固定
【发布时间】：2016-02-01 08:42:43
【问题描述】：

我有：有 1. 工具栏，2. ViewPager，3. TabLayout，4. 小 ViewPager，5. ViewPager for Fragment 有 RecyclerView :)

Desired:当RecyclerView在5.下面的ViewPager滚动时，1.Toolbar、3.TabLayout、4.ViewPager必须固定，只有2.ViewPager应该像下面这样滚动并消失：

问题：我不能只固定 2.ViewPager 而不固定 1.Toolbar。所以就像，我把 1.Toolbar 和 2.ViewPager 都钉住了，或者一个都不钉。

问题： 2.ViewPager 滚动时如何只隐藏？

代码：

<?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"
    android:id="@+id/coordinatorLayoutFeedNew"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_white"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbarLayoutFeedNew"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_white"
        android:fitsSystemWindows="true">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbarFeedNew"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="@drawable/toolbar_shadow"
            android:gravity="center_horizontal"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

            <ImageView
                android:id="@+id/toolbarLogoFeedNew"
                android:layout_width="wrap_content"
                android:layout_height="32dp"
                android:layout_gravity="center"
                android:gravity="center"
                android:src="@drawable/fenerbahce_logo" />

        </android.support.v7.widget.Toolbar>

        <android.support.v4.view.ViewPager
            android:id="@+id/viewPagerTopFeedNew"
            android:layout_width="match_parent"
            android:layout_height="150dp"
            android:background="@drawable/mavi_bg_gradient"
            app:layout_scrollFlags="scroll|enterAlways" />

        <LinearLayout
            android:id="@+id/layoutTabAndSkor"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/haberler_bg"
            android:orientation="vertical">

            <android.support.design.widget.TabLayout
                android:id="@+id/tabLayoutFeedNew"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@drawable/genel_haberler_bant"
                app:tabGravity="fill"
                app:tabMode="scrollable"
                app:tabSelectedTextColor="@color/color_light_gray"
                app:tabTextAppearance="@style/tabLayoutTextAppearance"
                app:tabTextColor="@color/color_white" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="58dp"
                android:background="@null"
                android:orientation="vertical">


                <android.support.v4.view.ViewPager
                    android:id="@+id/viewPagerSkorFeedNew"
                    android:layout_width="match_parent"
                    android:layout_height="0dp"
                    android:layout_weight="1"
                    android:background="@null" />

                <com.viewpagerindicator.CirclePageIndicator
                    android:id="@+id/circleIndicatorFeedNew"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom"
                    android:background="@null"
                    android:paddingBottom="4dp"
                    android:paddingTop="4dp"

                    app:fillColor="@color/color_white"
                    app:pageColor="#bbbbbb"
                    app:strokeColor="#bbbbbb" />
            </LinearLayout>
        </LinearLayout>

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

    <com.pordiva.coreproject.component.NonSwipableViewPager
        android:id="@+id/viewPagerPostsFeedNew"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/color_white"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

【问题讨论】：

这是你想要做/实现的吗？ i.stack.imgur.com/y20rH.png 有点复杂。你说：How to only pin 2.ViewPager when scrolling? 在那张照片上，ViewPager-2 不见了。
从 AppBarLayout 中取出 3-4-5。固定 1 并使 2 可滚动。

标签： android android-viewpager android-coordinatorlayout android-appbarlayout android-collapsingtoolbarlayout

【解决方案1】：

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbarLayoutFeedNew"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/color_white"
    android:fitsSystemWindows="true">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbarFeedNew"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@drawable/toolbar_shadow"
        android:gravity="center_horizontal"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light">

        <ImageView
            android:id="@+id/toolbarLogoFeedNew"
            android:layout_width="wrap_content"
            android:layout_height="32dp"
            android:layout_gravity="center"
            android:gravity="center"
            android:src="@drawable/fenerbahce_logo" />

    </android.support.v7.widget.Toolbar>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPagerTopFeedNew"
        android:layout_width="match_parent"
        android:layout_height="150dp"
        android:background="@drawable/mavi_bg_gradient"
        app:layout_scrollFlags="scroll|enterAlways" />      
</android.support.design.widget.AppBarLayout>

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

   <LinearLayout
        android:id="@+id/layoutTabAndSkor"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/haberler_bg"
        android:orientation="vertical">

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayoutFeedNew"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/genel_haberler_bant"
            app:tabGravity="fill"
            app:tabMode="scrollable"
            app:tabSelectedTextColor="@color/color_light_gray"
            app:tabTextAppearance="@style/tabLayoutTextAppearance"
            app:tabTextColor="@color/color_white" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="58dp"
            android:background="@null"
            android:orientation="vertical">


            <android.support.v4.view.ViewPager
                android:id="@+id/viewPagerSkorFeedNew"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@null" />

            <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/circleIndicatorFeedNew"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@null"
                android:paddingBottom="4dp"
                android:paddingTop="4dp"

                app:fillColor="@color/color_white"
                app:pageColor="#bbbbbb"
                app:strokeColor="#bbbbbb" />
        </LinearLayout>
    </LinearLayout>

<com.pordiva.coreproject.component.NonSwipableViewPager
    android:id="@+id/viewPagerPostsFeedNew"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/color_white" />

【讨论】：

我将最后一个 ViewPager 放在最后一个 LinearLayout 中，这次滚动标志不起作用。如果我将最后一个 ViewPager 放在最后一个 LinearLayout 之后，那么 tablayout 就会丢失

【解决方案2】：

如果我理解正确，您可以将CollapsingToolbarLayout 与此标志一起使用：

app:layout_scrollFlags="scroll|exitUntilCollapsed"

上面写着：

滚动视图并在它折叠后退出（或您的目的，隐藏它折叠后）。

这是一个很好的例子：https://github.com/TheLittleNaruto/SupportDesignExample

只需在它折叠后将您的内容放入其中，然后它将隐藏或退出该视图。我认为这就是您要查找的内容。

编辑：将其与您自己的实现一起使用。

或者实际上是这样的：

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

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

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbarFeedNew"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPagerTopFeedNew"
                android:layout_width="match_parent"
                android:layout_height="150dp" />

            <!--Perhaps a ViewPager-->

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

        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayoutFeedNew"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/darker_gray"
            app:tabMode="scrollable" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="58dp"
            android:background="@null"
            android:orientation="vertical">

            <android.support.v4.view.ViewPager
                android:id="@+id/viewPagerSkorFeedNew"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="@null" />

           <com.viewpagerindicator.CirclePageIndicator
                android:id="@+id/circleIndicatorFeedNew"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:background="@null"
                android:paddingBottom="4dp"
                android:paddingTop="4dp"
                app:fillColor="@color/color_white"
                app:pageColor="#bbbbbb"
                app:strokeColor="#bbbbbb" />

        </LinearLayout>

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

希望对您有所帮助。

【讨论】：

不起作用，我已经尝试了 10 多种组合：D
它工作正常，不知道现在是什么问题:)