RecyclerView一键回到顶部
布局
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.RvScrollListenerActivity">
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recyclerView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- 回到顶部按钮-->
<RelativeLayout
android:id="@+id/rl_top_btn"
android:layout_width="44dp"
android:layout_height="44dp"
android:layout_marginRight="10dp"
android:layout_marginBottom="50dp"
android:background="@drawable/shape_go_top_bg2"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintRight_toRightOf="parent">
<ImageView
android:id="@+id/iv_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:src="@mipmap/icon_top" />
</RelativeLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
设置一键回到顶部按钮的点击事件
mTopBtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
mRecyclerView.scrollToPosition(0); //回到顶部按钮
}
});
设置回到顶部按钮的显示隐藏
方式1：
//滚动监听:设置回到顶部按钮的显示隐藏
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
//0:停止滚动
//1:正在被外部拖拽,一般为用户正在用手指滚动
//2:自动滚动开始
//Log.e("xyh", "onScrollStateChanged: " + newState);
}
//dy:每一次竖直滑动的距离
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//已经滚动的距离，为0时表示已处于顶部。
int offsetY = recyclerView.computeVerticalScrollOffset();
Log.e("xyh", "dx: " + dx + ", dy: " + dy+ ", offsetY: " + offsetY);
float al = ((offsetY) / 600f) * 0xff;
if (al > 20) {
if (mTopBtn.getVisibility() != View.VISIBLE) {
mTopBtn.setVisibility(View.VISIBLE);
}
} else {
if (mTopBtn.getVisibility() != View.GONE) {
mTopBtn.setVisibility(View.GONE);
}
}
}
});
方式2：
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
}
@Override
public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
//获取RecyclerView当前顶部显示的第一个条目对应的索引
int position = manager.findFirstVisibleItemPosition();
//根据索引来获取对应的itemView
View firstVisiableChildView = manager.findViewByPosition(position);
//获取当前显示条目的高度
int itemHeight = firstVisiableChildView.getHeight();
//获取当前Recyclerview 偏移量
int flag = (position) * itemHeight - firstVisiableChildView.getTop();
//注意事项：recyclerView不要设置padding
if (flag == 0)
mTopBtn.setVisibility(View.GONE);
else
mTopBtn.setVisibility(View.VISIBLE);
}
});
方式3：
//设置RecyclerView滑动监听器 addOnScrollListener()
mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
super.onScrollStateChanged(recyclerView, newState);
//获得recyclerView的线性布局管理器
LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager();
//获取到第一个item的显示的下标 不等于0表示第一个item处于不可见状态 说明列表没有滑动到顶部 显示回到顶部按钮
int firstVisibleItemPosition = manager.findFirstVisibleItemPosition();
// 当不滚动时，也就是停止滑动的情况下
if (newState == RecyclerView.SCROLL_STATE_IDLE) {
// 判断是否滚动超过一屏
if (firstVisibleItemPosition == 0) {
//如果没有超过一屏，隐藏图标
ivTop.setVisibility(View.GONE);
} else {
//相反如果超过了一屏幕则显示回到顶部按钮
ivTop.setVisibility(View.VISIBLE);
}
//获取RecyclerView滑动时候的状态
} else if (newState == RecyclerView.SCROLL_STATE_DRAGGING) {
//如果Recyclerview是拖动中的状态隐藏按钮
ivTop.setVisibility(View.GONE);
}
}
});
Recyclerview水平滑动指示器
image.png
首页思路很清晰：
1、横向滑动recyclerView： 内容长度w1 大于recyclerView的视图长度w2（这里就是屏幕宽度），两者差值就是在屏幕外的长度。
2、位置指示器： 固定的灰色背景 理解为 对应 recyclerView 内容长度w1，可滑动的 橙色指示器 对应recyclerView的视图长度w2
3、所以，固定的灰色背景宽- 橙色指示器宽，就对应w1-w2
4、所以，计算出比例关系，当recyclerView横向滑动了X，指示器就滑动 X*比例，即可。
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/rv_channel"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center" />
<RelativeLayout
android:id="@+id/indicatorLayout_channel"
android:layout_width="@dimen/dp_40"
android:layout_height="@dimen/dp_4"
android:layout_gravity="center_horizontal"
android:layout_marginBottom="@dimen/dp_12"
android:background="@drawable/shape_view_nomal">
<View
android:id="@+id/indicatorView_channel"
android:layout_width="@dimen/dp_20"
android:layout_height="@dimen/dp_4"
android:background="@drawable/shape_view_red" />
</RelativeLayout>
mRvChannel.addOnScrollListener(new RecyclerView.OnScrollListener() {
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
setIndicator(recyclerView, mChannelIndicatorLayout, mChannelIndicatorView);
}
});
private void setIndicator(RecyclerView recyclerView, RelativeLayout indicatorLayout, View indicatorView) {
float proportion = getProportion(recyclerView);
int layoutWidth = indicatorLayout.getWidth();
int indicatorViewWidth = indicatorView.getWidth();
//可滑动的距离
int scrollableDistance = layoutWidth - indicatorViewWidth;
//设置滚动条移动
indicatorView.setTranslationX(scrollableDistance * proportion);
}
private float getProportion(@NonNull RecyclerView recyclerView) {
//当前RcyclerView显示区域的宽度。水平列表屏幕从左侧到右侧显示范围
int extent = recyclerView.computeHorizontalScrollExtent();
//整体的宽度，注意是整体，包括在显示区域之外的。
int range = recyclerView.computeHorizontalScrollRange();
//已经滚动的距离，为0时表示已处于顶部。
int offset = recyclerView.computeHorizontalScrollOffset();
//计算出溢出部分的宽度，即屏幕外剩下的宽度
float maxEndX = range - extent;
//计算比例
return offset / maxEndX;
}
