兩個Fab與摺疊式工具

Question

我想它CollapsingToolbarLayout創建2 FAB的活動。

我創建了一個常規的滾動活動（使用1 FAB創建，效果很好，當工具欄變得摺疊時隱藏）。現在

，我試圖添加另一個FAB，但我不能把它放在第一FAB旁邊的（可以把它只有在AppBarLayout開始/中心/結束。

而且，我試圖把2 。FAB內LinearLayout它看起來不錯，但FAB沒有隱藏在工具欄是越來越倒塌

這裏是我的XML代碼：

<?xml version="1.0" encoding="utf-8"?> 
<layout 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"> 

    <data class="MomentActivityBinder"> 
     <variable 
      name="momentViewModel" 
      type="com.infibond.infi.timeline.mvp.moment.MomentViewModel"/> 
    </data> 

    <android.support.design.widget.CoordinatorLayout 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     android:fitsSystemWindows="true" 
     tools:context="com.infibond.infi.timeline.mvp.moment.TimelineMomentActivity"> 

     <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="pin" 
        app:popupTheme="@style/AppTheme.PopupOverlay"/> 

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

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

     <include 
      android:id="@+id/moment_content" 
      layout="@layout/timeline_content_moment" 
      app:momentViewModel="@{momentViewModel}"/> 

     <!--two FABs without linear layout -->  

     <LinearLayout 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      app:layout_anchor="@id/app_bar" 
      app:layout_anchorGravity="bottom|end" 
      android:orientation="horizontal"> 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fab_infi" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="@dimen/margin_baseX1" 
       android:src="@drawable/ic_radio_button_checked_black_24px" 
       android:tint="@color/gray" 
       app:layout_anchor="@id/app_bar" 
       app:layout_anchorGravity="bottom|end" 
       app:backgroundTint="@color/white"/> 

      <android.support.design.widget.FloatingActionButton 
       android:id="@+id/fab_share" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_margin="@dimen/margin_baseX1" 
       android:src="@drawable/ic_share_mobile_black_24px" 
       android:tint="@color/gray" 
       app:layout_anchor="@id/app_bar" 
       app:layout_anchorGravity="bottom|end" 
       app:backgroundTint="@color/white"/> 

     </LinearLayout> 

    <!--one FAB without linear layout --> 

    <!--<android.support.design.widget.FloatingActionButton--> 
     <!--android:id="@+id/fab_share"--> 
     <!--android:layout_width="wrap_content"--> 
     <!--android:layout_height="wrap_content"--> 
     <!--android:layout_margin="@dimen/margin_baseX1"--> 
     <!--android:src="@drawable/ic_share_mobile_black_24px"--> 
     <!--android:tint="@color/gray"--> 
     <!--app:layout_anchor="@id/app_bar"--> 
     <!--app:layout_anchorGravity="bottom|end"--> 
     <!--app:backgroundTint="@color/white"/> 

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

</layout> 

Answer 1

您可以使用AppbarlayoutChangeListener和不同狀態手動隱藏和顯示FAB

mAppBarLayout.addOnOffsetChangedListener(new AppBarStateChangeListener() { 
     @Override 
     public void onStateChanged(AppBarLayout appBarLayout, State state) { 
      switch (state) { 
       case COLLAPSED: 
        fab1.hide(); 
        fab2.hide(); 
        break; 
       case EXPANDED: 
        fab1.show(); 
        fab2.show(); 
        break; 
       case IDLE: 
        fab1.show(); 
        fab2.show(); 
        break; 
      } 
     } 
    }); 

AppBarStateChangeListener.java

public abstract class AppBarStateChangeListener implements AppBarLayout.OnOffsetChangedListener { 

public enum State { 
    EXPANDED, 
    COLLAPSED, 
    IDLE 
} 

private State mCurrentState = State.IDLE; 

@Override 
public final void onOffsetChanged(AppBarLayout appBarLayout, int i) { 
    if (i == 0) { 
     if (mCurrentState != State.EXPANDED) { 
      onStateChanged(appBarLayout, State.EXPANDED); 
     } 
     mCurrentState = State.EXPANDED; 
    } else if (Math.abs(i) >= appBarLayout.getTotalScrollRange()) { 
     if (mCurrentState != State.COLLAPSED) { 
      onStateChanged(appBarLayout, State.COLLAPSED); 
     } 
     mCurrentState = State.COLLAPSED; 
    } else { 
     if (mCurrentState != State.IDLE) { 
      onStateChanged(appBarLayout, State.IDLE); 
     } 
     mCurrentState = State.IDLE; 
    } 
} 

public abstract void onStateChanged(AppBarLayout appBarLayout, State state); 


}