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

Question

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

androidandroid-layoutandroid-fragmentsbottomnavigationview

61

我需要在向上滚动时隐藏底部导航栏，在向下滚动时显示出来。如何实现这一功能？我的布局如下：

<?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>

这是我的视图截屏，请查看。

- Karthik Thunga

你尝试过什么？ - MRX

1

在您的列表视图/回收视图上添加事件/手势监听器。根据事件隐藏/显示。 - SripadRaj

你正在使用RecyclerView吗？ - Anil

呀，我正在使用RecyclerView。 - Karthik Thunga

@KarthikThunga，请查看我下面的答案。 - Abhishek Singh

11个回答

18

试试这个,

 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);
            }
        });

向上滚动时的图像 :-

向下滚动时的图像：

- Rashmi Bhandari

如何在没有找到元素时隐藏底部导航。我正在使用消失可见性，但问题是当滚动 RecyclerView 时，底部导航阴影现在会显示出来。 - Praveen Kumar Verma

你能添加截图吗？因为通常情况下它不会自动添加。 - Rashmi Bhandari

请看下面这张图片下方。 - Praveen Kumar Verma

1

如果recyclerview在fragment中，底部导航在activity中，且上方只有一个framelayout作为片段的占位符，那该怎么办？ - Seaky Lone

12

最新的库更新后，更新答案：

现在只需要在布局中设置一个标志，就可以在滚动时隐藏BottomNavigationView了！从版本28.0.0-alpha1或材料/AndroidX 1.0.0-alpha1开始。

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

新的可用行为称为HideBottomViewOnScrollBehavior。如最新docs所述，将其设置在BottomNavigationView上，如下所示：app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior"。

这里是一个完整的例子：

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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中进行深入描述。

- sunadorer

2

如果在一个选项卡中向上滚动，滚动条会消失（正如预期的那样），当按下返回并跳转到另一个选项卡屏幕时 - 选项卡仍然隐藏，如何显示它？ - Choletski

@Choletski 我也遇到了同样的问题，并在 Stack Overflow 上提出了一个问题：https://stackoverflow.com/questions/54865536/how-to-show-bottomnavigationbar-again-on-navigate-back - Thomas Meinhart

12

将项目更新到Androidx，即重构 >> 迁移到Androidx（最低Android Studio版本为3.4）。
使用默认的底部导航菜单xml文件，将父级Constraint Layout替换为Coordinator layout。
添加行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_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".dashboards.Admin_dashboard_main">

    <include layout="@layout/toolbar" />
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/main_area"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        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_width="match_parent"
            android:layout_height="match_parent"
            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_width="match_parent"
        android:layout_height="wrap_content"
        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>

- Lefty

3

使用此

标签

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);
            }
        });

- Anil

2

只需将CoordinatorLayout用作父容器，并在子View中添加app:layout_behavior，并设置行为@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_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Main2Activity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_above="@id/nav_view"
        android:layout_height="wrap_content"
        app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        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>

愉快编码。

- Deepak gupta

1

我是一名有用的助手，可以为您进行文本翻译。以下是您需要翻译的内容：

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

该属性：

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

这个方法只对我部分起作用，所以我不得不实现另一个解决方案。我将 BottomNavigationView 定义在 MainActivity 中，因此我必须设置几种方法来在滚动期间对其进行动画处理。

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

- Mattia Ferigutti

0

使用这段代码：当RecyclerView向下滚动时，您的片段将隐藏底部导航。然后当上滚时它将显示底部导航。

private View view;
private AppCompatActivity activity;
private ChipNavigationBar chipNavigationBar;
//...............................................

@Override
    public View onCreateView(@NonNull LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        if (view == null) {
            view = inflater.inflate(R.layout.list_fragment, container, false);
         hide_NavigationBar_adwhen_Scrolling();
        }
        return view;
    }

//...........................................................

private void hide_NavigationBar_adwhen_Scrolling() {
        activity = (AppCompatActivity) view.getContext();
        chipNavigationBar = activity.findViewById(R.id.chipNavigation);

        RecyclerView recyclerView = view.findViewById(R.id.recylerView);
       recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
        @Override
        public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
            if (dy > 0) {//on_Scrolled_down
                //  chipNavigationBar.animate().translationY(200).setDuration(500);
               chipNavigationBar.animate().translationY(banner_ad_card_1.getHeight()).setDuration(1000);

            } else {//on_Scrolled_up
                 chipNavigationBar.setVisibility(View.VISIBLE);
                chipNavigationBar.animate().translationY(0).setDuration(1000);
                //  chipNavigationBar.setItemSelected(R.id.home, true);
            }
        }

        @Override
        public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
            super.onScrollStateChanged(recyclerView, newState);
        }
    });
    }

- NI Shihab

0

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

在BottomAppBar中添加app:hideOnScroll="true"，如下所示：


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

    ...

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

    ...

</androidx.coordinatorlayout.widget.CoordinatorLayout>

- Kipkemoi Derek

0

只需将此添加到您的xml中

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

- Shaon

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Abhishek Singh · Accepted Answer

更新

只需为BottomNavigationView添加一个属性即可。

Material Library AndroidX

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

支持库版本为28.0.0或更高版本

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

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

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

您需要一个帮助类来完成这项工作。这个解决方案就像Google Material Design指南一样。

创建一个名为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);
    }
}

要使用此行为，您需要使用Coordinator 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>

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

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