底部移动的浮动动作按钮

Question

我想使用支持库中的Bottom-sheet和两个浮动动作按钮（FABS）来显示图片。关键是我也希望两张FABS能够像图片1和图片2一样移动。 我必须使用什么样的基本布局以及如何使FABS在底层粘贴？

UPDATE

<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能够按我的要求工作，但我仍然认为我不是很清楚。

我想知道是否有可能以更官方的方式做到这一点。

Answer 1

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

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

我用的清晰度，但应用程序的缘故例如“包括”：layout_anchor是什么事情让你的FAB“粘”上了因此您应该将底部工作表的ID作为参数，并且您可以按照相同的原则为您制定第二个FAB，使用layout_anchor将其粘贴到第一个FAB上。