在滚动上隐藏/显示底部导航视图

Posted

技术标签:

【中文标题】在滚动上隐藏/显示底部导航视图【英文标题】：Hide/Show bottomNavigationView on Scroll 【发布时间】：2017-11-30 08:45:40 【问题描述】：

我必须在向上滚动时隐藏底部导航视图并在向下滚动时显示。如何实现这个？ 我的布局是这样的

<?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"
    android:layout_
    android:layout_>


    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="vertical"
        android:layout_above="@+id/navigation"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="5dp">

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


    </LinearLayout>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:background="?android:attr/windowBackground"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        app:menu="@menu/dashboard_slider_menu" />

</RelativeLayout>

我附上了视图的截图。请检查一下。

【问题讨论】：

你尝试了什么？ 在您的列表视图/回收器视图中添加事件/手势监听器。根据事件隐藏/显示。 R u 使用 RecyclerView ya.. 我正在使用 recyclerview @KarthikThunga 在下面查看我的答案 【参考方案1】：

更新 只需为BottomNavigationView添加一个属性

AndroidX 材质库

<com.google.android.material.bottomnavigation.BottomNavigationView
 ....
 app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"/>

支持库版本28.0.0 或higher version

<android.support.design.widget.BottomNavigationView
 ....
 app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"/>

注意：- 您的 XML 应遵循以下旧答案中给出的 XML 结构。

**旧答案（仍然有效）**

您需要一个辅助类来执行此操作。此解决方案类似于 Google Material Design Guideline.

创建一个类BottomNavigationViewBehavior

public class BottomNavigationViewBehavior extends CoordinatorLayout.Behavior<BottomNavigationView> 

    private int height;

    @Override
    public boolean onLayoutChild(CoordinatorLayout parent, BottomNavigationView child, int layoutDirection) 
        height = child.getHeight();
        return super.onLayoutChild(parent, child, layoutDirection);
    

    @Override
    public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,
                                   BottomNavigationView child, @NonNull 
                                   View directTargetChild, @NonNull View target,
                                   int axes, int type)
    
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
    

    @Override
    public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull BottomNavigationView child,
               @NonNull View target, int dxConsumed, int dyConsumed,
               int dxUnconsumed, int dyUnconsumed, 
                @ViewCompat.NestedScrollType int type)
    
       if (dyConsumed > 0) 
           slideDown(child);
        else if (dyConsumed < 0) 
           slideUp(child);
       
    

    private void slideUp(BottomNavigationView child) 
        child.clearAnimation();
        child.animate().translationY(0).setDuration(200);
    

    private void slideDown(BottomNavigationView child) 
        child.clearAnimation();
        child.animate().translationY(height).setDuration(200);

要使用此行为，您需要使用协调器布局...

<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
    android:layout_
    android:layout_
    tools:context="com.kliff.digitaldwarka.activity.MainActivity">

    <android.support.design.widget.CoordinatorLayout
        android:id="@+id/coordinator_layout"
        android:layout_
        android:layout_>

        <android.support.design.widget.AppBarLayout
            android:id="@+id/myAppBar"
            android:layout_
            android:layout_
            android:descendantFocusability="beforeDescendants"
            android:focusableInTouchMode="true"
            android:theme="@style/AppTheme.AppBarOverlay"
            app:elevation="0dp">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_
                android:layout_
                android:background="?attr/colorPrimary"
                app:contentInsetStart="0dp"
                app:layout_scrollFlags="scroll|enterAlways"
                app:popupTheme="@style/AppTheme.PopupOverlay"/>
        </android.support.design.widget.AppBarLayout>

        <!---your RecyclerView/Fragment Container Layout-->
        <FrameLayout
             android:id="@+id/container"
             android:layout_
             android:layout_
             app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        

         <android.support.design.widget.BottomNavigationView
             android:id="@+id/bottom_nav"
             android:layout_
             android:layout_
             android:layout_gravity="bottom"
             app:itemBackground="@color/white"
             app:menu="@menu/bottom_nav_menu" />

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

      <!---NavigationView-->
</android.support.v4.widget.DrawerLayout>

将此代码添加到包含底部导航的 Activity..

mBottomNavigationView = (BottomNavigationView) findViewById(R.id.bottom_nav);
CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) mBottomNavigationView.getLayoutParams();
    layoutParams.setBehavior(new BottomNavigationViewBehavior());

【讨论】：

@AbhishekSingh 你如何处理这种情况，当回收器视图不滚动导致所有内容都适合屏幕时，但最底部的单元格被底部导航视图覆盖。底部导航将永远不会隐藏/消失，从而导致最后一行项目被覆盖的问题。 @manishpoddar 实际上它使用 NestedScrollView.RecyclerView 有 NestedScrollView 这就是为什么它使用 Recycler 而不是列表。 NestedScrollView 的任何内容都可以正常工作，但我们不能将列表放在嵌套滚动中，这是个坏主意。 我们如何解释显示在底部导航上方的小吃店？ Google 就是这样的笨蛋，他们指定了所有这些漂亮的 Material View 动画标准，但我找不到官方指导。对这些指南的 SDK 支持为零，因此您必须自己制作，并且只能在 SO..+1 上找到 经过大约半天的挣扎后，我只需添加该行 layout_behaviour 即可使其正常工作。问题是我正在尝试嵌套布局的不同组合，所以这里是给像我这样使用 ConstraintLayout 的人的提示：诀窍是在约束布局中使用协调器布局。希望它有所帮助:)【参考方案2】：

试试这个，

 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() 
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) 
                if (dy > 0 && bottom_navigation.isShown()) 
                    bottom_navigation.setVisibility(View.GONE);
                 else if (dy < 0 ) 
                    bottom_navigation.setVisibility(View.VISIBLE);

                
            

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) 

                super.onScrollStateChanged(recyclerView, newState);
            
        );

向上滚动时的图像：-

向下滚动时的图像：

【讨论】：

找不到元素时如何隐藏底部导航。我正在使用 Visibility GONE，但问题是现在滚动回收器视图底部导航阴影显示时。 你能添加屏幕截图吗，因为通常不会 请看下面这张图。 如果recyclerview在fragment中怎么办？底部导航在活动中，上面只有一个框架布局作为片段的占位符。【参考方案3】：

更新答案最新库更新后：

现在可以在布局中仅使用一个标志来隐藏滚动时的BottomNavigationView！从版本28.0.0-alpha1 或材料/androidX 1.0.0-alpha1 开始。

我使用后一种方法更新了我的项目，因为该版本现在是一个稳定的候选版本。 更新：使用完全发布的版本"1.0.0"！

开箱即用的新行为称为HideBottomViewOnScrollBehavior。在BottomNavigationView 上设置为 app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior" 如最新的docs 所述。

这是一个完整的例子：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_
        android:layout_
        app:labelVisibilityMode="selected"
        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
        android:layout_gravity="bottom"
        app:layout_insetEdge="bottom"
        app:menu="@menu/navigation" />

与在滚动时隐藏工具栏一样，您必须确保内容是一个支持最新滚动的类，例如RecyclerView 和NestedScrollView。

这可确保一切正常，如设计规范中的animation 所示

PS：labelVisibilityMode 是另一个很酷的补充，您可以免费获得更新，design specs 对此进行了深入描述。

【讨论】：

如果在一个标签中我向上滚动条消失（如预期）并且当按下并跳转到另一个标签屏幕时 - 标签仍然隐藏，如何显示它？ @Choletski 我有同样的问题并问一个问题所以***.com/questions/54865536/…【参考方案4】：
    将您的项目更新到 Androidx，即 重构 >> 迁移到 androidx（最低 Android Studio 版本 3.4） 使用默认的底部导航菜单 xml 文件，将父 约束布局替换为协调器布局。 添加行 app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"

即

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:id="@+id/container"
    android:layout_
    android:layout_
    tools:context=".dashboards.Admin_dashboard_main">

    <include layout="@layout/toolbar" />
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main_area"
        android:layout_
        android:layout_
        app:layout_constraintTop_toBottomOf="@+id/toolbar"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_margin="0dp"
        android:padding="0dp">

        <!-- Fragments Container -->
        <FrameLayout
            android:layout_
            android:layout_
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            tools:context="MainActivity"
            tools:showIn="@layout/activity_tenant_dashboard"
            android:id="@+id/fragment_container">

        </FrameLayout>

    </androidx.constraintlayout.widget.ConstraintLayout>
    <!-- Bottom Navigation View -->

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_
        android:layout_
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_gravity="bottom"
        app:menu="@menu/menu_admin_dashboard_main"
        app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
        />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

【讨论】：

【参考方案5】：

使用这个

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener()
        
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy)
            
                if (dy > 0 ||dy<0 && csButtonLay.isShown())
                
                    bottomBar.setVisibility(View.GONE);
                
            

            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState)
            
                if (newState == RecyclerView.SCROLL_STATE_IDLE)
                
                    bottomBar.setVisibility(View.VISIBLE);
                

                super.onScrollStateChanged(recyclerView, newState);
            
        );

【讨论】：

【参考方案6】：

只需使用CoordinatorLayout 作为父容器并添加app:layout_behavior 在孩子View 中并设置行为@string/hide_bottom_view_on_scroll_behavior 这就是解决方案。

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.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:orientation="vertical"
    tools:context=".Main2Activity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_
        android:layout_above="@id/nav_view"
        android:layout_
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_
        android:layout_
        android:layout_alignParentBottom="true"
        android:layout_gravity="bottom"
        app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/bottom_nav_menu" />
</androidx.coordinatorlayout.widget.CoordinatorLayout>

快乐编码。

【讨论】：

【参考方案7】：

我在使用Recyclerview 时遇到了这个问题。 属性：

app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"/>

只对我部分有用，所以我不得不实施另一个解决方案。 我在MainActivity 中定义了BottomNavigationView，所以我必须设置几个方法来在滚动期间对其进行动画处理。

class MainActivity : AppCompatActivity() 
private var animator: ObjectAnimator? = null

.
.
.

fun slideDown() 
        nav_view?.let 
            if (animator == null && it.translationY == 0f) 
                animator = translationObjectY(it, 0f, it.height.toFloat() + it.marginBottom.toFloat()).apply 
                    doOnEnd 
                        animator = null
                    
                
            
        
    

    fun slideUp() 
        nav_view?.let 
            if (animator == null && it.translationY == it.height.toFloat() + it.marginBottom.toFloat()) 
                animator = translationObjectY(it, it.height.toFloat() + it.marginBottom.toFloat(), 0f).apply 
                    doOnEnd 
                        animator = null

translationObjectY 是一个扩展函数：

fun translationObjectY(
    targetView: View?,
    startY: Float,
    endY: Float,
    duration: Long = 200L
) : ObjectAnimator 
    return ObjectAnimator.ofFloat(targetView, "translationY", startY, endY).apply 
        this.duration = duration
        interpolator = LinearOutSlowInInterpolator()
        start()

我终于创建了一个自定义Recyclerview：

class CustomRecyclerView(
    context: Context,
    attrs: AttributeSet?,
    defStyle: Int,
) : RecyclerView(context, attrs, defStyle) 

    constructor(context: Context)
            : this(context, null, 0)

    constructor(context: Context, attrs: AttributeSet)
            : this(context, attrs, 0)

    init 
        this.addOnScrollListener(object : RecyclerView.OnScrollListener() 
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) 
                if (dy > 0) 
                    // Scrolling up
                    hideBottomMenu()
                 else 
                    // Scrolling down
                    showBottomMenu()
                
            

            override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) 
            
        )
    

    private fun hideBottomMenu() 
        (context as? MainActivity)?.slideDown()
    

    private fun showBottomMenu() 
        (context as? MainActivity)?.slideUp()

然后你可以像这样在你的片段中实现它：

<com.studio.mattiaferigutti.kamasutra.custom.CustomRecyclerView
    android:id="@+id/searchRecycler"
    android:layout_
    android:layout_ />

【讨论】：

【参考方案8】：

只需将其添加到您的 xml 中

<BottomNavigationView
....
....
app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"/>

【讨论】：

【参考方案9】：

这可以帮助某人 阅读更多：https://material.io/develop/android/components/app-bars-bottom

添加 应用程序：hideOnScroll="true"

在BottomAppBar里面如下：


<androidx.coordinatorlayout.widget.CoordinatorLayout
    ...>

    ...

    <com.google.android.material.bottomappbar.BottomAppBar
        ...
        app:hideOnScroll="true"
        />

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>

【讨论】：

以上是关于在滚动上隐藏/显示底部导航视图的主要内容，如果未能解决你的问题，请参考以下文章

在 Flutter 中的 Scroll 上隐藏底部导航栏

底部对齐的导航棒滚动到顶部

隐藏子屏幕/片段的android底部导航视图

android开发时如何去掉底部的导航栏？

iPhone：在为导航栏显示/隐藏设置动画时无法为 contentInset 设置动画

如何强制显示移动 Safari 底部导航栏以编程方式显示？