web-dev-qa-db-de.com

Bewegen Sie den Snackriegel über den unteren Riegel

Ich habe Probleme mit der neuen unteren Leiste.
Ich kann es nicht erzwingen, den Snackbar über den unteren Balken zu bewegen (so lautete die Designrichtlinie, dass er sein sollte https://www.google.com/design/spec/components/bottom- navigation.html # bottom-navigation-specs ).

Dies ist meine 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>

Dies ist meine 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>

Die Snackbar in main_activity.Java sieht so aus

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

36
Wladislaw

ersetzen Sie Ihre 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>

und Der Snackbar-Code lautet

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

Sie können dies programmgesteuert tun, ohne Ihre XML mit zusätzlichen CoordinatorLayouts zu überladen, indem Sie die Ränder der Snackbar ändern.

Java Beispiel:

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 einzelne Linie:

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

Vorausgesetzt, Sie arbeiten mit CoordinatorLayout, können Sie die Layoutparameter der Snackbar ändern, bevor Sie show () aufrufen. Durch Setzen von anchorId und anchorGravity wird die snackBar über der unteren Navigationsleiste angezeigt:

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

Es gibt einen großartigen Artikel darüber, wie man es benutzt HIER . Dort wirst du wissen, wie man einen Snackbar über BottomNavigationBar macht

Im folgenden Code wird die häufigste Verwendung von Toolbar zusammen mit BottomNavigationBar und FrameLayout als Fragmentcontainer dargestellt

Wichtig! Beachten Sie, dass

  1. die Fab-Schaltfläche verwendet Anker , um korrekt platziert zu werden, und UseCompactPadding , um Ränder beizubehalten
  2. BottomNavigationView verwendet layout_behaviour für das Scrollen und die SnackBar-Position

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

Implemenetation of Behaviour zögern Sie nicht, das zu nutzen! Es ist einfach und freundlich;) (Scrollen)

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

Ich verwende BottomNavigationView und Snackbar aus der Design Support Library Version 25.3.1 auf den Ziel-Betriebssystemen KitKat, Lollipop und Marshmallow. Auf Lollipop und darüber versteckt sich die Snackbar hinter BottomNavigationView, aber in KitKat ist BottomNavigationView hinter der Snackbar versteckt.

Ich habe versucht, die Snackbar mit einem anderen Ansatz zu zeigen. Wenn die Snackbar angezeigt wird, wird die BottomNavigationView mit der translationY-Eigenschaft und Interpolator auf der Y-Achse verschoben (nach unten gescrollt). Sobald die Snackbar verschwunden ist, wird die BottomNavigationView wieder mit derselben translationY-Eigenschaft angezeigt.

BottomNavigationView ausblenden (nach unten):

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

Anzeigen der BottomNavigationView zurück auf dem Bildschirm:

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

Dies kann einfach durchgeführt werden, wenn das übergeordnete Layout das Koordinatorlayout war.

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

Um dies zu erreichen, müssen Sie darauf achten, dass die ViewGroup, die Sie der Snackbar zur Verfügung stellen, ein CoordinatorLayout ist. Andernfalls wird die Snackbar nicht über dem unteren Navigationsmenü angezeigt.

1
sanjay kumar