一句代码解决CoordinatorLayout+AppBarLayout+NestedScrollView滑动不流畅的问题

版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/a_yue10/article/details/78653805

最近项目用到了CoordinatorLayout+AppBarLayout可以变化的状态栏的效果,就在网上查找资料来实现。

但是加入多条数据之后就能看到问题,整个界面滑动效果很差。向上滑动没有惯性,只能一点一点的往上滑体验很不好。

经过多次查找资料并且实验,最终发现一个特别简单的方法就可以实现滑动惯性的问题。

修改以后的代码如下:

<android.support.v7.widget.RecyclerView
    android:id="@+id/travel_plan_rv"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:nestedScrollingEnabled="false" />
最关键的代码就是:

android:nestedScrollingEnabled="false"


具体效果如下图所示:



布局的完整代码如下:

<?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">
    <!--CoordinatorLayout是新添加的一个增强型的FrameLayout,通过它可以实现很多东西:-->
    <!--例如:-->
    <!--1.界面向上滚动逐渐隐藏Toolbar-->
    <!--2.在其中可以放置浮动的View,就像Floating Action Button-->

    <!--AppBarLayout跟它的名字一样,把容器类的组件全部作为AppBar-->
    <!--AppBarLayout放在CoordinatorLayout中,就可以实现滚动效果。-->
    <!--本例中,TabLayout在界面滚动时,随着Toolbar的逐渐隐藏,将占据Toolbar的位置,-->
    <!--达到节省屏幕空间,界面动画效果的目的。-->

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="210dp"
        android:fitsSystemWindows="true">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:collapsedTitleTextAppearance="@style/TextAppearance.AppCompat.Title"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:titleEnabled="false">

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

                <ImageView
                    android:id="@+id/backdrop"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/bj"
                    app:layout_collapseMode="parallax" />

                <LinearLayout
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentBottom="true"
                    android:layout_marginLeft="20dp"
                    android:orientation="vertical">

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

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="张三的龙虎山之旅"
                            android:textSize="@dimen/txs1" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="20dp"
                            android:text="悠闲 朋友 经典"
                            android:textSize="@dimen/txs0" />
                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginBottom="10dp"
                        android:orientation="horizontal">

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:text="1"
                            android:textColor="@color/gray_tv"
                            android:textSize="@dimen/txs1" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="8个景点"
                            android:textColor="@color/gray_tv"
                            android:textSize="@dimen/txs1" />

                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="30dp"
                            android:text="在地图中查看 >"
                            android:textSize="@dimen/txs1" />
                    </LinearLayout>
                </LinearLayout>
            </RelativeLayout>

            <!--//属性解析:-->
            <!--// app:theme:指定Toolbar的样式,包括ActionbarTogglepopupMenu的指示图标颜色-->
            <!--// app:popupTheme:指定popupMenu溢出后的样式-->
            <!--// app:title: 指定Toolbar中主Title的内容-->
            <!--// app:layout_scrollFlags的意思是:-->

            <!--设置的layout_scrollFlags有如下几种选项:-->
            <!--scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flagview将被固定在屏幕顶部。-->
            <!--enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速返回模式-->
            <!--enterAlwaysCollapsed: 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能以最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。-->
            <!--exitUntilCollapsed: 当视图会在滚动时,它一直滚动到设置的minHeight时完全隐藏。-->

            <!--// 需要注意的是,后面两种模式基本只有在CollapsingToolbarLayout才有用,-->
            <!--// 而前面两种模式基本是需要一起使用的,也就是说,这些flag的使用场景,基本已经固定了。-->

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

                <RelativeLayout
                    android:id="@+id/ib_back_layout"
                    android:layout_width="@dimen/item_h_50dp"
                    android:layout_height="match_parent">

                    <ImageView
                        android:id="@+id/ib_back"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_centerVertical="true"
                        android:layout_marginLeft="@dimen/m_10dp"
                        android:scaleType="fitCenter"
                        android:src="@mipmap/back" />
                </RelativeLayout>

                <TextView
                    android:id="@+id/toolbar_titletv"
                    style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:drawablePadding="5dp"
                    android:ellipsize="end"
                    android:gravity="center"
                    android:lines="1"
                    android:scrollHorizontally="true"
                    android:text=""
                    android:textColor="@android:color/white" />

                <RelativeLayout
                    android:id="@+id/ib_right_layout"
                    android:layout_width="50dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="right">

                    <ImageView
                        android:id="@+id/ib_right"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:layout_centerInParent="true"
                        android:scaleType="fitCenter"
                        android:src="@mipmap/ib_add" />
                </RelativeLayout>

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

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

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

    <!--//app:layout_behavior 属性,没错,--><!--// 如果你使用CoordinatorLayout来实现Toolbar滚动渐变消失动画效果,那就必须在它下面的那个控件中加入这个属性,并且下面的这个控件必须是可滚动的。--><!--// 当设置了layout_behavior的控件滑动时,就会触发设置了layout_scrollFlags的控件发生状态的改变。-->

    <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">

            <LinearLayout
                style="@style/linlayout_h2_style"
                android:layout_margin="@dimen/m_10dp">

                <TextView
                    style="@style/tv_item_title_style"
                    android:text="2017-11-21"
                    android:textSize="@dimen/txs2" />

                <TextView
                    style="@style/tv_item_title_style"
                    android:layout_marginLeft="@dimen/m_10dp"
                    android:text="09:11"
                    android:textSize="@dimen/txs2" />

            </LinearLayout>

            <android.support.v7.widget.RecyclerView
                android:id="@+id/travel_plan_rv"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:nestedScrollingEnabled="false" />
        </LinearLayout>

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

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

参考文章:http://www.jianshu.com/p/1edf795fce75

展开阅读全文

没有更多推荐了,返回首页