web-dev-qa-db-ja.com

スクロールでbottomNavigationViewを非表示/表示

上スクロールで下部ナビゲーションビューを非表示にし、下スクロールで表示する必要があります。これを実装するにはどうすればよいですか。私のレイアウトはこんな感じ

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

ビューのスクリーンショットを添付しました。親切に確認してください。

enter image description here

androidandroid-layoutandroid-fragmentsbottomnavigationview
42
Karthik Thunga

UPDATE

最新のサポートライブラリバージョン28.0.0またはhigher versionに更新し、BottomNavigationViewに1つの属性を追加します。

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

この動作を使用するには、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>

下部ナビゲーションを含むアクティビティにこのコードを追加します。

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

これを試して、

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

上にスクロール中の画像：-

click here for scrolling up image

下にスクロール中の画像：

click here for scrolling down image

11
Rashmi Bhandari

更新された回答最新のライブラリ更新後：

スクロール時にBottomNavigationViewを非表示にできるようになりました。レイアウト内のフラグは1つだけです。バージョン28.0.0-alpha1またはmaterial/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は、更新の手間をかけるために無料で入手できるもう1つのクールな追加であり、 設計仕様 で詳しく説明されています。

8
sunadorer

これを使って

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. プロジェクトをAndroidxに更新しますリファクタリング>> androidxに移行（最小Android studioバージョン3.4）
  2. デフォルトの下部ナビゲーションメニューxmlファイルを使用して、親Constraint Layout with Coordinator layoutを置き換えます。
  3. 行を追加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>
4
Lefty