主要细节是,如果要在recycleView在回收的同时,做UI调整容易出现的问题。
一、xml可见的最外层设置为margin,view的回收还有添加的时间点可能不好计算,容易出现卡顿的情况,
二、如果是实用方法smoothScrollBy,第一个view刚好滚出可视区的时候是没有被回收的,技巧就是滚动距离加1
没图没真相,以下是业务需求的效果
gif5新文件.gif
首先想法是通过behavior解决问题,但是后来发现behavior需要好多个,各种相互观察好麻烦,所以想一下可不可以直接使用RecycleView,通过滚动监听改变图片大小实现功能,初步想法是第一个可视view不断变小,第二个可视的view不断变大,如下图
11.png
12.png
13.png
然后再隐藏第一个视图,setVisibility(View.INVISIBLE);不是(GONE),然后在左边RecycleView下面再放一个ImageView显示那个隐藏的view的内容即可
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".MainActivity">
<LinearLayout
android:layout_width="150dp"
android:layout_height="200dp">
<com.xjf.bookshelf.BookImageView
android:padding="5dp"
android:id="@+id/first_book"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@color/colorAccent"/>
</LinearLayout>
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/recycle_view"
android:layout_width="match_parent"
android:layout_height="200dp"/>
</FrameLayout>
滚动的初步想法是这样的通过滚动距离dx,来改变view的大小
@Override
public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
super.onScrolled(recyclerView, dx, dy);
setViewWidth(dx);
}
但是后来发现dx,效果不行,有兴趣的同学自己试一下,所以想了另外一个思路,根据下标为2的view也就是第三本书的位置,修改前面两本书的宽度,所以不需要dx了,这里顺便提一下,书本这个view是重写了ImageView的,把宽高比固定为3:4,所以只需要不断的改变书本的宽度就好了,其中bookWidth 为小书本的原始高度
private void setViewWidth() {
int count = recyclerView.getChildCount();
//获取下标为2的view
View view2 = recyclerView.getChildAt(2);
//获取该view的位置(左上角的坐标),第一本书是第二本书的两倍大
view2left = view2.getLeft();
if (view2left > bookWidth * 3) {
//理论上讲第三本书的左上角坐标不会超过3倍书的大小,因为超过了,他就不是第三本书而是第四本,
// 但是,因为recycleView的回收和新增view的时间延迟上的问题会出现超过的情况,
// 我们又是通过这个距离来改变前两本书的大小,所以这个值最大只能是bookWidth * 3
view2left = bookWidth * 3;
} else if (view2left < bookWidth * 2) {
view2left = bookWidth * 2;
}
boolean isTop = (view2left>bookWidth*2.8);
for (int i = 0; i < count; i++) {
BookImageView imgBook = recyclerView.getChildAt(i).findViewById(R.id.img_book);
//停止滑动的时候第一本书不需要隐藏,否则隐藏第一本,第一本书的宽度是不断变小的,第二本书的宽度是不断变大的,
//根据业务需求,第一本书必须隐藏,这个地方有个坑,如果xml设置为margin而不是padding的话,会影响第一个view的回收,
// 造成需求上应该被隐藏的view下标被加一,变成不隐藏了,
if (view2left%bookWidth==0){
//单第一本书刚好被滚动出去的时候,第二本书变成第一本书,这个时候第一本书是不能被隐藏的,否则点击事件就没了
imgBook.setVisibility(View.VISIBLE);
}else {
//其他情况下第一本书是处于变小的状态的是要隐藏的
imgBook.setVisibility(i == 0 ? View.INVISIBLE : View.VISIBLE);
}
if (i == 0) {
//更新recycleView下面的ImageView的内容
setFirstView(imgBook.getBook(),isTop);
}
LinearLayout.LayoutParams linearParams = (LinearLayout.LayoutParams) imgBook.getLayoutParams();
//定义view的宽度
int width;
//根据view的下标,以及下标为2的view的位置动态修改,下标为0和1的宽度
if (i == 1) {
width = bookWidth * 4 - view2left;
} else if (i == 0) {
width = view2left - bookWidth;
} else {
width = bookWidth;
}
linearParams.width = width;
imgBook.setLayoutParams(linearParams);
}
//滑动过程中第一本书的动画效果,改变margins
LinearLayout.LayoutParams firstBookLinearParams = (LinearLayout.LayoutParams) firstBook.getLayoutParams();
firstBookLinearParams.setMargins((int) ((bookWidth * 3 - view2left)*0.15 ),
(int) ((bookWidth * 3 - view2left) * 0.1 ),
(int) ((bookWidth * 3 - view2left) * 0.15 ),
(int) ((bookWidth * 3 - view2left) * 0.2 ));
firstBook.setLayoutParams(firstBookLinearParams);
}
到这里基本上就实现了滚动效果了,但是业务需求是当手指不在滑动的时候,不允许书本被覆盖的,所以这里就要,监听滚动状态
@Override
public void onScrollStateChanged(@NonNull RecyclerView r, int newState) {
super.onScrollStateChanged(r, newState);
//如果停止滑动的时候第一本书被覆盖则滑动到不被覆盖为止
if (view2left % bookWidth != 0) {
//判断是往左滑动还是往右
if (bookWidth * 2.5 - view2left < 0) {
recyclerView.smoothScrollBy(view2left - bookWidth * 3, 0);
} else {
//故意加1个像素,原因是如果是左滑到某个item置顶,其实第0个view没被回收,有的事件没有被触发
recyclerView.smoothScrollBy(view2left - bookWidth * 2+1, 0);
}
}
}
这个地方必须使用smoothScrollBy,不能是ScrollBy,因为ScrollBy不会回调onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy)这个方法,造成view宽度没有重新设定。
项目地址:https://gitee.com/feng87/BookShelf