底部菜单与浮动操作按钮的移动

Question

我想使用支持库中的Bottom-sheet和两个浮动操作按钮（FABS），如图片所示。关键是我还希望两个FABS与底部表一起移动，就像图片1和2一样。我需要使用什么基本布局，并如何使FABS粘在底部表上？

更新

<LinearLayout
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:orientation="vertical"
tools:context=".MainActivity">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    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:popupTheme="@style/AppTheme.PopupOverlay"/>

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


<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

      <!-- my context here -->

    </LinearLayout>

      <!-- bottomsheet -->
    <FrameLayout
        android:id="@+id/bottom_sheet"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff0000"
        app:behavior_hideable="true"
        app:layout_behavior="android.support.design.widget.BottomSheetBehavior">

        <include layout="@layout/navigation_info" />

    </FrameLayout>

    <!-- FABS -->

    <!-- wrap to primary fab to extend the height -->

    <LinearLayout
        android:id="@+id/primary_wrap"
        android:layout_width="wrap_content"
        android:layout_height="88dp"
        app:layout_anchor="@id/bottom_sheet"
        app:layout_anchorGravity="top|end">

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/primary"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"

            android:layout_margin="@dimen/fab_margin"
            android:src="@android:drawable/ic_delete"/>
    </LinearLayout>


    <!-- Pin secondary fab in the top of the extended primary -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/secondary"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_dialog_email"
        app:layout_anchor="@+id/primary_wrap"
        app:layout_anchorGravity="top|end"/>

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

基于Ruan_Lopes的回答。

使用这种布局，我的FABS按照我想要的方式工作，但我仍然认为我没有表达得很清楚。

我在想是否可能用更正式的方式来实现这一点。

- Thanassis

---

认为我没有表达清楚。SO不是讨论板，你提出了问题，@Ruan_Lopes回答了你。根据你的评论，这解决了你的问题，你得到了你想要的FABs移动，因此现在应该接受他的答案并关闭问题。如果你有其他问题，那么你应该提出另一个问题。 - Marcin Orlowski

我正在请求将fabs之间加上空格。虽然答案对我来说没有问题，但只有一半的内容。 - Thanassis

Answer 1

您是否尝试将 app:layout_insetEdge="bottom" 添加到具有 BottomSheetBehavior 的视图中？ 对我来说，像这样将 FAB 和 BottomSheetBehavior 视图作为 ConstraintLayout 中的兄弟节点可以正常工作：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="end|bottom"
    android:layout_margin="16dp"
    app:backgroundTint="@color/white"
    app:fabSize="normal"
    app:layout_dodgeInsetEdges="bottom"
    app:srcCompat="@drawable/icon"
    />

<View
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:layout_insetEdge="bottom"
    app:layout_behavior="android.support.design.widget.BottomSheetBehavior"
    />

- Antonio López

---

将layout_insetEdge设置在BottomSheet行为上对我起了作用。之前我一直在设置FAB的insetEdge。 - soan saini

Answer 2

这段代码对我有用。

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.androidsample.BottomSheetActivity">

    <!-- include app bar -->
    <include layout="@layout/app_bar" />

    <!-- include main content -->
    <include layout="@layout/activity_bottom_sheet_content" />

    <!-- include bottom sheet -->
    <include layout="@layout/bottom_sheet" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/b2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_share_black_24dp"
        app:backgroundTint="#3F51B5"
        app:layout_anchor="@+id/text"
        app:layout_anchorGravity="top|end" />

    <TextView
        android:id="@+id/text"
        android:layout_width="50dp"
        android:layout_height="70dp"
        app:layout_anchor="@+id/b1"
        app:layout_anchorGravity="top|end" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/b1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/activity_vertical_margin"
        android:src="@drawable/ic_share_black_24dp"
        app:backgroundTint="#3F51B5"
        app:layout_anchor="@+id/bottom_sheet_mapviewfinal"
        app:layout_anchorGravity="top|end" />

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

使用layout_anchor id时，您是在引用bottom_sheet的id。

参考： Medium参考

希望有所帮助。

- Petar Ceho

---

谢谢您的回答，但目前我没有在安卓项目中工作，无法确认您的答案。 - Thanassis

我看到你的代码只涉及一个浮动操作按钮。我的问题是关于两个浮动操作按钮的。 - Thanassis

编辑了答案，只需简单地为按钮和布局之间添加空的textview，而layout_anchor是用于textview浮动按钮id 1，然后对于浮动按钮2，layout_anchor id是textview，对于所有三个按钮，app:layout_anchorGravity都是相同的top | bottom。这就是完整的答案，如果您接受它的话，那就太好了:D - Petar Ceho

太感谢了！'app:layout_anchorGravity="top|end"' 对我很有帮助！ - iamkdblue

当底部表单占据整个屏幕时，只有b1消失了，而b2没有消失。你如何实现b2的相同效果？ - nullmn

Answer 3

您可以使用类似这样的布局：

您可以使用类似这样的布局：

<?xml version="1.0" encoding="utf-8"?>  
<android.support.design.widget.CoordinatorLayout> 

    <android.support.design.widget.AppBarLayout>
          <!-- Your code -->
    </android.support.design.widget.AppBarLayout>

    <!-- Your content -->
    <include layout="@layout/content_main" />

    <!-- Bottom Sheet -->
    <include layout="@layout/bottom_sheets_main"/>

    <!-- First FAB -->
    <android.support.design.widget.FloatingActionButton 
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        app:layout_anchor="@id/bottomSheet"
        app:layout_anchorGravity="bottom|end"/>  

    <!-- Second FAB -->
    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|end"
        app:layout_anchor="@id/fab"
        app:layout_anchorGravity="top" />

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

出于清晰明了的目的，我在示例中使用了“include”关键字，但是app:layout_anchor才是让您的FAB“粘”在底部表上的关键，因此您应该将底部表的id作为参数放在那里，您可以使用layout_anchor原理将第二个FAB固定在第一个FAB上。

- Ruan_Lopes

---

这种方法适用于一个按钮。 - Thanassis

我正在处理这个问题。你的答案对我来说不是完全的解决方案，但它给了我一些提示。 - Thanassis

我现在正在研究这个，以实现我的解决方案。 - Thanassis

我给了你基本的布局来帮助你解决问题，请再次阅读你的问题。 - Ruan_Lopes

为什么我的答案不完整？你试过了吗？你正在尝试创建一个自定义行为，以执行与app:layout_anchor和app:layout_anchorGravity组合相同的操作。 - Ruan_Lopes

让我们在聊天中继续这个讨论。 - Thanassis