[英]How To Create a Scroll Back To Top Button with RecyclerView
I have an app that displays images using RecyclerView, I want to show a button for the user to return the top when scrolling down我有一个使用 RecyclerView 显示图像的应用程序,我想显示一个按钮,让用户在向下滚动时返回顶部
Something like this:像这样的东西:
so how can I do that?那我该怎么做呢?
fragment_wallpaper.xml 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 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;
}
}
Is using RelativeLayout
a requirement?使用RelativeLayout
是一项要求吗? This seems straightforward with a FrameLayout
or a ConstraintLayout
and a FloatingActionButton
:使用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
has several helper methods and interfaces for scrolling, check the docs for all of them. RecyclerView
有几个用于滚动的辅助方法和接口,请查看所有这些的文档。 The one you're looking for is scrollToPosition您正在寻找的是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
}
You can even have the button only visible after the user scrolls up, and hide it otherwise, with the onScrollListener .您甚至可以使用onScrollListener使按钮仅在用户向上滚动后可见,否则将其隐藏。 The listener fires anytime a scroll change is registered on the view:只要在视图上注册滚动更改,侦听器就会触发:
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)
}
}
}
You can add a FloatingActionButton
into the RelativeLayout
as a sibling to the RecyclerView
, adjust its position to top and center of the parent.您可以将FloatingActionButton
作为RecyclerView
的兄弟添加到RelativeLayout
中,将其 position 调整到父级的顶部和中心。
Then change its backgroundTint
for your gray color (works from API-21), below API-21, it takes the colorAccent
by default.然后将其backgroundTint
更改为您的灰色(从 API-21 开始工作),在 API-21 以下,默认情况下它采用colorAccent
。
Add ic_baseline_arrow_upward_24.xml
from Android assets into the drawable folder, and use it in the FAB's android:src
attribute.将ic_baseline_arrow_upward_24.xml
资源中的 ic_baseline_arrow_upward_24.xml 添加到可绘制文件夹中,并在 FAB 的android:src
To scroll to the top of the RecyclerView
use either scrollToPosition()
or smoothScrollToPosition()
要滚动到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);
}
});
Layout:布局:
<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>
You can control to hide/show the fab button by adding a custom ReyclerView.OnScrollListener
& override onScrolled()
& onScrollStateChanged()
methods您可以通过添加自定义ReyclerView.OnScrollListener
和覆盖onScrolled()
和onScrollStateChanged()
方法来控制隐藏/显示 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
}
}
});
Here's a preview这是一个预览
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.