Zwei schwebende Aktionsschaltflächen nebeneinander
Die Dokumentation zum Materialentwurf enthält ein Beispiel für Google Maps, in dem zwei nebeneinander liegende Aktionsschaltflächen (eigentlich übereinander) angezeigt werden.
Wie wird das gemacht? Ich habe zwei FABs in einem Koordinatorlayout, aber sie enden übereinander, so dass Sie nur eine Schaltfläche sehen.
<?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"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<!-- Use ThemeOverlay to make the toolbar and tablayout text
white -->
<Android.support.design.widget.AppBarLayout
Android:id="@+id/abl_top"
Android:layout_height="wrap_content"
Android:layout_width="match_parent"
Android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<Android.support.v7.widget.Toolbar
Android:id="@+id/toolbar"
Android:fitsSystemWindows="true"
Android:layout_width="match_parent"
Android:layout_height="?attr/actionBarSize"
app:popupTheme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>
</Android.support.design.widget.AppBarLayout>
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">
<ImageView
Android:id="@+id/img_photo"
Android:layout_width="match_parent"
Android:layout_height="256dp"
Android:background="#C5C5C5"/>
<EditText
Android:id="@+id/text_name"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_below="@id/img_baby"
Android:layout_alignParentStart="true"
Android:layout_alignParentLeft="true"
Android:hint="Name"
Android:drawableLeft="@drawable/ic_account"
Android:drawablePadding="20dp"
Android:textAppearance="?android:attr/textAppearanceSmall" />
<TextView
Android:id="@+id/text_dob"
Android:layout_width="match_parent"
Android:layout_height="wrap_content"
Android:layout_below="@id/text_name"
Android:layout_alignParentStart="true"
Android:layout_alignParentLeft="true"
Android:hint="Date of birth"
Android:drawableLeft="@drawable/ic_cake"
Android:drawablePadding="20dp"
style="@Android:style/Widget.Holo.Spinner"/>
</LinearLayout>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_camera"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_margin="16dp"
Android:src="@drawable/ic_camera"
Android:clickable="true"
app:fabSize="mini"
app:layout_anchor="@id/img_photo"
app:layout_anchorGravity="bottom|right|end"/>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_gallery"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_margin="16dp"
Android:src="@drawable/ic_image"
Android:clickable="true"
app:fabSize="mini"
app:layout_anchor="@id/img_photo"
app:layout_anchorGravity="bottom|right|end"/>
</Android.support.design.widget.CoordinatorLayout>
Es ist eine Kombination aus Layout-Schwerkraft und Ankerschwerkraft zusammen mit dem Spiel mit den Rändern (des verankerten Gegenstands), die es funktionieren lassen können. Schauen Sie sich die XML an, unter der ich erfolgreich gearbeitet habe:
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom|end"
Android:layout_margin="@dimen/fab_margin"
Android:src="@Android:drawable/ic_dialog_info" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab2"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="top|end"
Android:layout_marginBottom="0dp"
Android:layout_marginEnd="0dp"
Android:layout_marginLeft="0dp"
Android:layout_marginRight="0dp"
Android:layout_marginStart="0dp"
Android:layout_marginTop="0dp"
Android:src="@Android:drawable/ic_media_play"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="top" />
Versuchen Sie, diesen app:useCompatPadding="true" zu verwenden.
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fabBottom"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:tint="@Android:color/white"
Android:src="@mipmap/ic_search"
app:fabSize="normal"
Android:scaleType="center"
app:layout_anchor="@+id/bottomSheet"
app:layout_anchorGravity="top|end"
app:useCompatPadding="true"/>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fabTop"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:tint="@color/accent"
Android:src="@mipmap/ic_location_on"
app:backgroundTint="@Android:color/white"
app:fabSize="normal"
Android:scaleType="center"
Android:layout_gravity="top|end"
app:layout_anchor="@+id/fabSearch"
app:layout_anchorGravity="top|end"
Android:layout_margin="12dp"/>
Hier ist meine Lösung, fügen Sie einfach eine unsichtbare Fab zwischen den beiden Fabs ein und funktioniert gut mit CoordinatorLayout.
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom|end"
Android:layout_margin="@dimen/fab_margin"
Android:src="@drawable/ic_check" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_invisible"
Android:layout_width="@dimen/fab_margin"
Android:layout_height="@dimen/fab_margin"
Android:layout_gravity="top|end"
Android:layout_margin="@dimen/fab_margin"
Android:visibility="invisible"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="top" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_follow"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="top|end"
Android:layout_margin="@dimen/fab_margin"
Android:src="@drawable/ic_gps_fixed_follow"
app:backgroundTint="@Android:color/white"
app:layout_anchor="@id/fab_invisible"
app:layout_anchorGravity="top" />
Das funktioniert für mich - FABs sind in relatives Layout eingebettet:
<?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="com.github.openeet.openeet.SaleDetailActivity">
<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/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:layout_scrollFlags="scroll|enterAlways"
app:popupTheme="@style/AppTheme.PopupOverlay">
</Android.support.v7.widget.Toolbar>
<Android.support.design.widget.TabLayout
Android:id="@+id/tabs"
Android:layout_width="match_parent"
Android:layout_height="wrap_content" />
</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" />
<RelativeLayout
Android:layout_width="wrap_content"
Android:layout_height="match_parent"
Android:layout_margin="@dimen/fab_margin"
Android:layout_gravity="end|bottom" >
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_share"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="end|bottom"
Android:src="@Android:drawable/ic_menu_share"
Android:layout_alignParentBottom="true"
Android:layout_alignLeft="@+id/fab_print"
Android:layout_alignStart="@+id/fab_print" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_print"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="end|bottom"
Android:src="@Android:drawable/ic_media_next"
Android:layout_above="@+id/fab_share"
Android:layout_alignParentLeft="true"
Android:layout_alignParentStart="true"
Android:layout_marginBottom="46dp" />
</RelativeLayout>
</Android.support.design.widget.CoordinatorLayout>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_scrolling"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_margin="@dimen/big_activity_fab_margin"
Android:src="@drawable/ic_share_white_24dp"
app:layout_anchor="@id/app_bar_scrolling"
app:layout_anchorGravity="bottom|end" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_scrolling2"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_margin="65dp"
Android:src="@drawable/ic_share_white_24dp"
app:layout_anchor="@id/app_bar_scrolling"
app:layout_anchorGravity="bottom|end" />
das ist Arbeit für mich. Der Schlüsselcode lautet Android: layout_margin = "65dp"
Ich kann nicht glauben, dass niemand die richtige Antwort gepostet hat.
Wickeln Sie die Schaltflächen in eine ViewGroup ein und wenden Sie den Parameter dodgeInsetEdges layout An, damit sich die Schaltflächen mit dem unteren Blatt nach oben bewegen. Für das obige usecase können wir eine LinearLayout mit dem XML-Attribut app:layout_dodgeInsetEdges="bottom" verwenden.
Beachten Sie, dass wir dies auf any - Ansicht in einer CoordinatorLayout anwenden können.
<Android.support.design.widget.CoordinatorLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:app="http://schemas.Android.com/apk/res-auto" ... >
<!-- We can use any ViewGroup here. LinearLayout is the
obvious choice for the questioner's use case. -->
<LinearLayout
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom|end"
Android:layout_margin="@dimen/fab_margin"
Android:orientation="vertical"
app:layout_dodgeInsetEdges="bottom">
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/upperFab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_marginBottom="@dimen/fab_margin"
Android:src="@drawable/upper_fab_icon" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/lowerFab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/lower_fab_icon" />
</LinearLayout>
</Android.support.design.widget.CoordinatorLayout>
Diese Antwort https://stackoverflow.com/a/33900363/401025 hat ein schwerwiegendes Problem: Wir können keine Ränder zwischen den beiden Schaltflächen festlegen. Sie bleiben zusammen.
Es scheint, dass wir beim aktuellen Stand der Design-Support-Bibliothek v23.3.0 nicht in der Lage sind, mehrere Float-Aktionsschaltflächen in einem Koordinator-Layout zu haben, die sich korrekt verhalten. In der Spezifikation https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions wird diese Funktion beschrieben Erwarten Sie es in der Zukunft.
Soweit ich weiß, habe ich eine Problemumgehung entdeckt:
Wenn Sie einen Blick auf die Google Maps-Android-App werfen, werden Sie feststellen, dass die erste (blaue) Float-Aktionsschaltfläche mit dem untersten Blatt gleitet, während die zweite (mein Standort) -Schalter nicht angezeigt wird. Erstellen Sie für die zweite Schaltfläche ein relatives Umbruchlayout, das das gesamte Layout umfasst. Platziere es über deinem unteren Blattlayout:
<RelativeLayout
Android:id="@+id/wrapper"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/secondButton"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_margin="15dp"
Android:layout_alignParentBottom="true"
Android:layout_alignParentRight="true"
Android:layout_alignParentEnd="true"/>
</RelativeLayout>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/firstButton"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_margin="15dp"
app:layout_anchor="@id/bottomSheet"
app:layout_anchorGravity="top|right|end"/>
Dies wird die Float-Aktionsschaltflächen von Google Maps genau nachahmen. Ein Nachteil dieser Lösung besteht darin, dass Sie den unteren Rand des Wrappers einstellen müssen, um die Schaltfläche über der ersten Schaltfläche zu positionieren. Sie können dies entweder im Layout oder programmgesteuert tun:
((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin);
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_camera"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/ic_camera"
Android:layout_gravity="bottom|right"
Android:layout_margin="16dp"
app:fabSize="normal" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_image"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:src="@drawable/ic_image"
app:useCompatPadding="true"
app:layout_anchor="@id/fab_camera"
app:layout_anchorGravity="top|center"
Android:layout_gravity="top|center"
app:fabSize="normal" />
Die akzeptierte Antwort (zum Zeitpunkt des Schreibens) - https://stackoverflow.com/a/33900363/4414887 funktionierte nur teilweise, da die Tasten zusammenklebten.
Ich konnte auch keine anderen bereitgestellten Antworten verwenden. Also habe ich einen Workaround gefunden.
Füge eine Ansicht zwischen den 2 FABs hinzu -
<com.google.Android.material.floatingactionbutton.FloatingActionButton
Android:id="@+id/fab2"
Android:src="@drawable/ic_delete_white_24dp"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="top|end"
app:layout_anchor="@id/view"/>
<View
Android:id="@+id/view"
Android:layout_width="10dp"
Android:layout_height="10dp"
Android:layout_gravity="top|end"
app:layout_anchor="@id/fab"
/>
<com.google.Android.material.floatingactionbutton.FloatingActionButton
Android:id="@+id/fab"
Android:src="@drawable/ic_done_white_24dp"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
app:backgroundTint="@color/colorPrimary"
app:layout_anchor="@id/bar2" />
Drei Knöpfe übereinander:
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_zoom_out"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="end|bottom"
Android:layout_margin="@dimen/fab_margin"
app:srcCompat="@drawable/ic_fab_zoom_out"
app:elevation="0dp"
app:useCompatPadding="true"
/>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_zoom_in"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="end|top"
app:srcCompat="@drawable/ic_fab_zoom_in"
app:elevation="0dp"
app:useCompatPadding="true"
app:layout_anchor="@id/fab_zoom_out"
app:layout_anchorGravity="start"
/>
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab_reset_orientation"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="end|top"
Android:visibility="gone"
app:srcCompat="@drawable/ic_fab_reset_orientation"
app:elevation="0dp"
app:useCompatPadding="true"
app:layout_anchor="@id/fab_zoom_in"
app:layout_anchorGravity="start"
/>
Zwei schwebende Aktionsschaltflächen mit einem Abstand von 100dp sind wie folgt:
<Android.support.design.widget.FloatingActionButton
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_alignParentBottom="true"
Android:layout_alignParentEnd="true"
Android:layout_alignParentRight="true"
Android:layout_gravity="top|end"
Android:layout_marginBottom="100dp"
Android:src="@Android:drawable/ic_input_add"
app:layout_anchor="@id/fab"
app:layout_anchorGravity="top" />
<Android.support.design.widget.FloatingActionButton
Android:id="@+id/fab"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:layout_gravity="bottom|end"
Android:layout_margin="@dimen/fab_margin"
Android:src="@Android:drawable/ic_delete />