FloatingActionButton在RecycleView中滑動隱藏顯示

maweiliang發表於2018-10-15
View

FloatingActionButton是的Google在com.android.support:design庫中的一個懸浮按鈕，一般簡稱（FAB按鈕），他也是Material Design 設計的一員，FAB和RecycleView搭配是使用也是很常見的操作，譬如在recycleView中下滑隱藏上滑顯示，以及快速返回到RecycleView的第一個行等操作。下面我們來實現個常見的需求，首選我們建立一個project命名為FloatingActionButton. 主介面activity_main.xml佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

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

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fcb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="@dimen/default_margin"
        android:backgroundTint="@color/colorAccent"
        android:onClick="onClickFCB"
        android:src="@drawable/up"
        app:borderWidth="0dp"
        app:elevation="10dp"
        app:fabSize="normal"
        app:rippleColor="@color/colorPrimary" />
</RelativeLayout>
複製程式碼

佈局很簡單就是一個recycleView加上一個FAB按鈕，順便說一下FAB常見用的屬性

  • app:backgroundTint ：設定FAB的背景顏色。
  • app:rippleColor:設定FAB點選時的背景顏色,也就是水波紋效果的顏色
  • app:borderWidth：該屬性尤為重要，如果不設定0dp，那麼在4.1的sdk上FAB會顯示為正方形，而且在5.0以後的sdk沒有陰影效果，所以設定為borderWidth="0dp"，
  • app:elevation：預設狀態下FAB的陰影大小。。
  • app:fabSize：設定FAB的大小，該屬性有兩個值，分別為normal和mini，對應的FAB大小分別為56dp和40dp。
  • android:src:設定FAB的圖示，Google建議符合Design設計的該圖示大小為24dp。
  • app:layout_anchor:設定FAB的錨點，即以哪個控制元件為參照點設定位置
  • app:layout_anchorGravity：設定FAB相對錨點的位置，值有 bottom、center、right、left、top等。

接下來重點是監聽recycleView的滑動，我RecycleView可通過 recyclerView.addOnScrollListener()方法來監聽滑動的距離，

 recyclerView.addOnScrollListener(new RecScrollListener(this));
複製程式碼

RecScrollListener的具體實現

public class RecScrollListener extends RecyclerView.OnScrollListener {
    private static final int THRESHOLD = 10;//滑動的距離
    private int distance = 0;
    private FABStateListener fcbStateListener;
    private boolean visible = true;//是否可見

    public RecScrollListener(FCBStateListener hideScrollListener) {
        this.fcbStateListener = hideScrollListener;
    }
    //滾動時回撥
    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        super.onScrolled(recyclerView, dx, dy);
        if (distance > THRESHOLD && visible) {
            //隱藏
            visible = false;
            fcbStateListener.onFCBHide();
            distance = 0;
        } else if (distance < -20 && !visible) {
            //顯示
            visible = true;
            fcbStateListener.onFCBShow();
            distance = 0;
        }
        if (visible && dy > 0 || (!visible && dy < 0)) {
            distance += dy;
        }
    }
}
複製程式碼

RecScrollListener類繼承RecycleView的OnScrollListener類，重寫onScrolled的方法，該方法在每次RecycleView滑動的時候回撥，其中dy是每次Y軸滑動的距離。

dy > 0 ：手指向上滾動,列表滾動顯示下面的內容

dy < 0 ：手指向下滾動,列表滾動顯示上面的內容

THRESHOLD是預設滑動的距離，超過該距離就顯示或者隱藏FAB，distance是記錄滑動距離的累加值，FABStateListener是回撥FAB按鈕影藏顯示的回撥介面，visible判斷FAB是否影藏了， MainActivity.java

 private RecyclerView recyclerView;
    private FloatingActionButton floatingActionButton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        floatingActionButton = findViewById(R.id.fcb);
        recyclerView = findViewById(R.id.rcv);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));
        List<String> list = new ArrayList<>();
        for (int i = 0; i < 100; i++) {
            list.add("Item_" + i);
        }
        recyclerView.setAdapter(new RecFabAdapter(list));
        recyclerView.addOnScrollListener(new RecScrollListener(this));
    }

    //點選FAB後recyclerView回到首頁
    public void onClickFAB(View view) {
        recyclerView.smoothScrollToPosition(0);
    }
   
   //隱藏FAB
    @Override
    public void onFABHide() {
        RelativeLayout.LayoutParams layoutParams = (LayoutParams) floatingActionButton.getLayoutParams();
        floatingActionButton.animate().translationY(floatingActionButton.getHeight() + layoutParams.bottomMargin).setInterpolator(new AccelerateInterpolator(3));
    }
    //顯示FAB
    @Override
    public void onFABShow() {
        floatingActionButton.animate().translationY(0).setInterpolator(new DecelerateInterpolator(3));
    }
}
複製程式碼

最後效果如下

效果圖
原始碼下載

相關文章