滚动问题 - CoordinatorLayout + AppBarLayout + ViewPager包含包含RecyclerViews的片段

时间:2016-12-07 16:25:36

标签: android scroll android-viewpager android-coordinatorlayout android-appbarlayout

我有以下布局:

<CoordinatorLayout layout_height="match_parent">

    <AppBarLayout layout_height="match_parent">
        <CollapsingToolbarLayout layout_height="match_parent">

            <ImageView> //Fullscreen picture
            <LinearLayout> //Some text and icons

            <Toolbar layout_height="?attr/actionBarSize"> //No title
            <TabLayout layout_height="?attr/actionBarSize"> //Drawn on top of the invisible Toolbar 

        </CollapsingToolbarLayout>
    </AppBarLayout>

    <ViewPager layout_height="wrap_content"/>

    <FloatingActionButton/>

</CoordinatorLayout>

现在,ViewPager有3个片段,每个片段里面都有一个RecyclerView。我相信这应该是一个常规的设计模式。 ViewPager位于AppBarLayout下方,全屏启动,因此您必须向下滚动才能看到ViewPager内容。

问题是当我在AppBarLayout上投掷时,fling事件阻止任何进一步滚动,直到它停止投掷(直到velocityY = 0)。但这有时需要2到3秒,所以同时触摸板仍然没有响应。

更糟糕的是,如果我尝试滚动其中一个子级RecyclerViews,屏幕会闪烁得太厉害,一旦AppBarLayout fling结束,RecyclerView会突然出现在滚动位置。这太可怕了!

我已经测试了this smooth AppBarLayout library虽然它修复了一些问题,但它引入了一些其他不好的问题(ViewPager是在所有内容之上绘制的,而不是在TabLayout之下)。

更新:完整XML

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ActivityActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">
        <!-- ALSO TRIED app:layout_behavior="com.package.utils.FlingBehavior" -->


        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:elevation="4dp"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleGravity="center|top"
            app:expandedTitleMarginTop="@dimen/activity_horizontal_margin_extra"
            app:expandedTitleMarginBottom="70dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/background_picture"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:scaleType="centerCrop"
                android:tintMode="screen"
                app:layout_collapseMode="parallax" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="bottom"
                android:orientation="vertical"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.8">

                <TextView
                    android:id="@+id/title"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Probando probando"
                    android:textColor="@color/white" />

                <android.support.v4.widget.Space
                    android:layout_width="match_parent"
                    android:layout_height="120dp" />

                <ImageView
                    android:id="@+id/icon"
                    android:layout_width="100dp"
                    android:layout_height="100dp"
                    android:layout_gravity="bottom|center"
                    android:fitsSystemWindows="true"
                    android:paddingBottom="@dimen/activity_horizontal_margin" />

                <TextView
                    android:id="@+id/description"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="bottom|center"
                    android:layout_marginBottom="100dp"
                    android:fitsSystemWindows="true" />

            </LinearLayout>

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

            <android.support.design.widget.TabLayout
                android:id="@+id/activities_options_tabs"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:layout_gravity="bottom"
                android:scrollbars="horizontal"
                app:tabMode="fixed"
                app:tabContentStart="48dp"
                app:layout_scrollFlags="scroll|enterAlways"/>

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

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

    <android.support.v4.view.ViewPager
        android:id="@+id/activities_options_container"
        android:layout_width="match_parent"
        android:focusable="false"
        android:layout_marginTop="0dp"
        android:visibility="visible"
        android:elevation="4dp"
        app:behavior_overlapTop="20dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_height="wrap_content" />

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        app:srcCompat="@drawable/ico_share" />

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

和其中一个片段,它们都是相同的:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/root_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_horizontal">

<ProgressBar
    android:id="@+id/progress"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="@dimen/activity_vertical_margin_large"
    android:visibility="invisible"/>

  <android.support.v7.widget.RecyclerView
      android:id="@+id/recycler_view"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:scrollbars="vertical" />
</RelativeLayout>

帮助!

由于

1 个答案:

答案 0 :(得分:0)

我将此用于同一目的

<?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:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="right"
android:orientation="vertical"
tools:context="com.cafeagahi.app.AccountActivity">
<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
</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">
    <android.support.design.widget.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        app:tabGravity="fill"
        app:tabMode="fixed"
        app:tabTextColor="@color/white" />
    <android.support.v4.view.ViewPager
        android:id="@+id/vp_pages"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>