3

我有一個嵌套滾動視圖,內容像一些線性佈局和文字瀏覽。 由於某些原因,我使用了一個floatactionbutton庫。所以我不能使用任何行爲。 我不知道我應該如何處理scrollviewlistener從scrollview隱藏和動態顯示晶圓廠的行爲。滾動時在NestedScrollView中隱藏FAB

任何建議如何隱藏和滾動顯示晶圓廠?

+0

檢查這些解決方案:http://stackoverflow.com/questions/32038332/using-google-design-圖書館如何隱藏工廠按鈕在向下滾動 – piotrek1543

+0

已經。什麼都沒有 – Muffin

+0

仔細閱讀:https://plus.google.com/+IanLake/posts/haQL1mnTzaw並檢查GitHub上的cheesesquare – piotrek1543

回答

8

創建FabScrollBehavior類

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

    public FabScrollBehavior(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     this.toolbarHeight = AppUtil.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) { 
     if (dependency instanceof AppBarLayout) { 
      CoordinatorLayout.LayoutParams lp = (CoordinatorLayout.LayoutParams) fab.getLayoutParams(); 
      int fabBottomMargin = lp.bottomMargin; 
      int distanceToScroll = fab.getHeight() + fabBottomMargin; 
      float ratio = (float)dependency.getY()/(float)toolbarHeight; 
      fab.setTranslationY(-distanceToScroll * ratio); 
     } 
     return true; 
    } 
} 

凡AppUtil.getToolbarHeight(上下文)是 -

public static int getToolbarHeight(Context context) { 
     final TypedArray styledAttributes = context.getTheme().obtainStyledAttributes(
       new int[]{R.attr.actionBarSize}); 
     int toolbarHeight = (int) styledAttributes.getDimension(0, 0); 
     styledAttributes.recycle(); 

     return toolbarHeight; 
    } 

然後在佈局添加到FloatingActionButton layout_behavior:

<android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab_task_accept" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_accepted" 
     app:layout_behavior="pass.to.your.FabScrollBehavior.Class" 
     app:theme="@style/Widget.AppTheme.Fab"/> 

整體佈局看起來像

<?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" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:animateLayoutChanges="true" 
    android:orientation="vertical"> 

    <android.support.design.widget.AppBarLayout 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:theme="@style/Widget.AppTheme.AppBarOverlay"> 

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

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


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

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab_task_accept" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_accepted" 
     app:layout_behavior="pass.to.FabScrollBehavior.Class" 
     app:theme="@style/Widget.AppTheme.Fab"/> 


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

https://mzgreen.github.io/2015/02/15/How-to-hideshow-Toolbar-when-list-is-scroling(part1)/實現

+0

真棒,但layout_behavior只是使用「pass.to.FabScrollBehavior」 – Chuehnone

12

下面簡單添加以下代碼到你的NestedScrollView ScrollChangeListener:

NestedScrollView nsv = (NestedScrollView) v.findViewById(R.id.nsv); 
    nsv.setOnScrollChangeListener(new NestedScrollView.OnScrollChangeListener() { 
     @Override 
     public void onScrollChange(NestedScrollView v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) { 
      if (scrollY > oldScrollY) { 
       fab.hide(); 
      } else { 
       fab.show(); 
      } 
     } 
    });