如何使用 RecyclerView 创建滚动返回顶部按钮

Question

我有一个使用 RecyclerView 显示图像的应用程序，我想在向下滚动时向 return 顶部显示一个按钮

像这样：

那我该怎么做呢？

fragment_wallpaper.xml

<androidx.core.widget.NestedScrollView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true"
tools:context=".Fragment.ImagesFragmentProject.WallpapersImagesFragment">

<!-- "descendantFocusability" to make the recyclerView not scrolls to the top itself -->
<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:descendantFocusability="blocksDescendants">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_image_wallpapers"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBackground"
        android:nestedScrollingEnabled="false"
        />
</RelativeLayout>

WallpaperFragment.java

public class WallpapersImagesFragment extends Fragment implements Picasso.ItemClickListener {

String[] TopImages;
private Picasso adapter;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
                         Bundle savedInstanceState) {
    // Inflate the layout for this fragment
    View rootView = inflater.inflate(R.layout.fragment_images_wallpapers, container, false);

    // ArrayList for TopImages
    TopImages = new String[]{
            // 1
            "https://i.ibb.co/GWRmtzt/AL-RZAK-0bb3940f-bd1a-458d-8377-d92fbc7aa7df.jpg",
            // 2
            "https://i.ibb.co/Cb4b46W/Allah-Call-upon-me-b680792f-3870-406c-9430-014fa3ced1f2.jpg",
            // 3
            "https://i.ibb.co/WGY5Rtb/Allah-Muhammad-8ac1439d-6295-4082-9748-1a33b1008424.jpg",
            ..............
    };

    // make new object and find the view "GridView" */
    RecyclerView recyclerView = rootView.findViewById(R.id.recyclerView_image_wallpapers);
    // Calculate the items and auto-fit it on the screen
    int mNoOfColumns = HomeImagesFragment.Utility.calculateNoOfColumns(getActivity(), 140);
    recyclerView.setLayoutManager(new GridLayoutManager(getActivity(), mNoOfColumns));
    adapter = new Picasso(getActivity(), TopImages);
    adapter.setClickListener(this);
    recyclerView.setAdapter(adapter);
    // change the adapter at random every specific time{
    Collections.shuffle(Arrays.asList(TopImages));

    return rootView;
}

@Override
public void onItemClick(View view, int position) {
    // get the image
    String image = TopImages[position];
    Intent intent = new Intent(getActivity(), PicassoDisplayWallpaperImage.class);
    intent.putExtra("imageUrl", image);
    // to not repeat the image when click on it many times
    intent.addFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);
    getActivity().startActivity(intent);
}

// Calculate the items and auto-fit it on the screen
public static class Utility {
    public static int calculateNoOfColumns(Context context, float columnWidthDp) { // For example columnWidthdp=180
        DisplayMetrics displayMetrics = context.getResources().getDisplayMetrics();
        float screenWidthDp = displayMetrics.widthPixels / displayMetrics.density;
        int noOfColumns = (int) (screenWidthDp / columnWidthDp + 0.5); // +0.5 for correct rounding to int.
        return noOfColumns;
    }
}

Answer 1

是否需要使用 RelativeLayout？使用 FrameLayout 或 ConstraintLayout 和 FloatingActionButton:

似乎很简单

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:descendantFocusability="blocksDescendants">

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/scrollUp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top|center"
        android:src="@drawable/up_arrow" <!--This line is where you set the drawable arrow icon you're using-->
        android:layout_margin="20dp" />

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView_image_wallpapers"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBackground"
        android:nestedScrollingEnabled="false" />
</FrameLayout>

RecyclerView 有几个用于滚动的辅助方法和接口，请检查所有这些的文档。您要找的是 scrollToPosition

scrollUp.setOnClickListener(new View.OnClickListener() {
    recyclerView.scrollToPosition(0)
    //Position 0 since you want to scroll to the beginning of your list.
    //Might be size of the data list instead of 0, depending on how you set
    //up your recyclerview adapter
}

您甚至可以让按钮仅在用户向上滚动后可见，否则将其隐藏，使用 onScrollListener。只要在视图上注册滚动更改，就会触发侦听器：

scrollUp.setVisibility(View.GONE)
recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

    @Override
    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
        //dy is the change in the vertical scroll position
        if(dy > 0){
            //scroll down
            scrollUp.setVisibility(View.GONE)
        }
        else if(dy < 0){
            //scroll up
            scrollUp.setVisibility(View.VISIBLE)
        }
     }
}

Answer 2

您可以将 FloatingActionButton 作为 RecyclerView 的同级添加到 RelativeLayout 中，将其位置调整到父级的顶部和中心。

然后将其 backgroundTint 更改为您的灰色（从 API-21 开始工作），在 API-21 以下，默认为 colorAccent。

将 Android 资源中的 ic_baseline_arrow_upward_24.xml 添加到 drawable 文件夹中，并在 FAB 的 android:src 属性中使用它。

要滚动到 RecyclerView 的顶部，请使用 scrollToPosition() 或 smoothScrollToPosition()

    FloatingActionButton fab = findViewById(R.id.fab);
    fab.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
//          recyclerView.scrollToPosition(0);
            recyclerView.smoothScrollToPosition(0);

        }
    });

布局：

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fillViewport="true"
    tools:context=".Fragment.ImagesFragmentProject.WallpapersImagesFragment">

    <!-- "descendantFocusability" to make the recyclerView not scrolls to the top itself -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:descendantFocusability="blocksDescendants">

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView_image_wallpapers"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorBackground"
            android:nestedScrollingEnabled="false"/>


        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:background="#6D353232"
            android:backgroundTint="#6D353232"
            android:visibility="gone"
            android:src="@drawable/ic_baseline_arrow_upward_24"
            app:rippleColor="#6D353232" />

    </RelativeLayout>

</androidx.core.widget.NestedScrollView>

您可以通过添加自定义 ReyclerView.OnScrollListener 并覆盖 onScrolled() 和 onScrollStateChanged() 方法来控制 hide/show fab 按钮

        recyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {

            @Override
            public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {

                if (dy > 0) { // scrolling down
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            fab.setVisibility(View.GONE);
                        }
                    }, 2000); // delay of 2 seconds before hiding the fab

                } else if (dy < 0) { // scrolling up

                    fab.setVisibility(View.VISIBLE);
                }
            }

            @Override
            public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                if (newState == RecyclerView.SCROLL_STATE_IDLE) { // No scrolling 
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            fab.setVisibility(View.GONE);
                        }
                    }, 2000); // delay of 2 seconds before hiding the fab 
                }

            }
        });

这是预览

如何使用 RecyclerView 创建滚动返回顶部按钮

How To Create a Scroll Back To Top Button with RecyclerView

java

android

androidx