工具欄與浮動操作按鈕重疊

Question

我的佈局是一個主要活動，我用片段替換內容。我正在嘗試添加一個FloatingActionButton，我希望按鈕的一半位於工具欄中，而另一半我希望位於片段內容中。我附上我想要的結果的照片。

但我得到這個

工具欄重疊晶圓廠的一半。 我試圖使透明的工具欄，但沒有任何變化。

片段的代碼是

<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" 
    android:fitsSystemWindows="true"> 

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/home_content" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <!-- contains archived and liked buttons --> 
     <LinearLayout 
      android:id="@+id/home_buttons" 
      android:layout_width="match_parent" 
      android:layout_height="40dp" 
      android:baselineAligned="false" 
      android:orientation="horizontal"> 

      <!-- archived button --> 
      <FrameLayout 
       android:id="@+id/home_archived_button" 
       android:layout_width="0.0dp" 
       android:layout_height="match_parent" 
       android:layout_marginEnd="2dp" 
       android:layout_marginRight="2dp" 
       android:layout_weight="1" 
       android:background="@color/orange"> 

       <!-- archived button icon --> 
       <ImageView 
        android:id="@+id/home_archived_button_icon" 
        android:layout_width="25dp" 
        android:layout_height="25dp" 
        android:layout_gravity="center_vertical|start" 
        android:layout_marginLeft="3dp" 
        android:layout_marginStart="3dp" 
        android:background="@mipmap/down_white_cyrcle_arrow" 
        android:contentDescription="@string/app_name" /> 

       <!-- archived button --> 
       <TextView 
        android:id="@+id/home_archived_button_text" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_vertical" 
        android:layout_marginLeft="40dp" 
        android:layout_marginStart="40dp" 
        android:text="@string/home_archived" 
        android:textColor="@color/white" /> 

      </FrameLayout> 

      <!--liked button --> 
      <FrameLayout 
       android:id="@+id/home_liked_button" 
       android:layout_width="0.0dp" 
       android:layout_height="match_parent" 
       android:layout_marginEnd="2dp" 
       android:layout_marginRight="2dp" 
       android:layout_weight="1" 
       android:background="@color/orange"> 

       <!-- liked button icon --> 
       <ImageView 
        android:id="@+id/home_liked_button_icon" 
        android:layout_width="25dp" 
        android:layout_height="25dp" 
        android:layout_gravity="center_vertical|end" 
        android:layout_marginEnd="3dp" 
        android:layout_marginRight="3dp" 
        android:background="@mipmap/down_white_cyrcle_arrow" 
        android:contentDescription="@string/app_name" /> 

       <!-- liked button text--> 
       <TextView 
        android:id="@+id/home_liked_button_text" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_vertical|end" 
        android:layout_marginEnd="40dp" 
        android:layout_marginRight="40dp" 
        android:text="@string/home_liked" 
        android:textColor="@color/white" /> 
      </FrameLayout> 
     </LinearLayout> 

     <!-- no matches --> 
     <RelativeLayout 
      android:id="@+id/home_no_matches_panel" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center"> 

      <!-- no matches text --> 
      <TextView 
       android:id="@+id/home_no_matches" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_centerHorizontal="true" 
       android:layout_centerVertical="true" 
       android:gravity="center" 
       android:text="@string/home_no_matches" 
       android:textColor="@color/black" 
       android:visibility="gone" /> 

      <!-- home invite button --> 
      <Button 
       android:id="@+id/home_invite_button" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_below="@+id/home_no_matches" 
       android:layout_centerHorizontal="true" 
       android:background="@color/orange" 
       android:padding="10dp" 
       android:text="@string/invite_friends" 
       android:textAllCaps="false" 
       android:textColor="@color/white" 
       android:visibility="gone" /> 
     </RelativeLayout> 

     <!-- recyclerView for home fragment --> 
     <android.support.v7.widget.RecyclerView 
      android:id="@+id/home_recycler_view" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:layout_below="@+id/home_buttons" 
      android:layout_marginBottom="35dp" /> 

     <!-- search button --> 
     <FrameLayout 
      android:id="@+id/home_search_button" 
      android:layout_width="match_parent" 
      android:layout_height="35dp" 
      android:layout_alignParentBottom="true" 
      android:background="@color/orange"> 

     </FrameLayout> 
    </RelativeLayout> 

    <!--home add property --> 
    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     style="@style/floating_action_button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:clickable="true" 
     android:src="@mipmap/home_add_property" 
     app:backgroundTint="@color/white" 
     app:borderWidth="0dp" 
     app:elevation="0dp" 
     app:layout_anchor="@id/home_buttons" 
     app:layout_anchorGravity="top|center_horizontal" /> 

    <!-- home search button --> 
    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/home_search_fab" 
     style="@style/floating_action_button" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:clickable="false" 
     android:src="@mipmap/home_search" 
     app:backgroundTint="@color/orange" 
     app:borderWidth="0dp" 
     app:elevation="0dp" 
     app:layout_anchor="@id/home_search_button" 
     app:layout_anchorGravity="bottom|center_horizontal" /> 


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

和活動的代碼是

<?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" 
    android:fitsSystemWindows="true" 
    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" 
      android:gravity="center" 
      app:popupTheme="@style/AppTheme.PopupOverlay" 
      app:titleTextColor="@color/black"> 

      <!-- toolbar title --> 
      <TextView 
       android:id="@+id/toolbar_title" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_gravity="center" 
       android:gravity="center" /> 

     </android.support.v7.widget.Toolbar> 

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

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

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

和晶圓廠

<style name="floating_action_button"> 
     <item name="android:layout_marginLeft">0dp</item> 
     <item name="android:layout_marginTop">-500dp</item> 
     <item name="android:layout_marginRight">0dp</item> 
     <item name="android:layout_marginBottom">-15dp</item> 
    </style> 

Answer 1

好作風，是不可能做到這一點以你的方式。您的FAB位於Fragment，而Toolbar位於Activity。我建議你做兩件事情之一： 1）將FAB代碼移動到Activity，並動態附加到它的動作（如果您需要與分段通信） 2）將Toolbar移動到Fragment。 不管怎麼說，而不是試圖內styles.xml對準你的工廠，你可以使用這樣的錨標記（它是FAB在XML屬性）：

這是我如何做的：

片段佈局：

<android.support.design.widget.AppBarLayout 
    android:id="@+id/appbar" 
    android:layout_width="match_parent" 
    android:layout_height="@dimen/detail_backdrop_height" 
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" 
    android:fitsSystemWindows="true"> 

    <android.support.design.widget.CollapsingToolbarLayout 
     android:id="@+id/collapsing_toolbar" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_scrollFlags="scroll|exitUntilCollapsed" 
     android:fitsSystemWindows="true" 
     app:contentScrim="?attr/colorPrimary" 
     app:expandedTitleMarginStart="48dp" 
     app:expandedTitleMarginEnd="64dp"> 

     <ImageView 
      android:id="@+id/backdrop" 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:fitsSystemWindows="true" 
      android:scaleType="centerCrop" 
      app:layout_collapseMode="parallax" /> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/product_details_toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="?attr/actionBarSize" 
      app:layout_collapseMode="pin" 
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/> 

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

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

<android.support.v4.widget.NestedScrollView 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> 

    //actual content 
</android.support.v4.widget.NestedScrollView> 

<android.support.design.widget.FloatingActionButton 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:clickable="true" 
    android:src="@android:drawable/ic_menu_save" 
    app:layout_anchor="@id/appbar" 
    app:layout_anchorGravity="bottom|center" 
    android:id="@+id/add_to_cart_fab" /> 

活動佈局：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@+id/fragment_container" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
</FrameLayout> 

這是崩潰的視差模式。您可能想要更改它以便始終查看您的按鈕，但它是附加FAB的正確方法。