姚丽冰 学号：16050120089
转载：
https://juejin.im/entry/5a154b21f265da431d3c53d6
【嵌牛导读】：前几天写了篇《用RecyclerView打造一个轮播图》（以下简称基础版）,看到有读者评论说相比Viewpager，用RecyclerView看起来没什么特别的优势。究其原因，目前只用到了RecyclerView最基础的一部分功能。其实相比Viewpager实现的轮播图，RecyclerView版的最大优势就在于它的灵活多变性，可定制性高。本篇文章将通过利用LayoutManger、SnapHelper等RecyclerView的辅助类来实现一系列更为炫酷的轮播图。
【嵌牛鼻子】：RecyclerView，Viewpager，youtManger，SnapHelper，轮播图
【嵌牛提问】：如何利用LayoutManger、SnapHelper等RecyclerView的辅助类来实现一系列更为炫酷的轮播图。
【嵌牛正文】：
初试：竖直轮播图
基础版中，RecyclerView设置了默认横向的LinearLayoutManager:
LinearLayoutManager indicatorLayoutManager = new LinearLayoutManager(context, LinearLayoutManager.HORIZONTAL, false);
那么我们再来加个属性：
<attr name="orientation" format="enum">
<enum name="horizontal" value="0"/>
<enum name="vertical" value="1" />
</attr>
同时在布局文件中设置app:orientation="vertical",让LinearLayoutManager的布局方向变为竖直（为了保持统一，标示点也设置为同一方向），就是这么简单，一款竖直滑动的无限轮播图就打造完成了！
实战：仿魅族轮播图
之前有篇文章ViewPager系列之 仿魅族应用的广告BannerView,不过这是用ViewPager实现的，那我们就来个RecyclerView版的，而实现重点的就在于自定义LayoutManger（如果不太了解这部分的知识，请先移步学习下(╯︵╰)）。
这次先上成果图，再慢慢分析：
以上的效果仅仅是换了一个LayoutManger和一个itemview（为了显示效果，imageview外面套了cardview）。
首先我们做准备工作，定义几个常量：
private float SCALE_RATE ;当前图片放大比例
private int mOrientation;布局方向（HORIZONTAL or VERTICAL）
private int itemSpace;图片之间的间距
自定layoutmanager第一步当然是实现唯一必须要实现的方法：
@Override
public RecyclerView.LayoutParams generateDefaultLayoutParams() {
return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
ViewGroup.LayoutParams.WRAP_CONTENT);
}
然而并没有什么用，99%的自定义layoutmanager都是这么写的，因为我们没有把view添加到 RecyclerView中。所以接下来就是重写onLayoutChildren()来进行布局，这个方法的作用相当于普通Viewgroup中的onLayout()方法，在RecyclerView滚动，数据改变等情况都会调用此方法来重新布局。
@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
if (state.getItemCount() == 0) {
removeAndRecycleAllViews(recycler);
mOffset = 0;
return;
}//没有Itemitemview,不做处理
ensureLayoutState();
if (getChildCount() == 0) {//没有可见的itemview，初始化需要用到的一些参数
View scrap = recycler.getViewForPosition(0);
measureChildWithMargins(scrap, 0, 0);
mDecoratedMeasurement = mOrientationHelper.getDecoratedMeasurement(scrap);
mDecoratedMeasurementInOther = mOrientationHelper.getDecoratedMeasurementInOther(scrap);
mSpaceMain = (mOrientationHelper.getTotalSpace() - mDecoratedMeasurement) / 2;
mSpaceInOther = (mOrientationHelper.getTotalSpaceInOther() - mDecoratedMeasurementInOther) / 2;
mInterval = setInterval();
setUp();
mLeftItems = (int) Math.abs(minRemoveOffset() / mInterval) + 1;
mRightItems = (int) Math.abs(maxRemoveOffset() / mInterval) + 1;
}
if (mPendingScrollPosition != NO_POSITION) {
mOffset = mReverseLayout ?
mPendingScrollPosition * -mInterval : mPendingScrollPosition * mInterval;
}
//开始布局
detachAndScrapAttachedViews(recycler);
layoutItems(recycler);
}
上面只是做一些初始化工作，接下来是layoutItems方法，就贴一些重要代码：
取当前可见的view进行放置，遍历计算位置
final int currentPos = mReverseLayout ?
-getCurrentPositionOffset() : getCurrentPositionOffset();
int start = currentPos - mLeftItems;
int end = currentPos + mRightItems;
for (int i = start; i < end; i++) {
if (findViewByPosition(adapterPosition) == null) {
final View scrap = recycler.getViewForPosition(adapterPosition);
measureChildWithMargins(scrap, 0, 0);
resetViewProperty(scrap);
final float targetOffset = getProperty(i) - mOffset;
layoutScrap(scrap, targetOffset);
具体的布局方法，主要就是，回收不可见的itemview，遍历可见的itemview进行位置计算并放置：
private void layoutScrap(View scrap, float targetOffset) {
final int left = calItemLeft(scrap, targetOffset);
final int top = calItemTop(scrap, targetOffset);
if (mOrientation == VERTICAL) {
layoutDecorated(scrap, mSpaceInOther + left, mSpaceMain + top,
mSpaceInOther + left + mDecoratedMeasurementInOther, mSpaceMain + top + mDecoratedMeasurement);
} else {
layoutDecorated(scrap, mSpaceMain + left, mSpaceInOther + top,
mSpaceMain + left + mDecoratedMeasurement, mSpaceInOther + top + mDecoratedMeasurementInOther);
}
setItemViewProperty(scrap, targetOffset);
}
//在滚动时根据距离动态缩放itemView（在这里你可以自定义滑动动画，改变 itemView的属性，透明度，大小，角度等等）
private void setItemViewProperty(View itemView, float targetOffset) {
float scale = calculateScale(targetOffset + mSpaceMain);
itemView.setScaleX(scale);
itemView.setScaleY(scale);
}
接下来是处理滚动，让recyclerview可以滚动起来：
@Override
public boolean canScrollHorizontally() {
return mOrientation == HORIZONTAL;
}
@Override
public boolean canScrollVertically() {
return mOrientation == VERTICAL;
}
@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
//位移0、没有子View 当然不移动
if (getChildCount() == 0 || dy == 0) {
return 0;
}
int willScroll = dy;
float realDx = dy / getDistanceRatio();//真正滑动的距离
// 从新布局可见的view
for (int i = 0; i < getChildCount(); i++) {
final View scrap = getChildAt(i);
final float delta = propertyChangeWhenScroll(scrap) - realDx;
layoutScrap(scrap, delta);
}
}
因为在我们在布局和滚动时考虑了横向和竖向的情况，所以设置竖直的无限轮播图也很简单：
new BannerLayoutManager(BannerLayoutManager.VERTICAL, Util.dp2px(10));（方向竖直，图片间距10dp）
总结
看到这，我想大家都能看到用RecyclerView实现无限轮播图的强大的指出了吧：
adapter可以处理无限轮播；layoutmanager可以处理布局和滑动动画；SnapHelper可以让iremview滑动起来像viewpager一样（一般用PagerSnapHelper就行了）。
而上面的所有动画效果仅仅都是通过改动layoutmanager，然后再通过设置不同itemview，就可以做出各种效果。最后感谢以下文章，上面的实现思路大部分来自于他们。
github地址
参考资料
http://blog.csdn.net/zxt0601/article/details/52956504
http://www.jianshu.com/p/7bb7556bbe10
网友评论