无法使用 NestedScrollView 顺利滚动 AppBarLayout 和折叠工具栏 [英] Unable to scroll AppBarLayout and collapsing toolbar with NestedScrollView smoothly

问题描述

我正在开发一款 Android 应用，在该应用中我使用 CoordinatorLayout、AppBarLayout 和 CollapsingToolbarLayout 来使用折叠工具栏功能.

我在布局中使用 NestedScrollView 以在同一布局中展开和折叠 AppBarLayout.当我尝试从屏幕中心向上滚动时，它不起作用，但是当我尝试从屏幕右上角向上滚动屏幕时，它会平滑滚动.

下面提到的是我的xml文件

布局.xml

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"xmlns:app="http://schemas.android.com/apk/res-auto"机器人:fillViewport =真"机器人:fitsSystemWindows =真"机器人:paddingBottom =2dp"机器人:paddingLeft =5dp"机器人:paddingRight="5dp"android:paddingTop="5dp"android:layout_gravity="fill_vertical"app:layout_behavior="@string/appbar_scrolling_view_behavior"><相对布局android:layout_width="match_parent"android:layout_height="match_parent"><线性布局android:layout_width="match_parent"android:layout_height="match_parent"android:background="@color/fragment_back_color"机器人:方向=垂直"><线性布局android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:方向=水平"android:padding="5dp"><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/new_recharge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginLeft="10dp"android:text="新付款"android:textColor="@color/offer_name_text_color"/></LinearLayout><相对布局android:layout_width="match_parent"android:layout_height="wrap_content"机器人:layout_marginLeft="5dp"机器人:layout_marginRight="5dp"机器人:背景=@颜色/白色"android:paddingBottom="20dp"机器人:paddingLeft =10dp"机器人:paddingRight="10dp"android:paddingTop="20dp"><水平滚动视图android:id="@+id/hsv"android:layout_width="fill_parent"android:layout_height="wrap_content"android:layout_alignParentTop="true"机器人:fillViewport =真"机器人:measureAllChildren =假"机器人:滚动条=无"><线性布局android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_centerInParent =真"机器人:方向=水平"><线性布局android:id="@+id/wallet_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><图像视图android:id="@+id/wallet_recharge"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/wallet_recherge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="65dp"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginTop="5dp"机器人:重力=中心"机器人:文本=钱包"android:textColor="@color/offer_name_text_color"android:textSize="12sp"/>></LinearLayout><查看android:layout_width="5dp"android:layout_height="20dp"android:background="@color/white"/><线性布局android:id="@+id/prepaid_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><图像视图android:id="@+id/prepaid_recharge"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/prepaid_recherge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="65dp"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginTop="5dp"机器人:重力=中心"机器人:文本=预付费"android:textColor="@color/offer_name_text_color"android:textSize="12sp"/>></LinearLayout><查看android:layout_width="5dp"android:layout_height="20dp"android:background="@color/white"/><线性布局android:id="@+id/postpaid_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><图像视图android:id="@+id/postpaid_recharge"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/postpaid_recherge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="65dp"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginTop="5dp"机器人:重力=中心"机器人:文本=后付费"android:textColor="@color/offer_name_text_color"android:textSize="12sp"/>></LinearLayout><查看android:layout_width="5dp"android:layout_height="20dp"android:background="@color/white"/><线性布局android:id="@+id/dth_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><图像视图android:id="@+id/dth_recharge"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/dth_recherge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="65dp"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginTop="5dp"机器人:重力=中心"机器人:文本=潜孔"android:textColor="@color/offer_name_text_color"android:textSize="12sp"/>></LinearLayout><查看android:layout_width="5dp"android:layout_height="20dp"android:background="@color/white"/><线性布局android:id="@+id/landline_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><图像视图android:id="@+id/landline_recharge"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/landline_recherge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="65dp"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginTop="5dp"机器人:重力=中心"机器人:文本=地线"android:textColor="@color/offer_name_text_color"android:textSize="12sp"/>></LinearLayout><查看android:layout_width="5dp"android:layout_height="20dp"android:background="@color/white"/><线性布局android:id="@+id/datacard_layout"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:重力=中心"机器人:方向=垂直"><图像视图android:id="@+id/datacard_recharge"android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/datacard_recherge"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="65dp"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginTop="5dp"机器人:重力=中心"机器人:文本=数据卡"android:textColor="@color/offer_name_text_color"android:textSize="12sp"/>></LinearLayout></LinearLayout></Horizo​​ntalScrollView></RelativeLayout><线性布局android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:方向=水平"机器人:paddingBottom =10dp"机器人:paddingLeft =5dp"机器人:paddingRight="5dp"android:paddingTop="10dp"><图像视图android:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:background="@drawable/recent"/><com.spiceladdoo.views.RobotTextviewRegularandroid:layout_width="wrap_content"android:layout_height="wrap_content"机器人:layout_gravity="中心"android:layout_marginLeft="10dp"机器人:文本=最近"android:textColor="@color/offer_name_text_color"/></LinearLayout><列表视图android:id="@+id/recent_recharge_list"android:layout_width="match_parent"android:layout_height="match_parent"机器人:layout_marginLeft="5dp"android:layout_marginRight="5dp"></ListView></LinearLayout><FrameLayout xmlns:tools="http://schemas.android.com/tools"android:id="@+id/recharge_container"android:layout_width="match_parent"android:layout_height="match_parent"机器人:可见性=可见"工具:忽略 =MergeRootFrame"></FrameLayout></RelativeLayout></android.support.v4.widget.NestedScrollView>

想要的结果是当我尝试从屏幕中心向上滚动时，它应该像我从手机的右上角向上滚动一样流畅.

请观看下面提到的视频以更清楚地查看问题

您可以找到源代码此处 - 随意尝试；

我以 googledesignlibdemo 为例.

这是我的 Activity 的样子:

<include layout="@layout/include_list_viewpager"/><android.support.design.widget.NavigationViewandroid:id="@+id/nav_view"android:layout_height="match_parent"android:layout_width="wrap_content"android:layout_gravity="开始"机器人:fitsSystemWindows =真"应用程序:headerLayout="@layout/nav_header"app:menu="@menu/drawer_view"/></android.support.v4.widget.DrawerLayout>

它承载ViewPager:include_list_viewpager.xml:

<android.support.design.widget.AppBarLayoutandroid:id="@+id/appbar"android:layout_width="match_parent"android:layout_height="wrap_content"android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"><android.support.design.widget.CollapsingToolbarLayoutandroid:id="@+id/collapsing_toolbar"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_scrollFlags="scroll|enterAlways|snap"app:contentScrim="?attr/colorPrimary"应用程序:expandedTitleMarginStart="48dp"应用程序:expandedTitleMarginEnd="64dp"android:fitsSystemWindows="true"><图像视图android:id="@+id/图片"android:src="@drawable/header_image"android:layout_width="match_parent"android:layout_height="200dp"android:scaleType="centerCrop"机器人:fitsSystemWindows =真"app:layout_collapseMode="视差"/><查看机器人:背景=#AA50AA00"android:layout_width="match_parent"android:layout_height="200dp"app:layout_collapseMode="视差"/><android.support.v7.widget.Toolbarandroid:id="@+id/工具栏"android:layout_width="match_parent"机器人:标题=""android:layout_height="?attr/actionBarSize"app:popupTheme="@style/ThemeOverlay.AppCompat.Light"app:layout_collapseMode="pin"/></android.support.design.widget.CollapsingToolbarLayout><android.support.design.widget.TabLayoutandroid:id="@+id/标签"机器人:背景=#50AA00"应用程序:tabMode =可滚动"应用程序:tabIndicatorColor="#FFF"android:layout_width="wrap_content"android:layout_height="wrap_content"/></android.support.design.widget.AppBarLayout><android.support.v4.view.ViewPagerandroid:id="@+id/viewpager"android:layout_width="match_parent"android:layout_height="match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior"/></android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout 承载 Toolbar (app:layout_collapseMode="pin") 及以上的 ImageView (app:layout_collapseMode="parallax").

托管在 ViewPager Fragment 中的布局如下:

<线性布局机器人:方向=垂直"机器人:背景=#DDD"android:layout_width="match_parent"android:layout_height="match_parent"><线性布局android:layout_width="match_parent"android:layout_height="wrap_content"机器人:方向=水平"android:padding="16dp"><图像视图android:src="@drawable/移动"android:layout_marginTop="2dp"android:layout_width="16dp"android:layout_height="16dp"/><文本视图android:text="@string/prepaid_recharge"android:layout_marginStart="16dp"android:layout_gravity="center_vertical"android:textColor="#000"android:fontFamily="sans-serif-medium"android:textSize="14sp"机器人:textAllCaps =真"android:layout_width="wrap_content"android:layout_height="wrap_content"/></LinearLayout>…………<列表视图android:id="@+id/recent_recharge_list"android:layout_width="match_parent"android:layout_height="match_parent"/></LinearLayout></android.support.v4.widget.NestedScrollView>

所以它有这个行为 app:layout_behavior="@string/appbar_scrolling_view_behavior" 并填充 ViewPort (android:fillViewport="true")

实际上 - 这就是您所需要的.Fragment 类很标准:

public class RechargeFragment extends Fragment {@Nullable@覆盖public View onCreateView(LayoutInflater inflater，@Nullable ViewGroup 容器，@Nullable Bundle savedInstanceState) {返回 inflater.inflate(R.layout.recharge_fragment, container, false);}}

Activity 也非常标准.

同样，您可以在此处.

注意！我发现它在模拟器上的效果很差(一点也不流畅).

希望对您有所帮助.

I am working on one android app in which I am using CoordinatorLayout, AppBarLayout and CollapsingToolbarLayout to use the collapse toolbar functionality.

I am using NestedScrollView in layout to expand and collapse AppBarLayout in same layout. When I am trying to scroll up from center of the screen then it does not work but when I try to scroll up screen from right corner of the screen then it scrolls smoothly.

Below mentioned is my xml file

layout.xml

<android.support.v4.widget.NestedScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    android:paddingBottom="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingTop="5dp"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/fragment_back_color"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:padding="5dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/new_recharge" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="NEW PAYMENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>


            <RelativeLayout

                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:background="@color/white"
                android:paddingBottom="20dp"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="20dp">

                <HorizontalScrollView
                    android:id="@+id/hsv"
                    android:layout_width="fill_parent"
                    android:layout_height="wrap_content"
                    android:layout_alignParentTop="true"
                    android:fillViewport="true"
                    android:measureAllChildren="false"
                    android:scrollbars="none">

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerInParent="true"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:id="@+id/wallet_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/wallet_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/wallet_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="WALLET"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/prepaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/prepaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/prepaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="PREPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"

                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/postpaid_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/postpaid_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/postpaid_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="POSTPAID"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/dth_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/dth_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/dth_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DTH"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/landline_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/landline_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/landline_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="LANDLINE"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>

                        <View
                            android:layout_width="5dp"
                            android:layout_height="20dp"
                            android:background="@color/white" />

                        <LinearLayout
                            android:id="@+id/datacard_layout"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"
                            android:orientation="vertical">

                            <ImageView
                                android:id="@+id/datacard_recharge"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:background="@drawable/datacard_recherge" />

                            <com.spiceladdoo.views.RobotTextviewRegular
                                android:layout_width="65dp"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:layout_marginTop="5dp"
                                android:gravity="center"
                                android:text="DATACARD"
                                android:textColor="@color/offer_name_text_color"
                                android:textSize="12sp" />
                            >

                        </LinearLayout>
                    </LinearLayout>
                </HorizontalScrollView>
            </RelativeLayout>


            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="horizontal"

                android:paddingBottom="10dp"
                android:paddingLeft="5dp"
                android:paddingRight="5dp"
                android:paddingTop="10dp">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:background="@drawable/recent" />

                <com.spiceladdoo.views.RobotTextviewRegular
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_marginLeft="10dp"
                    android:text="RECENT"
                    android:textColor="@color/offer_name_text_color" />

            </LinearLayout>

            <ListView
                android:id="@+id/recent_recharge_list"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp">

            </ListView>


        </LinearLayout>

        <FrameLayout xmlns:tools="http://schemas.android.com/tools"
            android:id="@+id/recharge_container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:visibility="visible"
            tools:ignore="MergeRootFrame">

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

The desired result is when I try to scroll up from center of the screen then it should work as smmoth as I scroll up from right corner of the mobile.

Please watch below mentioned video to look at the problem more clearly

https://www.dropbox.com/s/gscfc8vfc7kkpxp/device-2015-12-30-160119.mp4?dl=0

解决方案

I believe, I've nailed it:

You can find the source code here - feel free to try;

I took as an example googledesignlibdemo.

Here's how my Activity looks like:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/drawer_layout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:fitsSystemWindows="true">

    <include layout="@layout/include_list_viewpager"/>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view"/>

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

It hosts ViewPager: include_list_viewpager.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"
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            android:fitsSystemWindows="true">
            <ImageView
                android:id="@+id/image"
                android:src="@drawable/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"/>
            <View
                android:background="#AA50AA00"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                app:layout_collapseMode="parallax"/>

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

        </android.support.design.widget.CollapsingToolbarLayout>
        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:background="#50AA00"
            app:tabMode="scrollable"
            app:tabIndicatorColor="#FFF"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>

CollapsingToolbarLayout hosts Toolbar (app:layout_collapseMode="pin") and above ImageView (app:layout_collapseMode="parallax").

The hosted in the ViewPager Fragment has this layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:fillViewport="true"
    android:fitsSystemWindows="true"
    android:layout_gravity="fill_vertical"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <LinearLayout
        android:orientation="vertical"
        android:background="#DDD"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="16dp">
            <ImageView
                android:src="@drawable/mobile"
                android:layout_marginTop="2dp"
                android:layout_width="16dp"
                android:layout_height="16dp" />
            <TextView
                android:text="@string/prepaid_recharge"
                android:layout_marginStart="16dp"
                android:layout_gravity="center_vertical"
                android:textColor="#000"
                android:fontFamily="sans-serif-medium"
                android:textSize="14sp"
                android:textAllCaps="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
        ........
        <ListView
            android:id="@+id/recent_recharge_list"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>
</android.support.v4.widget.NestedScrollView>

So it has this behaviour app:layout_behavior="@string/appbar_scrolling_view_behavior" and filling ViewPort (android:fillViewport="true")

And actually - that's all you need. Fragment class is very standard:

public class RechargeFragment extends Fragment {
    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.recharge_fragment, container, false);
    }
}

Activity is also remained very standard.

Again, you can find my code example here.

NB! I found it works pretty poor(not smooth at all) on the emulator.

I hope, it helps.

这篇关于无法使用 NestedScrollView 顺利滚动 AppBarLayout 和折叠工具栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！