java - 如何使用 RecyclerView 创建滚动返回顶部按钮
问题描述
我有一个使用 RecyclerView 显示图像的应用程序,我想显示一个按钮,让用户在向下滚动时返回顶部
像这样的东西:
那我该怎么做呢?
片段壁纸.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;
}
}
解决方案
是使用RelativeLayout
需求吗?使用 aFrameLayout
或 aConstraintLayout
和 a似乎很简单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)
}
}
}
推荐阅读
- python - 如何提高 Django,N + 1 问题中的查询性能?
- visual-studio-code - VSCode - 为“找不到模块的声明文件”禁用三个点
- typescript - 如何为 CanActivate 函数创建虚拟 ExecutionContext 以进行单元测试?
- reactjs - react-router v5 的嵌套路由不会更新布局
- couchbase - 简单的 N1QL 查询,用于从表中删除具有列名的条目。以及使用 Couchbase 的 where 条件的简单选择语句
- php - 在php中注册后无法向用户发送电子邮件
- excel - 如何在 MATLAB 上的矩阵的列中找到三个连续的 1?
- html - 在状态更新时更改我的反应组件中的字符串时遇到问题
- flutter - Flutter - 一起使用 BottomNavigationBar 和 Drawer
- c# - 在 audiosource.play 上收到警告无法播放禁用的音频源如何解决?