在滚动上隐藏/显示底部导航视图 [英] Hide/Show bottomNavigationView on Scroll

问题描述

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

<线性布局android:layout_width="match_parent"android:layout_height="wrap_content"机器人:方向=垂直"android:layout_above="@+id/导航"android:layout_alignParentTop="true"android:layout_marginBottom="5dp"><框架布局android:id="@+id/container1"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout><android.support.design.widget.BottomNavigationViewandroid:id="@+id/导航"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:background="?android:attr/windowBackground"app:layout_scrollFlags="scroll|enterAlways|snap"app:menu="@menu/dashboard_slider_menu"/></RelativeLayout>

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

解决方案

UPDATE只需向 BottomNavigationView

添加一个属性

素材库 AndroidX

支持库版本 28.0.0 或 更高版本

<块引用>

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

**旧答案(仍然有效)**

您需要一个辅助类来执行此操作.此解决方案的工作原理类似于 Google 材料设计指南.

创建一个类BottomNavigationViewBehavior

public class BottomNavigationViewBehavior extends CoordinatorLayout.Behavior{私有整数高度；@覆盖public boolean onLayoutChild(CoordinatorLayout parent, BottomNavigationView child, int layoutDirection) {高度 = child.getHeight();return super.onLayoutChild(parent, child, layoutDirection);}@覆盖public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout,BottomNavigationView 孩子，@NonNull查看 directTargetChild，@NonNull 查看目标，int 轴，int 类型){返回轴 == ViewCompat.SCROLL_AXIS_VERTICAL;}@覆盖public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull BottomNavigationView child,@NonNull 查看目标，int dxConsumed，int dyConsumed，int dxUnconsumed, int dyUnconsumed,@ViewCompat.NestedScrollType int 类型){如果(dyConsumed > 0){滑下(孩子)；} else if (dyConsumed < 0) {向上滑动(孩子)；}}私人无效的幻灯片(BottomNavigationView child){child.clearAnimation();child.animate().translationY(0).setDuration(200);}私人无效幻灯片(BottomNavigationView孩子){child.clearAnimation();child.animate().translationY(height).setDuration(200);}}

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

<android.support.design.widget.CoordinatorLayoutandroid:id="@+id/coordinator_layout";android:layout_width=match_parent"android:layout_height=match_parent"><android.support.design.widget.AppBarLayoutandroid:id="@+id/myAppBar";android:layout_width=match_parent"android:layout_height="wrap_content";android:descendantFocusability="beforeDescendants";android:focusableInTouchMode="true"android:theme="@style/AppTheme.AppBarOverlay";app:elevation="0dp"><android.support.v7.widget.Toolbarandroid:id="@+id/工具栏";android:layout_width=match_parent"android:layout_height=?attr/actionBarSize"android:background="?attr/colorPrimary";app:contentInsetStart="0dp";app:layout_scrollFlags="scroll|enterAlways";app:popupTheme=@style/AppTheme.PopupOverlay"/></android.support.design.widget.AppBarLayout><!---您的 RecyclerView/Fragment 容器布局--><框架布局android:id="@+id/容器";android:layout_width=match_parent"android:layout_height=match_parent"app:layout_behavior="@string/appbar_scrolling_view_behavior";/><android.support.design.widget.BottomNavigationViewandroid:id="@+id/bottom_nav";android:layout_width=match_parent"android:layout_height="wrap_content";android:layout_gravity=底部"app:itemBackground="@color/white";app:menu="@menu/bottom_nav_menu";/></android.support.design.widget.CoordinatorLayout><!---导航视图--></android.support.v4.widget.DrawerLayout>

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

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

I have to hide bottom navigation view on up scroll and show on down scroll .how to implement this? my layout is like this

<?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_width="match_parent"
    android:layout_height="match_parent">


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

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


    </LinearLayout>

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

</RelativeLayout>

I have attached screenshot of view. Kindly check it.

解决方案

UPDATE Just add one attribute to BottomNavigationView

Material Library AndroidX

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

Support Library Version 28.0.0 or higher version

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

Note:- Your XML should follow the structure of XML given below in old answer.

**OLD ANSWER(Still Works)**

You need a helper class to do this .This solution works like Google Material Design Guideline.

Create a class 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);
    }
}

For using this behavior you need to use cooradinator layout...

<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_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.kliff.digitaldwarka.activity.MainActivity">

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

        <android.support.design.widget.AppBarLayout
            android:id="@+id/myAppBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            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_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                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_width="match_parent"
             android:layout_height="match_parent"
             app:layout_behavior="@string/appbar_scrolling_view_behavior" />
        

         <android.support.design.widget.BottomNavigationView
             android:id="@+id/bottom_nav"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             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>

Add this code to your Activity that contains bottom nav..

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

这篇关于在滚动上隐藏/显示底部导航视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！