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

Question

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

像这样的东西:



那我该怎么做呢？

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

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

然后改它的backgroundTint对于您的灰色(适用于 API-21)，低于 API-21，它需要 colorAccent默认情况下。

添加 ic_baseline_arrow_upward_24.xml从 Android assets 到 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 来控制隐藏/显示 fab 按钮& 覆盖 onScrolled() & onScrollStateChanged()方法

        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 
                }

            }
        });

这是预览