两个浮动动作button相邻

材料devise文档中有一个Google地图示例,显示两个彼此相邻的浮动操作button(实际上是一个在另一个之上)。

在这里输入图像说明

这是怎么做的? 我有一个协调员布局的两个FAB,但是他们最终在另一个之上,所以你只能看到一个button。

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

Solutions Collecting From Web of "两个浮动动作button相邻"

这是一个布局的重力和锚重心的组合,以及可以使其工作的边缘(锚定项)的边缘,看看我已经成功地使用了下面的XML:

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

尝试使用这个app:useCompatPadding="true"

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

这是我的解决scheme,只需在两个晶圆厂之间放置一个不可见的晶圆厂,并与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" /> 

没有小吃店

与小吃店

这适用于我 – FABsembedded相对布局:

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

这个答案https://stackoverflow.com/a/33900363/401025有一个主要问题:我们无法设置两个button之间的任何边距&#x3002; 他们坚持在一起。

看来,在devise支持库v23.3.0的当前状态下,我们无法在协调器布局中具有多个正确行为的浮动操作button。 然而,在https://www.google.com/design/spec/components/buttons-floating-action-button.html#buttons-floating-action-button-transitions规范中描述了这个特性,所以我们可以期望它在未来&#x3002;

至于知道我发现了一个解决方法:

当你看看谷歌地图android应用程序,你会注意到第一个(蓝色)浮动动作button是浮动的底部工作表,而第二个(我的位置)button不是。 因此,第二个button创build一个覆盖整个布局的相对布局。 把它放在你的底部图纸布局上面:

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

这将完全模仿谷歌地图的浮动操作button。 这个解决scheme的一个缺点是你必须设置包装的底部边缘来将button定位在第一个button的上方。 您可以在布局中或以编程方式执行此操作:

 ((CoordinatorLayout.LayoutParams) wrapper.getLayoutParams()).setMargins(0, 0, 0, bottomMargin); 

两个浮动动作button之间有100dp的空间,如下所示:

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

一个在上面的三个button:

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

这是我的工作。 关键代码是android:layout_margin =“65dp”