CoordinatorLayout中BottomNavigationView覆盖的Recyclerview

【问题标题】：Recyclerview covered by BottomNavigationView in CoordinatorLayoutCoordinatorLayout中BottomNavigationView覆盖的Recyclerview
【发布时间】：2017-05-03 03:49:53
【问题描述】：

我为我的 Fragments 尝试了带有 Framelayout 的 Google 支持库 BottomNavigationView。

这是我的代码

<?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="com.bottombarnavigation.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

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

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

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

<android.support.design.widget.BottomNavigationView
    android:background="#fcfcfc"
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:menu="@menu/bottom_navigation" />

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

当我在 Fragment 中填充我的 Recyclerview 时，它的内容被 BottomNavigationView 覆盖。

我不知道为什么会这样。我浏览了其他人的教程，效果很好。

编辑 这是我的 content_main.xml 文件

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout 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:background="@android:color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.bottombarnavigation.MainActivity"
    tools:showIn="@layout/activity_main">


<FrameLayout
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"></FrameLayout>
</RelativeLayout>

【问题讨论】：

  • 试试这个link。我认为属性 app:layout_anchor 和 app:layout_anchorGravity 被遗漏了。
  • @DmitriyKaluzhin 我刚刚尝试过，结果是一样的。 recyclerview 内容仍然落后于 bottomnavigationview
  • 你找到这个问题的答案了吗？

标签： android android-support-library android-coordinatorlayout bottomnavigationview


【解决方案1】：

这是我的解决方案，对我有用。

我的布局与您几乎相同，我将BottomNavigationView 移出CoordinatorLayout，因为我不需要任何动画。 我已将BottomNavigationView 与父级底部对齐，并将layout_above 添加到CoordinatorLayout 以使其位于BottomNavigationView 上方但填满整个屏幕。

通过此配置，我解决了重叠问题，希望对您有所帮助。

这里有我的布局。

    <RelativeLayout         
            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"
            tools:context=".ui.activities.MainActivity">

        <android.support.design.widget.CoordinatorLayout
                android:id="@+id/main_coordinator"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                android:layout_above="@+id/dashboard_navigation">

            <android.support.design.widget.AppBarLayout
                    android:id="@+id/main_appbar"
                    android:layout_width="match_parent"
                    android:layout_height="?attr/actionBarSize"
                    android:elevation="16dp">

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/dashboard_toolbar"
                        android:layout_width="match_parent"
                        android:layout_height="?attr/actionBarSize"
                        android:background="@color/colorPrimary"/>
            </android.support.design.widget.AppBarLayout>

            <FrameLayout
                    android:id="@+id/main_frame_layout"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"/>

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

        <android.support.design.widget.BottomNavigationView
                android:id="@+id/dashboard_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="@color/colorPrimaryDark"
                app:itemTextColor="@color/colorAccent"
                app:menu="@menu/menu_main"/>
    </RelativeLayout>

【讨论】：

  • 浪费了这么多时间来解决这个问题，终于这么简单的技巧解决了这个问题。感谢分享...
【解决方案2】：

CoordinatorLayout 最有用的功能之一是躲避视线。

CoordinatorLayout 的子视图可以分配为“插入”边缘。 您指定为躲避同一边缘的任何其他子视图随后将被调整以适应。

在您的情况下，您将执行以下操作：

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppTheme.AppBarOverlay">

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

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

<include 
    layout="@layout/content_main"
    app:layout_dodgeInsetEdges="bottom" />   <-- Specifies this view dodges any views that inset the bottom edge

<android.support.design.widget.BottomNavigationView
    android:background="#fcfcfc"
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:menu="@menu/bottom_navigation"
    app:layout_insetEdge="bottom" />      <-- Specifies that this view insets the bottom edge

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

【讨论】：

  • 这解决了底部重叠问题，但会导致 AppBarLayout 顶部重叠（即使使用了 appbar_scrolling_view_behavior）
  • @DanieleSegato 不是。将app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior" 添加到您的BottomNavigationView 并检查会发生什么））
  • 这是我要找的那个。另外：底部是FAB按钮的默认layout_dodgeInsetEdges，如果你想忽略它NONE不起作用，所以让它成为TOP或其他。
  • 应用时缺少工具栏。有什么想法吗？
  • 为我工作！ BottomAppBar 有这个问题，这些设置很好地解决了它。您是否愿意链接到您如何知道这样做的来源？​​
【解决方案3】：

你可以把RecyclerView和BottomNavigationView放在一个LinearLayout中，然后把LinearLayout放在CoordinatorLayout中。设置RecyclerView的属性为layout_height="0dp"layout_weight="1"，BottomnavigationView的属性为layout_height="wrap_content"layout_gravity="bottom"。

这是我的部分代码，希望对您有所帮助。

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/manager_main_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>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">

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

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

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:background="?android:attr/windowBackground" />

    </LinearLayout>

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

【讨论】：

  • 如果app:layout_scrollFlags="scroll|enterAlways"用于工具栏，会导致BottomNavigationView在向下滚动时被隐藏。
  • 这不允许在 BottomNavigationView 上使用 Coordinator 函数，例如在其上方移动小吃栏和浮动操作按钮
【解决方案4】：

设置回收视图或任何视图，高度为 0dp，重量为 1。这将使其占用所有可用空间。

【讨论】：

  • 你能把 content_main 布局放上去吗？
  • 在包含布局行，将其设为 0dp 和权重 1。如果这不起作用，请尝试为框架布局/相对布局执行此操作
【解决方案5】：
  1. 将您的BottomNavigationView 移动到content_main.xml 并将其放入RelativeLayout
  2. 将属性android:layout_alignParentBottom="true" 添加到BottomNavigationView
  3. 将属性android:layout_above="@id/bottom_navigation" 添加到容器FrameLayout

更新您的布局 XML 如下：

activity_main.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="com.bottombarnavigation.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

      <include layout="@layout/toolbar"/>
    </android.support.design.widget.AppBarLayout>

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

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

content_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@android:color/white"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.bottombarnavigation.MainActivity"
    tools:showIn="@layout/activity_main">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#fcfcfc"
        app:menu="@menu/bottom_navigation" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_navigation" />
</RelativeLayout>

希望对你有帮助~

【讨论】：

    【解决方案6】：

    您可以将 ItemDecorator 添加到添加一些填充的回收器视图中。我使用的是 Kotlin 而不是 Java，但总体思路是：

     recyclerView.addItemDecoration(object : RecyclerView.ItemDecoration() {
        override fun getItemOffsets(outRect: Rect?, view: View?, parent: RecyclerView?, state: RecyclerView.State?) {
            // Get the position of the view in the recycler view
            val position = parent?.getChildAdapterPosition(view)
            if (position == null || position == RecyclerView.NO_POSITION) {
                return
            }

            if (position == parent.adapter.itemCount - 1) {
                // Add padding to the last item. You should probably use a @dimen resource.
                outRect?.bottom = 200
            }
        }
    })

    【讨论】：

    • 不错的解决方案！如果可能的话，您能否解释一下如何设置边距而不是填充？
    【解决方案7】：

    我有一个简单的解决方案，可能不是最好的，但它可以完成工作，只需使用 actionBarSize 创建一个高度为 appBar（工具栏）高度的 View，appbar 的高度和底部导航是同样，因此您可以将您的回收站视图限制在此视图的顶部，这样做不会被您的底部导航覆盖

    <?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"
    tools:context=".ui.pedidos.PedidoFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/view3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/view3"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

    【讨论】：

      【解决方案8】：

      在 dp 中为 BottomNavigationView 而不是 wrap_content 提供一些静态高度，因为您的父布局（即协调器布局）扩展了 framelayout，其默认行为是将其子视图放在另一个之上。那就是你的片段容器被底部导航视图覆盖了。

      【讨论】：

      • 或为片段容器提供静态高度
      • 或者删除你的协调器布局替换为相对布局，并为其子视图添加规则以实现你的用户界面
      【解决方案9】：

      在您包含在布局中的主要内容中。将边距底部留给回收站视图。 因为回收站视图隐藏在底部导航视图后面

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2022-08-18
        • 1970-01-01
        • 2018-02-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2019-12-20
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode