1. 首頁
  2. 問答
  3. 菜單和Android設計支持的自動隱藏FloatingActionButton圖書館

菜單和Android設計支持的自動隱藏FloatingActionButton圖書館

2015-07-13 29 views
8
具有自動隱藏滾動

我使用的是Android設計支持庫，我想一個FloatingActionButton，菜單和Android設計支持的自動隱藏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"> 

    <ScrollView 
     android:id="@+id/scrollView" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 


     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/LargeText" /> 
    </ScrollView> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     app:layout_anchorGravity="bottom|right|end" 
     app:layout_anchor="@id/scrollView" 
     android:src="@drawable/abc_btn_rating_star_off_mtrl_alpha" /> 

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

FloatingActionButton總是顯示當滾動文本，我想在滾動文本時自動隱藏它。

而且，我想通過點擊FloatingActionButton有FloatingActionButton菜單，就像這樣：

enter image description here

來源

2015-07-13 AliSh

+2

檢查這個環節，它可以幫助你https://guides.codepath.com/android/Floating-Action-Buttons – darwin

+0

你可以檢查此http：//計算器.com/a/30701458/2022000 –

+0

你是如何顯示晶圓廠旁邊的文字的？ –

回答

31

FloatingActionButton具有自動隱藏滾動，

必須使用android.support.v4.widget.NestedScrollView代替ScrollView。你不能使用ScrollView。您必須使用NestedScrollView或實現NestedScrollingChild接口的視圖，如RecyclerView。

要實現這種模式，您必須實現自定義Behavior。 Google員工發佈了一個很好的代碼，當用戶向下滾動時隱藏FAB，並在滾動時顯示該代碼。重用FloatingActionButton.Behavior用於隱藏/顯示FAB的動畫，以響應AppBarLayout的退出/輸入。

已更新18/07/2015

隨着22.2.1，你可以簡單地添加以下發布的代碼，使用預建的動畫。 就使用這樣的類：（原始來源here）

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior { 
    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) { 
     super(); 
    } 

    @Override 
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, 
             final View directTargetChild, final View target, final int nestedScrollAxes) { 
     // Ensure we react to vertical scrolling 
     return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL 
       || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); 
    } 

    @Override 
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, 
           final View target, final int dxConsumed, final int dyConsumed, 
           final int dxUnconsumed, final int dyUnconsumed) { 
     super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); 
     if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) { 
      // User scrolled down and the FAB is currently visible -> hide the FAB 
      child.hide(); 
     } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) { 
      // User scrolled up and the FAB is currently not visible -> show the FAB 
      child.show(); 
     } 
    } 
}

那麼你可以申請這種行爲，以您的FAB使用：

<android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
    app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior" />

隨着設計22.2.0： 你必須使用這樣的一個類：（原始來源here）

public class ScrollAwareFABBehavior extends FloatingActionButton.Behavior { 
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator(); 
    private boolean mIsAnimatingOut = false; 

    public ScrollAwareFABBehavior(Context context, AttributeSet attrs) { 
     super(); 
    } 

    @Override 
    public boolean onStartNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, 
             final View directTargetChild, final View target, final int nestedScrollAxes) { 
     // Ensure we react to vertical scrolling 
     return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL 
       || super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, nestedScrollAxes); 
    } 

    @Override 
    public void onNestedScroll(final CoordinatorLayout coordinatorLayout, final FloatingActionButton child, 
           final View target, final int dxConsumed, final int dyConsumed, 
           final int dxUnconsumed, final int dyUnconsumed) { 
     super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed); 
     if (dyConsumed > 0 && !this.mIsAnimatingOut && child.getVisibility() == View.VISIBLE) { 
      // User scrolled down and the FAB is currently visible -> hide the FAB 
      animateOut(child); 
     } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) { 
      // User scrolled up and the FAB is currently not visible -> show the FAB 
      animateIn(child); 
     } 
    } 

    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits 
    private void animateOut(final FloatingActionButton button) { 
     if (Build.VERSION.SDK_INT >= 14) { 
      ViewCompat.animate(button).scaleX(0.0F).scaleY(0.0F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer() 
        .setListener(new ViewPropertyAnimatorListener() { 
         public void onAnimationStart(View view) { 
          ScrollAwareFABBehavior.this.mIsAnimatingOut = true; 
         } 

         public void onAnimationCancel(View view) { 
          ScrollAwareFABBehavior.this.mIsAnimatingOut = false; 
         } 

         public void onAnimationEnd(View view) { 
          ScrollAwareFABBehavior.this.mIsAnimatingOut = false; 
          view.setVisibility(View.GONE); 
         } 
        }).start(); 
     } else { 
      Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_out); 
      anim.setInterpolator(INTERPOLATOR); 
      anim.setDuration(200L); 
      anim.setAnimationListener(new Animation.AnimationListener() { 
       public void onAnimationStart(Animation animation) { 
        ScrollAwareFABBehavior.this.mIsAnimatingOut = true; 
       } 

       public void onAnimationEnd(Animation animation) { 
        ScrollAwareFABBehavior.this.mIsAnimatingOut = false; 
        button.setVisibility(View.GONE); 
       } 

       @Override 
       public void onAnimationRepeat(final Animation animation) { 
       } 
      }); 
      button.startAnimation(anim); 
     } 
    } 

    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters 
    private void animateIn(FloatingActionButton button) { 
     button.setVisibility(View.VISIBLE); 
     if (Build.VERSION.SDK_INT >= 14) { 
      ViewCompat.animate(button).scaleX(1.0F).scaleY(1.0F).alpha(1.0F) 
        .setInterpolator(INTERPOLATOR).withLayer().setListener(null) 
        .start(); 
     } else { 
      Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.fab_in); 
      anim.setDuration(200L); 
      anim.setInterpolator(INTERPOLATOR); 
      button.startAnimation(anim); 
     } 
    } 
}

然後，您可以使用應用此行爲您的FAB：

<android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab" 
    app:layout_behavior="com.support.android.designlibdemo.ScrollAwareFABBehavior" />

當然，你可以更改此代碼以獲得您喜歡的圖案。

而且，我想通過點擊FloatingActionButton，這樣有FloatingActionButton菜單：

目前原FAB不支持這種模式。你必須實現一個自定義代碼來實現它。

來源

2015-07-13 12:40:38

+0

這不適用於scrollView。我嘗試了這段代碼，但它僅適用於ViewPager。 – AliSh

+0

你不能使用ScrollView。您必須使用NestedScrollView或實現NestedScrollingChild接口的視圖，如RecyclerView。 –

+0

謝謝，這是工作！ – AliSh

1

你可以實現它

這是我的代碼。

第1步：

首先要FloatingActionMenu的吸氣，這樣就可以從另一個活動，也可從您的recycleview使用

public FloatingActionMenu getFloatingActionMenu() { 
     return fabMenu; 
    }

步驟2片段稱之爲：

低於線電話來自其他活動或來自片段

FloatingActionMenu fabMenu=((MainActivity)getActivity()).getFloatingActionMenu();

第3步：

立即檢查wheather recycleview是滾動或不依賴於「DY」位置 在這裏，我已經用動畫fabMenu

Animation FabMenu_fadOut = AnimationUtils.loadAnimation(getActivity(), 
      R.anim.fade_out); 
Animation FabMenu_fadIn = AnimationUtils.loadAnimation(getActivity(), 
      R.anim.abc_grow_fade_in); 

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() { 
      @Override 
      public void onScrolled(RecyclerView recyclerView, int dx, int dy) { 
       super.onScrolled(recyclerView, dx, dy); 
       if (dy > 0 && floatingActionButton.isShown()) { 
        //fabMenu.startAnimation(FabMenu_fadIn); 
        fabMenu.setVisibility(View.GONE); 
       } 
       if (dy < 0 && !floatingActionButton.isShown()) { 
        // fabMenu.startAnimation(FabMenu_fadOut); 
        fabMenu.setVisibility(View.VISIBLE); 
       } 
      } 
     });

注意：如果你想隱藏FloatingActionButton上滾動，然後使用相同的代碼如在FloatingActionMenu中。

謝謝。

來源

2016-02-26 09:48:28 Ulearn

0

您可以使用this實現浮動操作菜單。

關於浮動操作菜單的動畫，你可以創建一個名爲ScrollAwareFloatingActionMenuBehaviour類：

public class ScrollAwareFloatingActionMenuBehaviour extends CoordinatorLayout.Behavior<FloatingActionsMenu> { 
    private static final Interpolator INTERPOLATOR = new FastOutSlowInInterpolator(); 
    private boolean mIsAnimatingOut = false; 
    private boolean mIsAnimatingIn = false; 

    public ScrollAwareFloatingActionMenuBehaviour(Context context, AttributeSet attrs) { 
    } 

    @Override 
    public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionsMenu child, View dependency) { 
     return dependency instanceof Snackbar.SnackbarLayout; 
    } 

    @Override 
    public boolean onDependentViewChanged(CoordinatorLayout parent, FloatingActionsMenu child, View dependency) { 
     float translationY = Math.min(0, dependency.getTranslationY() - dependency.getHeight()); 
     child.setTranslationY(translationY); 
     return true; 
    } 

    @Override 
    public boolean onStartNestedScroll(CoordinatorLayout coordinatorLayout, 
             FloatingActionsMenu child, View directTargetChild, View target, int nestedScrollAxes) { 
     return nestedScrollAxes == ViewCompat.SCROLL_AXIS_VERTICAL || 
       super.onStartNestedScroll(coordinatorLayout, child, directTargetChild, target, 
         nestedScrollAxes); 
    } 

    @Override 
    public void onNestedScroll(CoordinatorLayout coordinatorLayout, FloatingActionsMenu child, 
           View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed) { 
     super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, 
       dyUnconsumed); 

     if (dyConsumed > 10 && !this.mIsAnimatingOut && !this.mIsAnimatingIn && child.getVisibility() == View.VISIBLE) { 
      // User scrolled down and the FAB is currently visible -> hide the FAB 
      animateOut(child); 
     } else if (dyConsumed < -10 && !this.mIsAnimatingOut && !this.mIsAnimatingIn && child.getVisibility() != View.VISIBLE) { 
      // User scrolled up and the FAB is currently not visible -> show the FAB 
      animateIn(child); 
     } 
    } 

    // Same animation that FloatingActionButton.Behavior uses to hide the FAB when the AppBarLayout exits 
    private void animateOut(final FloatingActionsMenu button) { 
     if (Build.VERSION.SDK_INT >= 14) { 
      ViewCompat.animate(button).translationYBy(200F).alpha(0.0F).setInterpolator(INTERPOLATOR).withLayer() 
        .setListener(new ViewPropertyAnimatorListener() { 
         public void onAnimationStart(View view) { 
          ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = true; 
         } 

         public void onAnimationCancel(View view) { 
          ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = false; 
         } 

         public void onAnimationEnd(View view) { 
          ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = false; 
          view.setVisibility(View.GONE); 
         } 
        }).start(); 
     } else { 
      Animation anim = AnimationUtils.loadAnimation(button.getContext(), R.anim.design_fab_out); 
      anim.setInterpolator(INTERPOLATOR); 
      anim.setDuration(200L); 
      anim.setAnimationListener(new Animation.AnimationListener() { 
       public void onAnimationStart(Animation animation) { 
        ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = true; 
       } 

       public void onAnimationEnd(Animation animation) { 
        ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingOut = false; 
        button.setVisibility(View.GONE); 
       } 

       @Override 
       public void onAnimationRepeat(final Animation animation) { 
       } 
      }); 
      button.startAnimation(anim); 
     } 
    } 

    // Same animation that FloatingActionButton.Behavior uses to show the FAB when the AppBarLayout enters 
    private void animateIn(FloatingActionsMenu button) { 
     button.setVisibility(View.VISIBLE); 
     if (Build.VERSION.SDK_INT >= 14) { 
      ViewCompat.animate(button).translationYBy(-200F).alpha(1.0F) 
        .setInterpolator(INTERPOLATOR).withLayer().setListener(new ViewPropertyAnimatorListener() { 
       @Override 
       public void onAnimationStart(View view) { 
        ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingIn = true; 

       } 

       @Override 
       public void onAnimationEnd(View view) { 
        ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingIn = false; 

       } 

       @Override 
       public void onAnimationCancel(View view) { 
        ScrollAwareFloatingActionMenuBehaviour.this.mIsAnimatingIn = false; 

       } 
      }) 
        .start(); 
     } else { 
      Animation anim = AnimationUtils.loadAnimation(button.getContext(), android.support.design.R.anim.design_fab_in); 
      anim.setDuration(200L); 
      anim.setInterpolator(INTERPOLATOR); 
      button.startAnimation(anim); 
     } 
    } 
}

注意R.anim.fab_in和R.anim.fab_out由R.anim.design_fab_in和R取代.anim.design_fab_out分別。

使用它在XML：

<com.getbase.floatingactionbutton.FloatingActionsMenu 
     xmlns:fab="http://schemas.android.com/apk/res-auto" 
     android:id="@+id/fab_menu" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="end|bottom" 
     android:layout_margin="@dimen/fab_margin" 
     fab:fab_addButtonColorNormal="@color/colorAccent" 
     fab:fab_addButtonColorPressed="@color/colorAccentLight" 
     fab:fab_addButtonPlusIconColor="@android:color/white" 
     app:layout_behavior="com.example.widgets.behaviour.ScrollAwareFloatingActionMenuBehaviour" 
     fab:fab_labelStyle="@style/menu_labels_style" 
     fab:fab_labelsPosition="left"> 

     <com.getbase.floatingactionbutton.FloatingActionButton 
      android:id="@+id/fab_share" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      fab:fab_colorNormal="@color/fab_normal_blue" 
      fab:fab_colorPressed="@color/fab_normal_blue_pressed" 
      fab:fab_icon="@drawable/ic_social_share" 
      fab:fab_title="@string/fab_menu_group_chat" /> 

</com.getbase.floatingactionbutton.FloatingActionsMenu>

來源

2016-04-12 07:09:04

相關問題

 相關問題