FloatingActionButton隐藏在列表滚动上

Question

我正在使用FloatingActionButton包中的android.support.design.widget：

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentEnd="true"
    android:layout_marginBottom="20dp"
    android:layout_marginEnd="16dp"
    android:clickable="true"
    android:backgroundTint="@color/primaryColor"
    android:src="@drawable/ic_search_white_24dp"
    app:borderWidth="0dp"
    app:elevation="6dp"
    app:backgroundTint="@color/primaryColorDark"
    app:rippleColor="@color/accentColor" />

当列表视图向下滚动时，是否可以将该按钮配置为隐藏动画，并在列表视图向上滚动到顶部时再次显示该按钮？

Answer 1

那些希望使用recyclerview进行制作的人可以这样做：

recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

    @Override
    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
        if (dy > 0 || dy < 0 && fab.isShown())
            fab.hide();
    }

    @Override
    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
        if (newState == RecyclerView.SCROLL_STATE_IDLE)
            fab.show();
        super.onScrollStateChanged(recyclerView, newState);
    }
});

Answer 2

对不起！我迟了几年才能回答这个问题。我希望这仍然对某人有帮助。这也是我的第一个答案。

伙伴！无需实现滚动侦听器。

将以下内容添加到浮动操作按钮xml中：

app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"

给予：

<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/fabAddOItransferIn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:text="@string/btn_text_transfer_in"
        app:icon="@android:drawable/ic_input_add"
        app:layout_behavior="com.google.android.material.behavior.HideBottomViewOnScrollBehavior"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

Answer 3

见this。在这里它告诉你如何做你想要实现的目标。您必须在CoordinatorLayout和ListView：

中使用它

<android.support.design.widget.CoordinatorLayout
    android:id="@+id/main_content"
    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">

          <ListView
              android:id="@+id/lvToDoList"
              android:layout_width="match_parent"
              android:layout_height="match_parent"></ListView>

          <android.support.design.widget.FloatingActionButton
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:layout_gravity="bottom|right"
              android:layout_margin="16dp"
              android:src="@drawable/ic_done"
              app:layout_anchor="@id/lvToDoList"
              app:layout_anchorGravity="bottom|right|end" />

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

Answer 4

对Irfan Raza代码的一点改进：

var mq chan string

func main() {
        mq = make(chan string)
        for i := 0; i < 4; i++ {
                go dequeue()
        }
        for {
            mq <- "ping" 
        }
}

func dequeue() {
        for m := range mq {
                fmt.Println(m)
        }
}

向下滚动时隐藏浮动操作按钮，向上滚动时显示。

Answer 5

使用此类，您可以轻松地为FAB设置动画，这里我实现了 onStopNestedScroll（）方法 ，以便在滚动停止时显示您的Fab。 我使用Handler（）;

将1000 miliSeconds设置为延迟

xx.jar "/some loc/some loc" Arg2 Arg3 ..

<强> your_layout.xml

public class FabBehaviour extends CoordinatorLayout.Behavior<FloatingActionButton> {
    private static final String TAG = "ScrollingFABBehavior";
    Handler mHandler;

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

    public FabBehaviour() {
        super();
    }

    @Override
    public void onStopNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull final FloatingActionButton child, @NonNull View target, int type) {
        super.onStopNestedScroll(coordinatorLayout, child, target, type);
        if (mHandler == null)
            mHandler = new Handler();


        mHandler.postDelayed(new Runnable() {
            @Override
            public void run() {
                child.animate().translationY(0).setInterpolator(new LinearInterpolator()).start();
                Log.d("FabAnim", "startHandler()");
            }
        }, 1000);
    }

    @Override
    public void onNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull FloatingActionButton child, @NonNull View target, int dxConsumed, int dyConsumed, int dxUnconsumed, int dyUnconsumed, int type) {
        super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed, dxUnconsumed, dyUnconsumed, type);
        if (dyConsumed > 0) {
            Log.d("Scrolling", "Up");
            CoordinatorLayout.LayoutParams layoutParams = (CoordinatorLayout.LayoutParams) child.getLayoutParams();
            int fab_bottomMargin = layoutParams.bottomMargin;
            child.animate().translationY(child.getHeight() + fab_bottomMargin).setInterpolator(new LinearInterpolator()).start();
        } else if (dyConsumed < 0) {
            Log.d("Scrolling", "down");
            child.animate().translationY(0).setInterpolator(new LinearInterpolator()).start();
        }
    }

    @Override
    public boolean onStartNestedScroll(@NonNull CoordinatorLayout coordinatorLayout, @NonNull FloatingActionButton child, @NonNull View directTargetChild, @NonNull View target, int axes, int type) {
        if (mHandler != null) {
            mHandler.removeMessages(0);
            Log.d("Scrolling", "stopHandler()");
        }
        return axes == ViewCompat.SCROLL_AXIS_VERTICAL;
    }


}

Answer 6

kotlin中有我的代码。

class ScrollAwareFABBehavior (val recyclerView: RecyclerView, val floatingActionButton: FloatingActionButton) {

    fun start() {
        recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
            override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
                super.onScrolled(recyclerView, dx, dy)

                if (dy > 0) {
                    if (floatingActionButton!!.isShown) {
                        floatingActionButton?.hide()
                    }
                } else if (dy < 0) {
                    if (!floatingActionButton!!.isShown) {
                        floatingActionButton?.show()
                    }
                }
            }
        })
    }
}

现在，您只需要使用带有recyclerView和构造函数上的fab的ScrollAwareFABBehavior，然后调用方法start（）。

ScrollAwareFABBehavior(recyclerView = recyclerViewPlaceFormContainer, floatingActionButton = floatingActionButton).start()

Answer 7

为什么我们可以使用默认的listview和浮动操作按钮以正常的方式只对listview.onscroll监听器进行修改然后我们就可以了像回收

 listview.setOnScrollListener(new AbsListView.OnScrollListener() {
        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {


        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

            int lastItem = firstVisibleItem + visibleItemCount;
            if (lastItem == totalItemCount) {

                fab.setVisibility(View.INVISIBLE);
            }else {
                fab.setVisibility(View.VISIBLE);
            }
        }
    });

Answer 8

据我所知，实现这一点的最佳方法如下：

public class ScrollingFABBehavior extends FloatingActionButton.Behavior {


private static final String TAG = "ScrollingFABBehavior";

public ScrollingFABBehavior(Context context, AttributeSet attrs) {
    super();
    // Log.e(TAG, "ScrollAwareFABBehavior");
}


public boolean onStartNestedScroll(CoordinatorLayout parent, FloatingActionButton child, View directTargetChild, View target, int nestedScrollAxes) {

    return true;
}

@Override
public boolean layoutDependsOn(CoordinatorLayout parent, FloatingActionButton child, View dependency) {
    if (dependency instanceof RecyclerView)
        return true;

    return false;
}

@Override
public void onNestedScroll(CoordinatorLayout coordinatorLayout,
                           FloatingActionButton child, View target, int dxConsumed,
                           int dyConsumed, int dxUnconsumed, int dyUnconsumed) {
    // TODO Auto-generated method stub
    super.onNestedScroll(coordinatorLayout, child, target, dxConsumed, dyConsumed,
            dxUnconsumed, dyUnconsumed);
    //Log.e(TAG, "onNestedScroll called");
    if (dyConsumed > 0 && child.getVisibility() == View.VISIBLE) {
     //   Log.e(TAG, "child.hide()");
        child.hide();
    } else if (dyConsumed < 0 && child.getVisibility() != View.VISIBLE) {
      //  Log.e(TAG, "child.show()");
        child.show();
    }
}}

详细解答请查看。 Hide FloatingActionButton on scroll of RecyclerView

Answer 9

Kotlin +数据绑定适配器

@BindingAdapter("bindAdapter:attachFloatingButton")
fun bindRecyclerViewWithFB(recyclerView: RecyclerView, fb: FloatingActionButton) {
    recyclerView.addOnScrollListener(object : RecyclerView.OnScrollListener() {
        override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
            super.onScrolled(recyclerView, dx, dy)

            if (dy > 0 && fb.isShown) {
                fb.hide()
            } else if (dy < 0 && !fb.isShown) {
                fb.show()
            }
        }
    })
}

和xml

    <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/main_recyclerview"
            android:layout_width="match_parent"
            app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
            android:layout_height="wrap_content"
            android:clipToPadding="false"
            android:paddingBottom="8dp" app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="8dp"
            app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="8dp"
            android:layout_marginTop="8dp" app:layout_constraintTop_toBottomOf="@+id/main_chips"
            android:layout_marginBottom="8dp"
            **bindAdapter:attachFloatingButton="@{mainFb}"**
            app:layout_constraintBottom_toBottomOf="parent" 
            app:layout_constraintVertical_bias="0.0"/>


    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
            android:id="@+id/main_fb"
            android:layout_width="wrap_content"
            app:layout_constraintBottom_toBottomOf="parent"
            style="@style/Widget.Design.FloatingActionButton"
            app:layout_constraintEnd_toEndOf="parent"
            android:layout_height="wrap_content"
            android:layout_margin="18dp"
            android:background="@color/colorPrimaryDark"
            app:icon="@drawable/ic_add_black_24dp"/>

Answer 10

对于Kotlin，这非常简单（API 23 +）

myRecyclerView.setOnScrollChangeListener { _, _, _, _, oldScrollY ->
    if (oldScrollY < 0) myFAB.hide() else myFAB.show()
}

Answer 11

mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
    super.onScrolled(recyclerView, dx, dy);
    if (dy > 0 && mFloatingActionButton.getVisibility() == View.VISIBLE) {
        mFloatingActionButton.hide();
    } else if (dy < 0 && mFloatingActionButton.getVisibility() != View.VISIBLE) {
        mFloatingActionButton.show();
    }
}});

Answer 12

这里我为最后一个视图项添加了额外的填充，以避免重叠列表项与浮动操作按钮

我在RecyclerView.Adapter的onBindViewHolder方法中使用它将列表中最后一项的下边距设置为72dp，以便它在浮动操作按钮上方向上滚动。

这不需要列表中的虚拟条目。

@Override
public void onBindViewHolder(ViewHolder holder, int position) {
    // other binding code goes here.

    if (position + 1 == getItemCount()) {
        // set bottom margin to 72dp.
        setBottomMargin(holder.itemView, (int) (72 * Resources.getSystem().getDisplayMetrics().density));
    } else {
        // reset bottom margin back to zero. (your value may be different)
        setBottomMargin(holder.itemView, 0);
    }
}

public static void setBottomMargin(View view, int bottomMargin) {
    if (view.getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
        ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) view.getLayoutParams();
        params.setMargins(params.leftMargin, params.topMargin, params.rightMargin, bottomMargin);
        view.requestLayout();
    }
}

Answer 13

另一种使用kotlin扩展的recycleView方法。

rv.attachFab(requireActivity().fab)
// in my case i made fab public on activity

现在，您可以使用以下方法将fab连接到任何recycleView：

class something : stuff
{
    public something()
    {
        someStuff.Add(new something());
    }
}