解决RecyclerView遮住Toolber的问题

最新推荐文章于 2021-04-08 19:27:51 发布

wang.bk

最新推荐文章于 2021-04-08 19:27:51 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签： Android RecyclerView遮住Toolber

本文链接：https://blog.youkuaiyun.com/qq_41005535/article/details/79368989

本文介绍了解决Android应用中RecyclerView遮挡Toolbar的问题。通过使用AppBarLayout及为RecyclerView指定特定的布局行为，可以避免RecyclerView遮挡Toolbar，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决RecyclerView遮住Toolber的问题

问题就像这张图片一样，来的太快，就像龙卷风.......

具体项目请访问我的Github

我们来分析一下为什么RecyclerView会把Toolber遮住吧

1，首先看一下布局文件的代码

<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.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width=""
            android:layout_height=""></android.support.design.widget.AppBarLayout>
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            android:elevation="8dp"/>
        <com.example.lab.android.nuc.materialtest.DragFloatActionButton
            android:id="@+id/fab_move"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:layout_margin="16sp"
            android:src="@drawable/ic_add"/>
    </android.support.design.widget.CoordinatorLayout>

    <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:layout_gravity="start"-->
        <!--android:text="This is menu"-->
        <!--android:textSize="30sp"-->
        <!--android:background="#FFF"/>-->

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

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

我们可以清楚的看到RecyclerView跟Toolbar都是放在中的，简化一下就是：

<android.support.design.widget.CoordinatorLayout

        <android.support.v7.widget.Toolbar

        <android.support.v7.widget.RecyclerView

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

想必大家都很清楚

CoordinatorLayout 就是加强版的FrameLayout

而FrameLayout中的控件在不进行明确定位的情况下，默认都会摆放到左上角

那么该如何解决呢？

传统情况下，使用偏移是唯一的解决办法
真叫人脑阔疼
但是：

我们使用的可不是普通的FrameLayout，而是CoordinatorLayout，因此自然会有一些更加巧妙地方法了

即：Design support库中提供的另外的一个工具——AppBarLayout

那么我们怎样用AppBarLayout才能解决前面的覆盖问题呢？

其实只需要两步就可以了：

1.将ToolBar嵌套到AppBarLayout中

2.给RecyclerView指定一个布局行为

布局代码更改为：

<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.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
        </android.support.design.widget.AppBarLayout>

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content" //谨记这里不是match_view，我自己就错在这里了
            app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|end"
            android:layout_margin="16dp"
            android:src="@drawable/ic_done"
            android:elevation="8dp"/>
        <com.example.lab.android.nuc.materialtest.DragFloatActionButton
            android:id="@+id/fab_move"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|start"
            android:layout_margin="16sp"
            android:src="@drawable/ic_add"/>
    </android.support.design.widget.CoordinatorLayout>

    <!--<TextView-->
        <!--android:layout_width="match_parent"-->
        <!--android:layout_height="match_parent"-->
        <!--android:layout_gravity="start"-->
        <!--android:text="This is menu"-->
        <!--android:textSize="30sp"-->
        <!--android:background="#FFF"/>-->

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

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

简化一下就是：

<android.support.design.widget.CoordinatorLayout

<android.support.design.widget.AppBarLayout

<android.support.v7.widget.Toolbar

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

<android.support.v7.widget.RecyclerView

 添加一行代码：app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

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

效果如图：

在Toolbar里面添加一行代码就会显得更人性化

.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
app:layout_scrollFlags="scroll | enterAlways | snap"/>

待我一一解释：

scroll ：当RecyclerView向上滚动的时候，ToolBar会跟着一起向上滚动并实现隐藏

enterAlways ：当RecyclerView向下滚动的时候，Toolbar会跟着一起向下滚动并重新显示

snap ：当ToolBar还没有隐藏或者显示的时候，会根据当前滚动的距离，自动选择时显示还是隐藏

演示一下：