1. 程式人生 > >FloatingActionButton的隱藏與顯示

FloatingActionButton的隱藏與顯示

在用RecylerView展示資料的時候,在右下方顯示一個懸浮的button,它的功能是:

在上拉時隱藏button,下拉時顯示button,點選這個button回到頂部。如圖:


佈局如下:

   <!--不加上CoordinatorLayout,FloatActionButton不會顯示-->
<android.support.design.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <android.support.v7.widget.RecyclerView
            android:layout_width="match_parent"
            android:id="@+id/recyler_view"
            android:layout_height="match_parent">
        </android.support.v7.widget.RecyclerView>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/go_up"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            app:fabSize="mini"
            android:layout_margin="@dimen/fab_margin"
            android:src="@mipmap/up"
            app:backgroundTint="#FF9800"
            />
</android.support.design.widget.CoordinatorLayout>

注意要在外面套上CoordinatorLayout,否則FloatingActionButton不會顯示。

mFloatingActionButton = view.findViewById(R.id.go_up);

為Recylerview新增滑動偵聽,上拉手指 自 下 往 上】時隱藏button,下滑手指  由 上  至下】時顯示button

 mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if (newState == RecyclerView.SCROLL_STATE_IDLE) {
                    if (lastItemPosition + 1 == lm.getItemCount()) {
                        //Log.d(TAG, "我在載入更多");
                        mCurrentStart++;
                        loadMore();
                    }
                }
            }

            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                super.onScrolled(recyclerView, dx, dy);
                lastItemPosition = lm.findLastVisibleItemPosition();
                if (dy > 0 && mFloatingActionButton.getVisibility() == VISIBLE) {
                    mFloatingActionButton.hide();
                } else if (dy < 0 && mFloatingActionButton.getVisibility() != VISIBLE) {
                    mFloatingActionButton.show();
                }
            }
        });
重點是onScrolled方法裡,當上拉【手指自下往上】時,dy>0,此時如果button可見就讓它隱藏,

下滑時,dy<0,此時如果button不可見,就讓它顯示。

到這裡已經可以實現,上拉隱藏,下滑顯示了。

接下來是 點選button,回到頂部
很簡單:

  mFloatingActionButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mRecyclerView.smoothScrollToPosition(0);  //滑動到第一項
            }
        });
smoothScrollToPositoin(),是個滑動的過程,不會很突兀,到這目的就已經達到啦.....