改造LayoutManager实现不一样的列表效果
1.前言
我们都知道，对于RecyclerView而言，android自带的有三种类型的LayoutManager，分别是LinearLayoutManagr（线性布局器），GridLayoutManager（网格布局器）和StaggeredGridLayoutManager（瀑布流布局器）。然而在实际的开发过程中，这三种往往不能够满足实际效果的需要，那么就需要开发者自己去打造自己的LayoutManager。网上找了很多篇的博客和文章，自己研究并实现了下如下的效果，在这里分享给大家。
demo.gif
2.RecyclerView机制
要想打造属于自己的LayoutManager，首先得了解下RecyclerView的机制是什么样的。关于RecyclerView的机制是什么样的以及最基础的LayoutManager的改造方法，大家可以看csdn地址http://blog.csdn.net/huachao1001/article/details/51594004 这篇文章。这篇是我看的文章里面描述最详细的。我在这边主要讲述如何实现上述的效果
3.效果的分析
从上面的列表效果可以看出，RecyclerView支持的是左右进行滑动，滑动方式是沿着一条曲线进行，并且在经过中心位置的时候item有个放大缩小的效果。那么从列表的布局来看，我们可以将其排布在一个圆形弧线上，中心位置的角度为0度，左侧递减，右侧递增，那么每个item的位置就在对应的角度上。然后在经过0度区域时（可以是-30--30或者其他），对item进行放大缩小操作，可以使用 view.setScaleX()和 view.setScaleY(scale)方法。
4.效果的实现
4.1 开始自定义LayoutManager
首先将我们自己的CustomLayoutManager继承RecyclerView.LayoutManager，实现抽象类RecyclerView.LayoutManager里面的抽象方法generateDefaultLayoutParams()，实现如下
@Overridepublic RecyclerView.LayoutParams generateDefaultLayoutParams() {
return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}
当然光重写上述的方法并没有什么效果，我们还要重写LayoutManager
的onLayoutChildren()方法，这个方法从名称就可以看出来是对子view的一个布局，要实现上面的图片效果，自然需要对应的代码支持
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
//如果没有item，直接返回
//跳过preLayout，preLayout主要用于支持动画
if (getItemCount() <= 0 || state.isPreLayout()) {
offsetRotate = 0;
return;
}
//得到子view的宽和高，这边的item的宽高都是一样的，所以只需要进行一次测量
View scrap = recycler.getViewForPosition(0);
addView(scrap);
measureChildWithMargins(scrap, 0, 0);
//计算测量布局的宽高
mDecoratedChildWidth = getDecoratedMeasuredWidth(scrap);
mDecoratedChildHeight = getDecoratedMeasuredHeight(scrap);
//确定起始位置，在最上方的中心处
startLeft = (getHorizontalSpace() - mDecoratedChildWidth) / 2;
startTop = 0;
//记录每个item旋转的角度
float rotate = firstChildRotate;
for (int i = 0; i < getItemCount(); i++) {
itemsRotate.put(i, rotate);
itemAttached.put(i, false);
rotate += intervalAngle;
}
//在布局之前，将所有的子View先Detach掉，放入到Scrap缓存中
detachAndScrapAttachedViews(recycler);
fixRotateOffset();
layoutItems(recycler, state);
}
从上面的代码可以看出，因为在这里每个item的大小都是一致的，所以我们只需要测量一次得到item的宽高之后的item就可以直接使用。然后还需要确定最中心的item的位置，这里是startLeft和startTop。然后对每个item进行角度的保存和处理，如下
/**
* 默认每个item之间的角度
**/
private static float INTERVAL_ANGLE = 30f;
/**
* 第一个的角度是为0
**/
private int firstChildRotate = 0;
/**
* 第一个的角度是为0
**/
private int firstChildRotate = 0;
//最大和最小的移除角度
private int minRemoveDegree;
private int maxRemoveDegree;
//记录Item是否出现过屏幕且还没有回收。true表示出现过屏幕上，并且还没被回收
private SparseBooleanArray itemAttached = new SparseBooleanArray();
//保存所有的Item的上下左右的偏移量信息
private SparseArray<Float> itemsRotate = new SparseArray<>();
/**
* 设置滚动时候的角度
**/
private void fixRotateOffset() {
if (offsetRotate < 0) {
offsetRotate = 0;
}
if (offsetRotate > getMaxOffsetDegree()) {
offsetRotate = getMaxOffsetDegree();
}
}
上述代码的作用是对每个item位置的一个记录和item是否显示的一个记录，offsetRotate 保存当前item布局的一个角度总量，将其限制在一个范围之内。在范围内的item用于显示，之外的进行回收。下面来看layoutItems()方法，该方法是对item的一个回收和显示。
/**
* 进行view的回收和显示
**/
private void layoutItems(RecyclerView.Recycler recycler, RecyclerView.State state) {
layoutItems(recycler, state, SCROLL_RIGHT);
}
/**
* 进行view的回收和显示的具体实现
**/
private void layoutItems(RecyclerView.Recycler recycler,
RecyclerView.State state, int oritention) {
if (state.isPreLayout()) return;
//移除界面之外的view
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
int position = getPosition(view);
if (itemsRotate.get(position) - offsetRotate > maxRemoveDegree
|| itemsRotate.get(position) - offsetRotate < minRemoveDegree) {
itemAttached.put(position, false);
removeAndRecycleView(view, recycler);
}
}
//将要显示的view进行显示出来
for (int i = 0; i < getItemCount(); i++) {
if (itemsRotate.get(i) - offsetRotate <= maxRemoveDegree
&& itemsRotate.get(i) - offsetRotate >= minRemoveDegree) {
if (!itemAttached.get(i)) {
View scrap = recycler.getViewForPosition(i);
measureChildWithMargins(scrap, 0, 0);
if (oritention == SCROLL_LEFT)
addView(scrap, 0);
else
addView(scrap);
float rotate = itemsRotate.get(i) - offsetRotate;
int left = calLeftPosition(rotate);
int top = calTopPosition(rotate);
scrap.setRotation(rotate);
layoutDecorated(scrap, startLeft + left, startTop + top,
startLeft + left + mDecoratedChildWidth, startTop + top + mDecoratedChildHeight);
itemAttached.put(i, true);
//计算角度然后进行放大
float scale = calculateScale(rotate);
scrap.setScaleX(scale);
scrap.setScaleY(scale);
}
}
}
}
首先对于角度在范围之外的item进行remove掉，对于范围之内的item，通过layoutDecorated()方法进行显示，根据左滑还是右滑，判断item显示的位置。同时根据当前item的角度位置，判断当前item是否需要进行放大或者缩小，计算方法如下。
/**
* 最大放大倍数
**/
private static final float SCALE_RATE = 1.4f;
//放大的倍数
private float maxScale;
//在什么角度变化之内
private float minScaleRotate = 40;
/**
* 默认每个item之间的角度
**/
private static float INTERVAL_ANGLE = 30f;
/**
* 默认的半径长度
**/
private static final int DEFAULT_RADIO = 100;
/**
* 半径默认为100
**/
private int mRadius;
/**
* 根据角度计算大小，0度的时候最大，minScaleRotate度的时候最小，然后其他时候变小
**/
private float calculateScale(float rotate) {
rotate = Math.abs(rotate) > minScaleRotate ? minScaleRotate : Math.abs(rotate);
return (1 - rotate / minScaleRotate) * (maxScale - 1) + 1;
}
/**
* 当前item的x的坐标
**/
private int calLeftPosition(float rotate) {
return (int) (mRadius * Math.cos(Math.toRadians(90 - rotate)));
}
/**
* 当前item的y的坐标
**/
private int calTopPosition(float rotate) {
return (int) (mRadius * Math.sin(Math.toRadians(90 - rotate)));
}
经过以上的步骤，该RecyclerView已经能够进行列表显示了，但是还不能够进行滑动。
4.2 LayoutManager实现滑动
LayoutManager中还有canScrollHorizontally()和canScrollVertically()分别代表是否可以进行横向和纵向的滑动。
同时还有scrollHorizontallyBy和scrollVerticallyBy方法来实现对应的逻辑。这边我们需要的是进行横向的滑动，那么实现方法如下
@Override
public boolean canScrollHorizontally() {
return true;
}
@Override
public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
int willScroll = dx;
//每个item x方向上的移动距离
float theta = dx / DISTANCE_RATIO;
float targetRotate = offsetRotate + theta;
//目标角度
if (targetRotate < 0) {
willScroll = (int) (-offsetRotate * DISTANCE_RATIO);
} else if (targetRotate > getMaxOffsetDegree()) {
willScroll = (int) ((getMaxOffsetDegree() - offsetRotate) * DISTANCE_RATIO);
}
theta = willScroll / DISTANCE_RATIO;
//当前移动的总角度
offsetRotate += theta;
//重新设置每个item的x和y的坐标
for (int i = 0; i < getChildCount(); i++) {
View view = getChildAt(i);
float newRotate = view.getRotation() - theta;
int offsetX = calLeftPosition(newRotate);
int offsetY = calTopPosition(newRotate);
layoutDecorated(view, startLeft + offsetX, startTop + offsetY,
startLeft + offsetX + mDecoratedChildWidth, startTop + offsetY + mDecoratedChildHeight);
view.setRotation(newRotate);
//计算角度然后进行放大
float scale = calculateScale(newRotate);
view.setScaleX(scale);
view.setScaleY(scale);
}
//根据dx的大小判断是左滑还是右滑
if (dx < 0)
layoutItems(recycler, state, SCROLL_LEFT);
else
layoutItems(recycler, state, SCROLL_RIGHT);
return willScroll;
}
可以看出来scrollHorizontallyBy()里面的操作类似与layoutItem()方法中的操作，只不过在这里需要对横向滚动量dx进行角度的装换，这边给的比例为DISTANCE_RATIO，然后需要对offsetRotate进行累加操作，最后调用layoutItems进行item的view的回收和显示。经过以上的操作，RecyclerView就可以进行列表的展示和滑动了。
4.3 RecyclerView的自行滚动到某一项
需要注意的是，由于我们已经修改了LayoutManager的滚动规则。
/**
* Convenience method to scroll to a certain position.
*
* RecyclerView does not implement scrolling logic, rather forwards the call to
* {@link android.support.v7.widget.RecyclerView.LayoutManager#scrollToPosition(int)}
* @param position Scroll to this adapter position
* @see android.support.v7.widget.RecyclerView.LayoutManager#scrollToPosition(int)
*/
public void scrollToPosition(int position) {
if (mLayoutFrozen) {
return;
}
stopScroll();
if (mLayout == null) {
Log.e(TAG, "Cannot scroll to position a LayoutManager set. " +
"Call setLayoutManager with a non-null argument.");
return;
}
mLayout.scrollToPosition(position);
awakenScrollBars();
}
/**
* Starts a smooth scroll to an adapter position.
* <p>
* To support smooth scrolling, you must override
* {@link LayoutManager#smoothScrollToPosition(RecyclerView, State, int)} and create a
* {@link SmoothScroller}.
* <p>
* {@link LayoutManager} is responsible for creating the actual scroll action. If you want to
* provide a custom smooth scroll logic, override
* {@link LayoutManager#smoothScrollToPosition(RecyclerView, State, int)} in your
* LayoutManager.
*
* @param position The adapter position to scroll to
* @see LayoutManager#smoothScrollToPosition(RecyclerView, State, int)
*/
public void smoothScrollToPosition(int position) {
if (mLayoutFrozen) {
return;
}
if (mLayout == null) {
Log.e(TAG, "Cannot smooth scroll without a LayoutManager set. " +
"Call setLayoutManager with a non-null argument.");
return;
}
mLayout.smoothScrollToPosition(this, mState, position);
}
而从源码中可以看出来RecyclerView的scrollToPosition()（滚动到某一项），
smoothScrollToPosition()（平滑滚动到某一项）其实是调用的layoutManager中对于的方法，所以我们必须重写我们自己的layoutManager的对于的方法，实现自己的滚动规则。
private PointF computeScrollVectorForPosition(int targetPosition) {
if (getChildCount() == 0) {
return null;
}
final int firstChildPos = getPosition(getChildAt(0));
final int direction = targetPosition < firstChildPos ? -1 : 1;
return new PointF(direction, 0);
}
@Override
public void scrollToPosition(int position) {//移动到某一项
if (position < 0 || position > getItemCount() - 1) return;
float targetRotate = position * intervalAngle;
if (targetRotate == offsetRotate) return;
offsetRotate = targetRotate;
fixRotateOffset();
requestLayout();
}
@Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state, int position) {//平滑的移动到某一项
LinearSmoothScroller smoothScroller = new LinearSmoothScroller(recyclerView.getContext()) {
@Override
public PointF computeScrollVectorForPosition(int targetPosition) {
return CustomLayoutManager.this.computeScrollVectorForPosition(targetPosition);
}
};
smoothScroller.setTargetPosition(position);
startSmoothScroll(smoothScroller);
}
在scrollToPosition中，我们需要根据position获取对应的item在最开始布局时候的角度，赋值给offsetRotate ，让其进行重新布局即可以实现效果。而在smoothScrollToPosition()中，参考LinearLayoumanager中对应的方法。
@Override
public void smoothScrollToPosition(RecyclerView recyclerView, RecyclerView.State state,
int position) {
LinearSmoothScroller linearSmoothScroller =
new LinearSmoothScroller(recyclerView.getContext());
linearSmoothScroller.setTargetPosition(position);
startSmoothScroll(linearSmoothScroller);
}
@Override
public PointF computeScrollVectorForPosition(int targetPosition) {
if (getChildCount() == 0) {
return null;
}
final int firstChildPos = getPosition(getChildAt(0));
final int direction = targetPosition < firstChildPos != mShouldReverseLayout ? -1 : 1;
if (mOrientation == HORIZONTAL) {
return new PointF(direction, 0);
} else {
return new PointF(0, direction);
}
}
从computeScrollVectorForPosition可以知道，对于我们自己的LayoutManager而言
从前面的item滚动到后面的是new PointF(-1, 0);相反的就是new PointF(1, 0);最后我们重写onAdapterChanged()方法，当adapter发生变化的时候，让我们自己的layoutmanager回归原始的状态。
@Override
public void onAdapterChanged(RecyclerView.Adapter oldAdapter, RecyclerView.Adapter newAdapter) {//adapter进行改变的时候
removeAllViews();
offsetRotate = 0;
}
5.最后
只要了解了RecyclerView的机制和RecyclerView.LayoutManager中需要实现的方法和步奏，那么对于我们自己来说，打造自己的LayoutManager并不是一件很难的事情。我在实现的过程中，主要参考了
csdn huachao1001的文章http://blog.csdn.net/huachao1001/article/details/51594004 和
简书Dajavu的文章http://www.jianshu.com/p/7bb7556bbe10 ，最终实现上面的效果，
最后奉上Github上代码下载地址https://github.com/hzl123456/CustomLayoutManager
