彼此相邻的两个浮动操作按钮

本文介绍了彼此相邻的两个浮动操作按钮的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

材料设计文档中有一个Google地图示例，其中两个浮动操作按钮彼此相邻(实际上是一个在另一个上方).

The material design documentation has an example of Google Maps showing two floating action buttons next to one another (actually, one above the other).

这是怎么做的?我有两个处于协调器布局的FAB，但是它们最终彼此重叠，所以您只能看到一个按钮.

How is this done? I have two FAB's in a coordinator layout, but they end up on top of one another, so you only see one button.

<?xml version="1.0" encoding="utf-8"?> <android.support.design.widget.CoordinatorLayout xmlns:android="schemas.android/apk/res/android" xmlns:app="schemas.android/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>

推荐答案

它是布局重力和锚点重力的结合，同时使用(锚定项的)边距来发挥作用，请看一下我成功使用过的xml:

It is a combination of layout gravity and anchor gravity together with playing with the margins (of the anchored item) that can make it work, have a look at the xml below which I have used successfully:

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