Zwei schwimmende Schaltfläche in der ein Layout

Question

Ich bin eine einfache Anwendung, mit der Verwendung von Material-Design zu schaffen. Und ich möchte zwei schwebende Tasten auf dem einen Layout bekommen.

Und ich will sie toghether machen zu bewegen, wenn eine Snack-Bar zeigt wird. Aber ich kann diese es in der richtigen Weise in falsch nicht, denn layout_margin funktioniert nicht. Dies sind die Screenshots der App und des Markups. Kannst du mir helfen?

    <android.support.design.widget.AppBarLayout 
        android:id="@+id/addProductsAppBar" 
        android:layout_width="match_parent" 
        android:layout_height="wrap_content" 
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"> 

        <android.support.design.widget.TabLayout 
         android:id="@+id/addProductsTabs" 
         android:layout_width="match_parent" 
         android:layout_height="wrap_content" /> 

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

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

        <android.support.design.widget.FloatingActionButton 
        android:id="@+id/addProductFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="end|bottom" 
        android:layout_margin="16dp" 
        android:src="@drawable/ic_add_white_36dp" /> 

        <android.support.design.widget.FloatingActionButton 
        android:id="@+id/searchFab" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        app:layout_anchor="@id/addProductFab" 
        app:layout_anchorGravity="top|right|end" 
        android:layout_marginBottom="80dp" 
        android:layout_marginRight="16dp" 
        android:src="@drawable/ic_search_white_36dp"/> 

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

Answer 1

habe ich versucht, einige Optimierungen mit Ihrem Code daran zu arbeiten und dabei habe ich ein gewisses Verständnis über das Funktionieren der Anker gewonnen zu bekommen.

Der erste, was zu bemerken ist, dass die CoordinatorLayout sein Kind Blick richtet auf der Grundlage der Grenzen der Ansicht. Das Hinzufügen von Spielraum zwischen Elementen würde also überhaupt nicht in Bewegung kommen. Es wird im Layout gut aussehen, aber aufgeben in Bewegung.

eine Dummy-Ansicht So Hinzufügen hilft richtig ohne Probleme bei der Verankerung. Außerdem müssen Sie die layout_gravities entsprechend einstellen.

Ersetzen Sie einfach den Code für den 2 FABs in Ihrem Layout mit diesem Code-Schnipsel:

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/addProductFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:layout_margin="16dp" 
    android:src="@drawable/ic_add_white_36dp" /> 

<View 
    android:id="@+id/dummy" 
    android:layout_width="1dp" 
    android:layout_height="16dp" 
    app:layout_anchor="@id/addProductFab" 
    app:layout_anchorGravity="top|right|end" /> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/searchFab" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|top" 
    android:layout_margin="16dp" 
    android:src="@drawable/ic_search_white_36dp" 
    app:layout_anchor="@id/dummy" 
    app:layout_anchorGravity="top|right|end" /> 

hoffte, das hilft! Bitte akzeptieren Sie diese Antwort, wenn es funktioniert. :)

Answer 2

Mit dem richtigen Antwortcode wird nicht unter 5,0 auf Android arbeiten, da die obere FAB verschiebt. Vor allem, in Ihrem Code viele zusätzliche Attribute, werde ich die Antwort schreiben, basierend auf Ihrer, die auf allen Geräten ordnungsgemäß funktioniert, und wird leichter zu verstehen sein.

<android.support.design.widget.CoordinatorLayout 
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:padding="10dp" 
android:background="#e2022068"> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab_down" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end|bottom" 
    android:src="@android:drawable/arrow_down_float" /> 

<ImageView 
    android:id="@+id/divider" 
    android:layout_width="1dp" 
    android:layout_height="40dp" 
    app:layout_anchor="@id/fab_down" 
    app:layout_anchorGravity="end" /> 

<android.support.design.widget.FloatingActionButton 
    android:id="@+id/fab_up" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="end" 
    android:src="@android:drawable/arrow_up_float" 
    app:layout_anchor="@id/divider" 
    app:layout_anchorGravity="right|end" /> 

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

Answer 3

Ich habe nicht wie ein Blick Hinzufügen nur die Polsterung hinzuzufügen, statt dass ich die Fab in einem FrameLayout gewickelt:

<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:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 
    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab_directions" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginEnd="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_directions" 
     android:visibility="gone"/> 

    <!-- We need the frame layout to set the margin between FABs--> 
    <FrameLayout 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="top|end" 
     app:layout_anchor="@id/fab_directions" 
     app:layout_anchorGravity="top|end"> 

     <android.support.design.widget.FloatingActionButton 
      android:id="@+id/fab_search" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="@dimen/fab_margin" 
      android:layout_marginEnd="@dimen/fab_margin" 
      android:src="@android:drawable/ic_menu_search" 
      app:elevation="@dimen/fab_elevation"/> 
    </FrameLayout> 

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

Answer 4

In Support-Bibliothek Version 24.2.0, die CoordinatorLayout hat ein neues Attribut layout_dodgeInsetEdges, das Sie dem LinearLayout (oder einer anderen Ansicht) mit Ihren zwei FABs hinzufügen können, und die Snackbar wird diese ganze Ansicht aus dem Weg räumen!

So zum Beispiel:

<android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:clipChildren="false" 
     android:fitsSystemWindows="true" 
     tools:context=".Activities.MainActivity"> 

    <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:orientation="vertical" 
      android:layout_gravity="bottom|right" 
      android:layout_marginRight="@dimen/fab_margin" 
      android:layout_marginBottom="@dimen/fab_margin" 
      app:layout_dodgeInsetEdges="bottom"> //THIS IS THE LINE THAT MATTERS 

     <android.support.design.widget.FloatingActionButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/fab_margin" 
       android:src="@drawable/icon" 
       android:tint="@color/colorTextAndIcons" 
       app:backgroundTint="@color/colorPrimary"/> 

     <android.support.design.widget.FloatingActionButton 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginTop="@dimen/fab_margin" 
       android:src="@drawable/icon" 
       android:tint="@color/colorTextAndIcons" 
       app:backgroundTint="@color/colorPrimary"/> 
    </LinearLayout> 
</android.support.design.widget.CoordinatorLayout> 

Answer 5

die Lösung als richtig markiert ist ein zwicken gemacht, die Ausgabe für verschiedene Geräte mit unterschiedlichem Bildschirm dpi sein, so die richtige Lösung wird https://stackoverflow.com/a/33900363/5740236