Android CoordinatorLayout + AppbarLayout + Viewpager 总是滚动

Posted 2023-02-23

【中文标题】Android CoordinatorLayout + AppbarLayout + Viewpager 总是滚动

【英文标题】：Android CoordinatorLayout + AppbarLayout + Viewpager always scrolling

【发布时间】：2015-12-15 08:51:08

【问题描述】：

我有一个经典的布局，上面有一个 ToolBar，下面有一个 TabLayout，还有一个 ViewPager 从 TabLayout 切换选项卡。当 ViewPager 中的内容可滚动时，ToolBar 应该滚动到视线之外，并且 TabLayout 应该跟随并在到达顶部时粘住。

在我当前的代码中，这一切都很好，除了 ToolBar 始终是可滚动的，无论 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:layout_
    android:layout_
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_
        android:layout_
        android:background="@color/primary"
        android:orientation="vertical">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:theme="@style/AppTheme.ToolBar"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_
            android:background="?attr/colorPrimary"
            android:scrollbars="horizontal"
            app:tabIndicatorColor="@color/black_text" />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/tabs_activity_view_pager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

编辑：

我可以看到 viewPager 的高度与整个根视图的高度相同。这可能是有意的，因为 appbar_scrolling_view_behavior 似乎确实添加了顶部和底部偏移量。然而，它确实看起来很奇怪，因为它会导致总是滚动工具栏和标签栏。

【问题讨论】：

你能不能更好地解释一下：“工具栏应该滚动到视线之外”和“工具栏总是可以滚动的”我不明白搜索结果是什么

viewpager 中的内容可滚动和滚动时的结果：标签卡在顶部，工具栏滚动出来。 ViewPager 中的内容不可滚动时的结果：上方是 ToolBar，下方是 TabLayout。

当content int Viewpager不可滚动时，移除app:layout_behavior="@string/appbar_scrolling_view_behavior"

你有没有找到解决这个问题的好方法？我也有。

【参考方案1】：

我已经解决了这个问题，尝试了 Google 模板示例并发现了

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

必须将行添加到视图分页器属性 xml 中。它解决了我的问题。

【参考方案2】：

我建议你试试this 示例。

这是一个类似于示例中的布局的布局。

<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/main_content"
    android:layout_
    android:layout_>

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_
        android:layout_
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_
            android:layout_
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_scrollFlags="scroll|enterAlways" />

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_
            android:layout_ />

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_
        android:layout_
        android:layout_gravity="end|bottom"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_done" />

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

【讨论】：

这几乎是我已经拥有的，它也有同样的问题..？

此示例是针对您的问题的教程。您可以使用示例模式实现您的布局。

请看下面我的回答。示例项目有同样的问题。 dropbox.com/s/16fep4r7linjtnp/sameproblem.mov?dl=0

样本来自谷歌，所以我认为这种行为正是谷歌对坐标布局的期望。换句话说，CoordinateLayout 遵循 Material Design。如果你想要经典的滚动方式，那么你应该考虑RelativeLayout。

【参考方案3】：

使用 ListView 作为 ViewPager 的数据？如果是这样，你需要listView.setNestedScrollingEnabled(true);

【参考方案4】：

尝试在 TabLayout 上添加这些属性：

 app:layout_collapseMode="pin"
 app:tabMode="fixed"

这在 AppBarLayout 上：

 android:fitsSystemWindows="true"

* 更新 *

我试过了，但这还不够，因为工具栏仍然可以滚动。 解决方案是对 ViewPager（及其内容）进行一些逻辑处理。

从 xml 布局文件中删除工具栏 scroll_flag 属性。 您必须实现一些 java 代码来检查 ViewPager 内容高度是否 > 然后 screenHeight - (toolbar + tabBar)。如果为 true，则以编程方式将 scroll_flags 设置为：

 LayoutParams params;
 params = // get layout params from your toolbar

 params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
| AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

 // set params
 toolbar.setLayoutParams(params);

【讨论】：

再次感谢您，但还是不走运。我必须补充一点，每个 ViewPager 片段中的内容当然是可变的。有些有可滚动的内容，有些没有。

好的，现在我明白了，试试我更新的答案也许 ViewPager 应该有 android:layout_ ？

呵呵。尝试了您更新的答案，也尝试了 ViewPager 上的 match_parent。恐怕还是没有运气。也许这是不可行的。

ViewPager 内容片段包含 ScrollView、ListView 还是 RecyclerView？

我也想知道:)

【参考方案5】：

基于其他示例、我自己的代码以及 appbar_scrolling_view_behavior 的（有些混乱的）源代码：

        public boolean onDependentViewChanged(CoordinatorLayout parent, View child,
            View dependency) 
        final CoordinatorLayout.Behavior behavior =
                ((CoordinatorLayout.LayoutParams) dependency.getLayoutParams()).getBehavior();
        if (behavior instanceof Behavior) 
            // Offset the child so that it is below the app-bar (with any overlap)

            final int appBarOffset = ((Behavior) behavior)
                    .getTopBottomOffsetForScrollingSibling();
            final int expandedMax = dependency.getHeight() - mOverlayTop;
            final int collapsedMin = parent.getHeight() - child.getHeight();

            if (mOverlayTop != 0 && dependency instanceof AppBarLayout) 
                // If we have an overlap top, and the dependency is an AppBarLayout, we control
                // the offset ourselves based on the appbar's scroll progress. This is so that
                // the scroll happens sequentially rather than linearly
                final int scrollRange = ((AppBarLayout) dependency).getTotalScrollRange();
                setTopAndBottomOffset(AnimationUtils.lerp(expandedMax, collapsedMin,
                        Math.abs(appBarOffset) / (float) scrollRange));
             else 
                setTopAndBottomOffset(dependency.getHeight() - mOverlayTop + appBarOffset);
            
        
        return false;
    

我正在阅读本文以解释问题，因为这是此代码的预期行为。

我认为我们需要编写自己的滚动行为，专门针对 RecyclerView，

【讨论】：

Kenneth，你能贴出代码'appbar_scrolling_view_behavior'

【参考方案6】：

ViewPager 的高度应该是 match_parent 而不是 wrap_content。

【讨论】：

谢谢，但这并没有改变任何东西。

【参考方案7】：

我也遇到了同样的问题。 解决方法很简单，只要设置你的viewpager高度

android:layout_

【参考方案8】：

简单的解决方案是 - 使用相对布局包装您的 appbar 布局和页面查看器。 - 给你的 appbar 布局一些 id - 在页面视图中设置 android:layout_below="Your_appbar_layout" 例如：

<RelativeLayout
    android:layout_
    android:layout_>

<android.support.design.widget.AppBarLayout
    android:id="@+id/your_appBar_ID"
    android:layout_
    android:layout_
    android:background="@color/primary"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_
        android:layout_
        android:theme="@style/AppTheme.ToolBar"
        app:layout_scrollFlags="scroll|enterAlways" />

    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_
        android:layout_
        android:background="?attr/colorPrimary"
        android:scrollbars="horizontal"
        app:tabIndicatorColor="@color/black_text" />

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

<android.support.v4.view.ViewPager
    android:id="@+id/tabs_activity_view_pager"
    android:layout_
    android:layout_
    android:layout_below="@+id/your_appBar_ID"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</RelativeLayout>