CoordinatorLayout中BottomNavigationView覆盖的Recyclerview

Posted

技术标签:

【中文标题】CoordinatorLayout中BottomNavigationView覆盖的Recyclerview【英文标题】:Recyclerview covered by BottomNavigationView in CoordinatorLayout 【发布时间】: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_
android:layout_
android:fitsSystemWindows="true"
tools:context="com.bottombarnavigation.MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_></FrameLayout>
</RelativeLayout>

【问题讨论】:

试试这个link。我认为属性 app:layout_anchor 和 app:layout_anchorGravity 被遗漏了。 @DmitriyKaluzhin 我刚刚尝试过,结果是一样的。 recyclerview 内容仍然落后于 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_
            android:layout_
            tools:context=".ui.activities.MainActivity">

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

            <android.support.design.widget.AppBarLayout
                    android:id="@+id/main_appbar"
                    android:layout_
                    android:layout_
                    android:elevation="16dp">

                    <android.support.v7.widget.Toolbar
                        android:id="@+id/dashboard_toolbar"
                        android:layout_
                        android:layout_
                        android:background="@color/colorPrimary"/>
            </android.support.design.widget.AppBarLayout>

            <FrameLayout
                    android:id="@+id/main_frame_layout"
                    android:layout_
                    android:layout_/>

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

        <android.support.design.widget.BottomNavigationView
                android:id="@+id/dashboard_navigation"
                android:layout_
                android:layout_
                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_
    android:layout_
    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_
    android:layout_
    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_
    android:layout_>

    <android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_>

        <android.support.v7.widget.Toolbar
            android:id="@+id/manager_main_toolbar"
            android:layout_
            android:layout_
            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_
        android:layout_
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipe_refresh"
            android:layout_
            android:layout_
            android:layout_weight="1">

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

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

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_
            android:layout_
            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】:
    将您的BottomNavigationView 移动到content_main.xml 并将其放入RelativeLayout 将属性android:layout_alignParentBottom="true" 添加到BottomNavigationView 将属性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_
    android:layout_
    android:fitsSystemWindows="true"
    tools:context="com.bottombarnavigation.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_
        android:layout_
        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_
    android:layout_
    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_
        android:layout_
        android:layout_alignParentBottom="true"
        android:background="#fcfcfc"
        app:menu="@menu/bottom_navigation" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_
        android:layout_
        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_
    android:layout_
    tools:context=".ui.pedidos.PedidoFragment">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_
        android:layout_
        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_
        android:layout_
        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】:

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

【讨论】:

以上是关于CoordinatorLayout中BottomNavigationView覆盖的Recyclerview的主要内容,如果未能解决你的问题,请参考以下文章

CoordinatorLayout布局中要注意的问题

CoordinatorLayout原理的简析

在片段中使用 CoordinatorLayout 时如何使状态栏透明

CoordinatorLayout的使用如此简单

在CoordinatorLayout中,Supportmapfragment不工作。

CoordinatorLayout中BottomNavigationView覆盖的Recyclerview