gallery.gif
这个效果其实就是在上篇的HorizontalLayoutmanager的基础上进行修改
- 可以看到条目的起始位置是从屏幕的一半的地方再减去item宽度的一半的位置开始,而且每个item都是叠在上一个item宽度一般的位置
mStartX = getWidth()/2 - getItemShowWidth();
for (int i = 0; i < getItemCount(); i++) {
Rect rect = new Rect(mStartX + temp, 0, mStartX + temp + mItemWidth, itemHeight);
mSparseArray.put(i, rect);
mBooleanArray.put(i, false);
temp += getItemShowWidth();
}
private int getItemShowWidth() {
return mItemWidth / 2;
}
gallery.gif
- 我们可以看到所有的item都重叠起来了,画廊的效果是中间的item完全显示,而其它地方都只显示了一半,这里我们要重写Recycleview中的方法,来改变item绘制的顺序,我们想要画廊的效果是中间显示其它显示一半,所以我们中间的item最后来绘制,这里介绍下Recycleview中的这个方法
@Override
protected int getChildDrawingOrder(int childCount, int i) {
if (mChildDrawingOrderCallback == null) {
return super.getChildDrawingOrder(childCount, i);
} else {
return mChildDrawingOrderCallback.onGetChildDrawingOrder(childCount, i);
}
}
childCount表示屏幕中可见的item个数,i表示要绘制的条目位置,i越小越先绘制,如下所示:
无标题.png
前三个条目的位置和索引一样不用变,中间的为childCount-1,倒数第二个的绘图顺序是center,倒数第二个的绘图顺序是center+1,倒数第三个的绘图顺序是center+2,所以后三个对应的为center + childCount- 1 - i
public class GalleryRecycleview extends RecyclerView {
public GalleryRecycleview(Context context) {
this(context,null);
}
public GalleryRecycleview(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
setChildrenDrawingOrderEnabled(true);
}
@Override
protected int getChildDrawingOrder(int childCount, int i) {
int center = getlayoutManager().getCenterPos()
- getlayoutManager().getFistvisiblePos(); //计算正在显示的所有Item的中间位置
int order;
if (i == center) {
order = childCount - 1;
} else if (i > center) {
order = center + childCount - 1 - i;
} else {
order = i;
}
return order;
}
在layoutmanager中获取第一个可见item和中间item的位置
public int getCenterPos() {
int pos = (mTotalMoveX / getItemShowWidth());
int more = (mTotalMoveX % getItemShowWidth());
if (more > getItemShowWidth() * 0.5f) pos++;
return pos;
}
public int getFistvisiblePos() {
if(getItemCount()==0){
return 0;
}
return getPosition(getChildAt(0));
}
gallery.gif
可以看到已经是最后才绘制中间的item了
- 接着我们在layoutChild的时候加上动画
private void handleChildView(View child, int moveX) {
float radio = computeScale(moveX);
float rotation = computeRotationY(moveX);
child.setScaleX(radio);
child.setScaleY(radio);
child.setRotationY(rotation);
}
private float computeScale(int x) {
float scale = 1 - Math.abs(x * 1.0f / (6f * getItemShowWidth()));
if (scale < 0) scale = 0;
if (scale > 1) scale = 1;
return scale;
}
/**
* 最大Y轴旋转度数
*/
private float M_MAX_ROTATION_Y = 30.0f;
private float computeRotationY(int x) {
float rotationY;
rotationY = -M_MAX_ROTATION_Y * x / getItemShowWidth();
if (Math.abs(rotationY) > M_MAX_ROTATION_Y) {
if (rotationY > 0) {
rotationY = M_MAX_ROTATION_Y;
} else {
rotationY = -M_MAX_ROTATION_Y;
}
}
return rotationY;
}
就和最上面的效果一样了
源码地址https://github.com/digtal/recycleview-study
本篇内容参考于https://blog.csdn.net/harvic880925/article/details/84979161
