web-dev-qa-db-ja.com

スナックバーを下のバーの上に移動します

新しいボトムバーでいくつかの問題に直面しています。
スナックバーを下のバーの上に強制的に移動することはできません（これは、デザインガイドラインが https://www.google.com/design/spec/components/bottom- navigation.html＃bottom-navigation-specs ）。

これは私のactivity_main.xmlです

<?xml version="1.0" encoding="utf-8"?>
<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"
Android:fitsSystemWindows="true"
tools:openDrawer="start">

<include
    layout="@layout/app_bar_main_activity"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent" />

<Android.support.design.widget.NavigationView
    Android:id="@+id/nav_view"
    Android:layout_width="wrap_content"
    Android:layout_height="match_parent"
    Android:layout_gravity="start"
    Android:fitsSystemWindows="true"
    app:headerLayout="@layout/nav_header_main_activity"
    app:menu="@menu/activity_main_drawer" />

</Android.support.v4.widget.DrawerLayout>

これは私のapp_bar_main_activity.xmlです

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.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/main_content"
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:fitsSystemWindows="true"
tools:context="test.tab_activity">

<Android.support.design.widget.AppBarLayout
    Android:id="@+id/appbar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:paddingTop="@dimen/appbar_padding_top"
    Android:theme="@style/MyAppTheme.NoActionBar.AppBarOverlay">

    <Android.support.v7.widget.Toolbar
        Android:id="@+id/main_activity_toolbar"
        Android:layout_width="match_parent"
        Android:layout_height="?attr/actionBarSize"
        Android:background="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|enterAlways"
        app:popupTheme="@style/MyAppTheme.NoActionBar.PopupOverlay">

    </Android.support.v7.widget.Toolbar>

</Android.support.design.widget.AppBarLayout>



<Android.support.v4.view.ViewPager
    Android:id="@+id/container"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

<LinearLayout 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"
    Android:orientation="vertical">

    <Android.support.v4.view.ViewPager
        Android:id="@+id/view_pager"
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="1" />

    <Android.support.design.widget.FloatingActionButton
        Android:id="@+id/fab"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_gravity="end|bottom"
        Android:layout_margin="@dimen/fab_margin"
        Android:src="@drawable/ic_add_white_24dp" />

    <Android.support.design.widget.TabLayout
        Android:id="@+id/tab_layout"
        style="@style/AppTabLayout"
        Android:layout_width="match_parent"
        Android:layout_height="56dp"
        Android:background="?attr/colorPrimary"
        />

</LinearLayout>

Main_activity.Javaのスナックバーは次のようになります

FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Snackbar.make(findViewById(R.id.main_content), "Replace with your own action", Snackbar.LENGTH_LONG)
                    .setAction("Action", null).show();
        }
    });

Wrong...snackbar should be above bottom bar

androidlayoutsnackbar
36
Wladislaw

xmlを置き換える->

<?xml version="1.0" encoding="utf-8"?>
<Android.support.design.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/main_content"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true"
    tools:context="test.tab_activity">

    <Android.support.design.widget.AppBarLayout
        Android:id="@+id/appbar"
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">

        <Android.support.v7.widget.Toolbar
            Android:id="@+id/main_activity_toolbar"
            Android:layout_width="match_parent"
            Android:layout_height="?attr/actionBarSize"
            Android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways">

        </Android.support.v7.widget.Toolbar>

    </Android.support.design.widget.AppBarLayout>



    <Android.support.v4.view.ViewPager
        Android:id="@+id/container"
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent"
        Android:orientation="vertical">

        <Android.support.design.widget.CoordinatorLayout
            Android:layout_width="match_parent"
            Android:layout_height="0dp"
            Android:layout_weight="1"
            Android:id="@+id/placeSnackBar">

            <Android.support.v4.view.ViewPager
                Android:id="@+id/view_pager"
                Android:layout_width="match_parent"
                Android:layout_height="0dp"
                Android:layout_weight="1" />

            <Android.support.design.widget.FloatingActionButton
                Android:id="@+id/fab"
                Android:layout_width="wrap_content"
                Android:layout_height="wrap_content"
                Android:layout_gravity="end|bottom"
                Android:layout_margin="@dimen/fab_margin"
                Android:src="@drawable/ic_menu_gallery" />

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

        <Android.support.design.widget.TabLayout
            Android:id="@+id/tab_layout"
            Android:layout_width="match_parent"
            Android:layout_height="56dp"
            Android:background="?attr/colorPrimary" />

    </LinearLayout>

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

そしてスナックバーのコードは

Snackbar.make(findViewById(R.id.placeSnackBar), "Replace with your own action", Snackbar.LENGTH_LONG)
            .setAction("Action", null).show();
29
Zahidul Islam

スナックバーのマージンを変更することにより、追加のCoordinatorLayoutsでXMLを乱雑にすることなく、プログラムでこれを行うことができます。

Javaの例：

Snackbar snack = Snackbar.make(findViewById(R.id.coordinatorLayout), 
    "Your message", Snackbar.LENGTH_LONG);
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) 
    snack.getView().getLayoutParams();
params.setMargins(leftMargin, topMargin, rightMargin, bottomBar.height);
snack.getView().setLayoutParams(params);
snack.show();

Kotlinの単一行：

Snackbar.make(coordinatorLayout, "Your message", Snackbar.LENGTH_LONG).apply {view.layoutParams = (view.layoutParams as CoordinatorLayout.LayoutParams).apply {setMargins(leftMargin, topMargin, rightMargin, bottomBar.height)}}.show()
40
Amagi82

CoordinatorLayoutで作業していると仮定すると、show（）を呼び出す前にSnackbarのlayoutparamsを変更できます。 anchorIdとanchorGravityを設定することにより、スナックバーが下部ナビゲーションバーの上に表示されます。

val layoutParams = snackbar.view.layoutParams as CoordinatorLayout.LayoutParams
layoutParams.anchorId = R.id.navigation //Id for your bottomNavBar or TabLayout
layoutParams.anchorGravity = Gravity.TOP
layoutParams.gravity = Gravity.TOP
snackbar.view.layoutParams = layoutParams
24
jesusF10

使用方法に関する素晴らしい記事があります [〜＃〜] here [〜＃〜] 。 BottomNavigationBarの上にスナックバーを作成する方法がわかります。

基本的に、以下のコードは、フラグメントコンテナとしてToolbarおよびBottomNavigationBarとともにFrameLayoutの最も一般的な使用法を示しています

重要！ に注意してください

  1. fabボタンはanchorを使用して正しく配置し、useCompactPaddingを使用してマージンを保持します

  2. BottomNavigationViewはlayout_behaviourを使用してスクロールとSnackBarの位置を処理します

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

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

<FrameLayout
    Android:id="@+id/fragment_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/navigation_bar"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    app:menu="@menu/bottom_navigation"
    app:layout_behavior="murt.shoppinglistapp.ui.BottomNavigationBehavior"
    Android:background="?android:attr/windowBackground"
    />

<Android.support.design.widget.FloatingActionButton
    Android:id="@+id/fab_add_shopping_list"
    Android:layout_width="wrap_content"
    Android:layout_height="wrap_content"
    app:useCompatPadding="true"
    app:srcCompat="@drawable/ic_add_24"
    app:layout_anchor="@id/navigation_bar"
    app:layout_anchorGravity="top|right"
    Android:layout_gravity="top"
    />

行動の実装はそれを使用することをheしません！それは簡単でフレンドリーです;）（スクロール）

class BottomNavigationBehavior : CoordinatorLayout.Behavior<BottomNavigationView> {

    constructor(): super()

    constructor(context: Context, attrs: AttributeSet) : super(context, attrs)

    override fun layoutDependsOn(parent: CoordinatorLayout, child: BottomNavigationView,
                                 dependency: View): Boolean {
        if (dependency is Snackbar.SnackbarLayout) {
            updateSnackbar(child, dependency)
        }
        return super.layoutDependsOn(parent, child, dependency)
    }

    private fun updateSnackbar(child: View, snackbarLayout: Snackbar.SnackbarLayout) {
        if (snackbarLayout.layoutParams is CoordinatorLayout.LayoutParams) {
            val params = snackbarLayout.layoutParams as CoordinatorLayout.LayoutParams

            params.anchorId = child.id
            params.anchorGravity = Gravity.TOP
            params.gravity = Gravity.TOP
            snackbarLayout.layoutParams = params
        }
    }

    override fun onStartNestedScroll(
        coordinatorLayout: CoordinatorLayout,
        child: BottomNavigationView,
        directTargetChild: View,
        target: View,
        nestedScrollAxes: Int
    ): Boolean {
        return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL
    }

    override fun onNestedPreScroll(
        coordinatorLayout: CoordinatorLayout,
        child: BottomNavigationView,
        target: View,
        dx: Int,
        dy: Int,
        consumed: IntArray
    ) {
        if (dy < 0) {
            showBottomNavigationView(child)
        } else if (dy > 0) {
            hideBottomNavigationView(child)
        }
    }

    private fun hideBottomNavigationView(view: BottomNavigationView) {
        view.animate().translationY(view.height.toFloat())
    }

    private fun showBottomNavigationView(view: BottomNavigationView) {
        view.animate().translationY(0f)
    }
}
10
murt

ターゲットOS KitKat、Lollipop、Marshmallowでデザインサポートライブラリバージョン25.3.1のBottomNavigationViewとSnackbarを使用しています。 Lollipop以上ではSnackbarはBottomNavigationViewの後ろに隠れていますが、KitKatではBottomNavigationViewはSnackbarの後ろに隠れています。

別のアプローチでスナックバーを見せようとしました。 Snackbarが表示されると、BottomNavigationViewは、translationYプロパティとInterpolatorを使用してY軸に移動（スクロールダウン）します。 Snackbarが削除されると、BottomNavigationViewが同じtranslationYプロパティで再び表示されます。

BottomNavigationViewの非表示（下方向）：

CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) bottomNavigationView.getLayoutParams();
bottomNavigationView.animate().translationY(bottomNavigationView.getHeight() + layoutParams.bottomMargin).setInterpolator(new LinearInterpolator()).start();

画面にBottomNavigationViewを表示する：

bottomNavigationView.animate().translationY(0).setInterpolator(new LinearInterpolator()).start();
2
Prashant

親レイアウトがコーディネーターレイアウトである場合に簡単に実行できます。

CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams)
                snackbar.getView().getLayoutParams();
        params.setAnchorId(R.id.navigation); //id of the bottom navigation view
        params.gravity = Gravity.TOP;
        params.anchorGravity = Gravity.TOP;
        snackbar.getView().setLayoutParams(params);
2
Jarin Rocks

これを実現するには、スナックバーに提供しているViewGroupがCoordinatorLayoutであることに注意する必要があります。そうでない場合、スナックバーは下部のナビゲーションメニューの上に表示されません。

1
sanjay kumar