Hiện/Ẩn FloatingActionButton trên ViewPager swipe

Question

Tôi có một hoạt động có 3 tab. Mỗi trang tab là một đoạn hiển thị RecyclerView. Một trong những mảnh có FloatingActionButton trong đó. Tôi đang triển khai nút này trong bố cục của Fragment. Tôi cũng làm cho nó tĩnh ở phía dưới bên phải của Fragment.

Fragment bố trí:

- CoordinatorLayout 
    - RecyclerView 
    - FAB (without any behavior) 

Trong bố trí hoạt động, tôi có:

- CoordinatorLayout 
    - AppBarLayout 
     - Toolbar 
     - TabLayout (SmartTabLayout) 
    - ViewPager 

Các vấn đề bây giờ là FAB được nửa ẩn từ quan điểm khi Toolbar được mở rộng, nhưng hoàn toàn hiển thị khi Thanh công cụ bị thu gọn. Mặc dù điều này không xảy ra nếu tôi thực hiện nút FAB trong chính Activity. Nhưng tôi không muốn có nút trong tất cả các mảnh vỡ. Tôi chỉ đưa nó vào Fragment đầu tiên.

Đây là gif tôi đã thực hiện để giải thích rõ ràng hơn.

XML cho bố trí Hoạt động:

<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/coordinatorLayout" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.design.widget.AppBarLayout 
     android:id="@+id/appbarLayout" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content"> 

     <android.support.v7.widget.Toolbar 
      android:id="@+id/toolbar" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:minHeight="?attr/actionBarSize" 
      android:background="@color/color_primary" 
      app:layout_scrollFlags="scroll|enterAlways" /> 

     <com.ogaclejapan.smarttablayout.SmartTabLayout 
      android:id="@+id/viewpagertab" 
      android:layout_width="match_parent" 
      android:layout_height="@dimen/tab_height" 
      android:background="@color/color_primary" /> 

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

    <android.support.v4.view.ViewPager 
     android:id="@+id/viewpager" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     app:layout_behavior="@string/appbar_scrolling_view_behavior" /> 

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

XML cho bố trí Fragment:

<?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:id="@+id/coordinatorLayout" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/card_list" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" /> 

    <android.support.design.widget.FloatingActionButton 
     android:id="@+id/fab_add" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_margin="@dimen/fab_margin" 
     android:src="@drawable/ic_plus_white_48dp" 
     app:layout_anchor="@id/card_list" 
     app:layout_anchorGravity="bottom|right|end" /> 

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

Câu hỏi của tôi là làm thế nào để tôi làm sao cho nút vẫn sẽ hiện diện khi recyclerview là cuộn ?

Answer 1

Tùy chọn tốt nhất là chỉ cần đặt FloatingActionButton trong Hoạt động và gọi show() và hide() trong một ViewPager.OnPageChangeListener. Bằng cách này bạn sẽ có được enter/exit animations tốt đẹp phù hợp với Material Design guidelines.

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() { 

    @Override 
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { 

    } 

    @Override 
    public void onPageSelected(int position) { 
     if (position == 0) { 
      fabAdd.show(); 
     } else { 
      fabAdd.hide(); 
     } 
    } 

    @Override 
    public void onPageScrollStateChanged(int state) { 

    } 
}); 

Kết quả:

Answer 2

Thêm

app:layout_behavior="@string/appbar_scrolling_view_behavior" 

đến RecyclerView quá.