web-dev-qa-db-fra.com

Masquer / Afficher bottomNavigationView on Scroll

Je dois masquer la vue de navigation inférieure lors du défilement vers le haut et la montrer lors du défilement vers le bas .Comment mettre en œuvre cela? ma mise en page est comme ça

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

J'ai joint une capture d'écran de la vue. Veuillez le vérifier.

enter image description here

androidandroid-layoutandroid-fragmentsbottomnavigationview
42
Karthik Thunga

UPDATE

Mettez à jour la dernière version de la bibliothèque de support technique 28.0.0 ou higher version et ajoutez simplement un attribut à BottomNavigationView.

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

Remarque : - Votre code XML doit suivre la structure de XML indiquée ci-dessous dans l'ancienne réponse.


ANCIENNE RÉPONSE (fonctionne toujours)

Pour ce faire, vous avez besoin d’une classe d’aide. Cette solution fonctionne comme Google Material Design Guideline.

Créer une classe 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);
    }
}

Pour utiliser ce comportement, vous devez utiliser la mise en page cooradinator ...

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

Ajoutez ce code à votre activité qui contient la navigation du bas.

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

Essaye ça,

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

Image en défilant vers le haut: -

click here for scrolling up image

Image en défilant vers le bas:

click here for scrolling down image

11
Rashmi Bhandari

Réponse mise à jour après les dernières mises à jour de la bibliothèque :

Masquer la BottomNavigationView on scrolling est maintenant disponible avec un seul drapeau dans la mise en page! À partir de la version 28.0.0-alpha1 ou du matériau/androidX 1.0.0-alpha1.

J'ai mis à jour mon projet en utilisant cette dernière approche car la version est maintenant une version candidate stable. Mise à jour: Utilisez la version finale "1.0.0"!

Le nouveau comportement disponible prêt à l'emploi s'appelle HideBottomViewOnScrollBehavior. Définissez-le sur la BottomNavigationView comme app:layout_behavior="@string/hide_bottom_view_on_scroll_behavior" comme décrit dans le plus récent docs .

Voici un exemple complet:

<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" />

Comme pour le masquage de la barre d’outils lors du défilement, vous devez vous assurer que le contenu est une classe qui prend en charge le dernier défilement comme RecyclerView et NestedScrollView.

Cela garantit que tout fonctionne comme indiqué dans le animation sur les spécifications de conception

PS: labelVisibilityMode est un autre ajout intéressant que vous obtenez gratuitement pour prendre la peine de mettre à jour et qui est décrit en détail dans le spécifications de conception .

8
sunadorer

Utilisez ceci

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);
            }
        });
4
Anil
  1. Mettez à jour votre projet sur Androidx i.e Refactor >> Migrate to androidx (Minimum Android version studio 3.4)
  2. En utilisant le fichier XML par défaut du menu de navigation inférieur, remplacez le parent Présentation de contrainte avec disposition de coordinateur.
  3. Ajoutez la ligne app: layout_behavior = "com.google.Android.material.behavior.HideBottomViewOnScrollBehavior"

c'est à dire

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