底部移動的浮動動作按鈕

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上。