CollapsingToolbarLayout和FloatingActionButton

Question

我有CollapsingToolbarLayout和裏面兩個FloatingActionButtons。這些FAB僅在Toolbar展開時纔可見。何時摺疊，它們是隱藏的。我需要它們可見，如果工具欄也崩潰了。我該怎麼做？

非常感謝提示...

<?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=".CalendarEventInsUpdActivity"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/app_bar" 
     android:layout_width="match_parent" 
     android:layout_height="@dimen/app_bar_height" 
     android:fitsSystemWindows="true" 
     android:theme="@style/AppTheme.AppBarOverlay"> 

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

      <android.support.v7.widget.Toolbar 
       android:id="@+id/toolbar" 
       android:layout_width="match_parent" 
       android:layout_height="?attr/actionBarSize" 
       app:layout_collapseMode="parallax" 
       app:popupTheme="@style/AppTheme.PopupOverlay"/> 

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

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

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/btnSave" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_save" 
     app:backgroundTint="@android:color/holo_green_light" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|center"/> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/btnCancel" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_revert" 
     app:backgroundTint="@android:color/holo_red_light" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end"/> 

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

Answer 1

你需要一個Behavior添加到FAB 。

嘗試類似於：

public class ScrollingFABBehavior extends CoordinatorLayout.Behavior<FloatingActionButton> { 
    private int toolbarHeight; 

    public ScrollingFABBehavior(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     this.toolbarHeight = Utils.getToolbarHeight(context); 
    } 

    @Override 
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton fab, View dependency) { 
     return dependency instanceof AppBarLayout; 
    } 

    @Override 
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionButton fab, View dependency) { 
     //do nothing with the fab or write your logic for the FAB 
     return true; 
    } 
} 

然後使用XML標籤FAB

app:layout_behavior="com.example.ScrollingFABBehavior" /> 

Answer 2

必須插入晶圓廠作爲cordinatorLayout的直接子和使用的佈局行爲，：

<android.support.design.widget.FloatingActionButton 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    app:layout_behavior="@string/appbar_scrolling_view_behavior"/> 

Answer 3

試試這個XML添加行爲。

<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:id="@+id/main_content" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:fitsSystemWindows="true"> 

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



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

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

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

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

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/btnSave" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_save" 
     app:backgroundTint="@android:color/holo_green_light" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|center"/> 

     <android.support.design.widget.FloatingActionButton 
     android:id="@+id/btnCancel" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@android:drawable/ic_menu_revert" 
     app:backgroundTint="@android:color/holo_red_light" 
     app:layout_anchor="@id/app_bar" 
     app:layout_anchorGravity="bottom|end"/> 


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