自定义控件三部曲视图篇（九）——RecycerView系列之六实现滚动画廊控件
把握生命里的每一分钟，全力以赴我们心中的梦，不经历风雨，怎么见彩虹，没有人能随随便便成功 -----《真心英雄》
系列文章： Android自定义控件三部曲文章索引: http://blog.****.net/harvic880925/article/details/50995268
本节是我的新书《Android自定义控件高级进阶与精彩实例》中的一小节，目前还在著作中，预计2020年上市，本来没打算更出来，可有些同学评论非常需要这个效果，就摘取出来分享给大家，前面的章节序号我就不改了……（我太懒）
在上一章中，我们讲了RecyclerView的各种基础知识，在这章中，我们将通过非常炫酷的特效来实际学习下RecyclerView。可以看到，通过这些看似平淡的功能，能做出非常漂亮的控件，现在我们就开始吧。
5.1 滚动画廊控件
本节将实现在上一章中提到过的画廊效果，但为了减轻难度，就不再制作3D画廊，而是制作出2D的，不过最后将在2D的基础上，讲解3D画廊的实现原理，本节实现的效果如下图所示：
高能预警：本节代码量较大，而且是利用4.5节代码修改而来,对于同一个函数因为逻辑实现次序的问题，可能会多次修改，而且由于篇幅有限，并不能每次贴出全部源码，只能截取核心部分，所以建议大家对照着源码看本节文章，不然半路有可能会蒙……。
5.1.1 实现Item布局
这节内容，我们实现原理与4.5节基本相同，所以很多代码，大家理解起来应该都不难，有些部分就不再细讲。在这部分，我们先在4.5节代码的基础上做修改，以便很快可以看到效果。首先，我们先把4.5节中的item布局更改为我们想要的布局(item_coverflow.xml)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
android:id="@+id/text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAlignment="center"
android:text="0"
android:layout_gravity="center"
android:textColor="@android:color/black"/>
<ImageView
android:id="@+id/img"
android:layout_marginTop="10dp"
android:layout_width="300dp"
android:layout_height="200dp"
android:scaleType="centerCrop"/>
</LinearLayout>
布局很好理解，就是垂直排列一个text和一个img。text用于显示当前item的位置，img用于显示图片。
所以，我们还需要引用几个图片资源，源码中放在mipmap-xxhdpi文件夹下：
然后，我们新建一个Adapter(CoverFlowAdapter):
public class CoverFlowAdapter extends Adapter<ViewHolder> {
private Context mContext;
private ArrayList<String> mDatas;
private int mCreatedHolder=0;
private int[] mPics = {R.mipmap.item1,R.mipmap.item2,R.mipmap.item3,R.mipmap.item4,
R.mipmap.item5,R.mipmap.item6};
public CoverFlowAdapter(Context context, ArrayList<String> datas) {
mContext = context;
mDatas = datas;
}
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
mCreatedHolder++;
LayoutInflater inflater = LayoutInflater.from(mContext);
return new NormalHolder(inflater.inflate(R.layout.item_coverflow, parent, false));
}
@Override
public void onBindViewHolder(ViewHolder holder, int position) {
NormalHolder normalHolder = (NormalHolder) holder;
normalHolder.mTV.setText(mDatas.get(position));
normalHolder.mImg.setImageDrawable(mContext.getResources().getDrawable(mPics[position%mPics.length]));
}
@Override
public int getItemCount() {
return mDatas.size();
}
public class NormalHolder extends ViewHolder {
public TextView mTV;
public ImageView mImg;
public NormalHolder(View itemView) {
super(itemView);
mTV = (TextView) itemView.findViewById(R.id.text);
mTV.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, mTV.getText(), Toast.LENGTH_SHORT).show();
}
});
mImg = (ImageView)itemView.findViewById(R.id.img);
mImg.setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(mContext, mTV.getText(), Toast.LENGTH_SHORT).show();
}
});
}
}
}
代码理解起来应该难度不大，首先，我们新建一个NormalHolder，来保存布局中的控件所对应的变量。然后在onCreateViewHolder中返回新建的NormalHolder对象，最后通过onBindViewHolder将NormalHolder与数据绑定起来。
此时运行代码，可以看到效果如下图所示：
因为我们在4.5节中，给每个item在滚动时，都设置了setRotationY，所以我们在滚动时，每个item都还会旋转。我们这节中并不需要让item旋转，所以我们在自定义的LayoutManager中删除child.setRotationY(child.getRotationY() + 1);代码。
修改后的效果如下图所示：
5.1.2 实现横向布局
5.1.2.1 开启横向滚动
现在还是4.5节中所实现的竖向滚动，现在我们要把它改为横向滚动。首先，我们需要删除canScrollVertically()和scrollVerticallyBy函数，改为：
@Override
public boolean canScrollHorizontally() {
return true;
}
@Override
public int scrollHorizontallyBy(int dx, Recycler recycler, State state) {
…………
}
在将scrollVerticallyBy改为scrollHorizontallyBy以后，需要把原来在scrollVerticallyBy中的代码移到scrollHorizontallyBy中来。
很明显，现在运行的话，虽然可以成功运行，但依然是竖向布局。当然是因为我们在onLayoutChildren中，在布局时，并没有将每个item横向布局的原因。
5.1.2.2 实现横向布局
最关键的问题，就是我们在初始化时，会利用mItemRects来保存所有item的位置，所以在计算每个item位置时，改为横向布局的方式来计算即可：
int offsetX = 0;
for (int i = 0; i < getItemCount(); i++) {
Rect rect = new Rect(offsetX, 0, offsetX + mItemWidth, mItemHeight);
mItemRects.put(i, rect);
mHasAttachedItems.put(i, false);
offsetX += mItemWidth;
}
然后在获取visibleCount时，需要修改为：
int visibleCount = getHorizontalSpace() / mItemWidth;
同时，在onLayoutChildren最后，有个计算mTotalHeight的逻辑，我们需要改为计算totalWidth的逻辑：
@Override
public void onLayoutChildren(Recycler recycler, RecyclerView.State state) {
…………
mTotalWidth = Math.max(offsetX, getHorizontalSpace());
}
private int getHorizontalSpace() {
return getWidth() - getPaddingLeft() - getPaddingRight();
}
在这段代码中，我们让所有item都靠顶部横向依次排列，难度不大，不再细讲。
同时，在getVisibleArea函数也需要修改，因为我们现在已经是横向滚动了，已经不再是竖向滚动了，所以可见区域应该是横向滚动后的可见区域：
private Rect getVisibleArea() {
Rect result = new Rect(getPaddingLeft() + mSumDx, getPaddingTop(), getWidth() - getPaddingRight() + mSumDx, getHeight()-getPaddingBottom());
return result;
}
onLayoutChildren函数中的其它代码不需要更改，此时onLayoutChildren的代码如下：
public void onLayoutChildren(Recycler recycler, RecyclerView.State state) {
if (getItemCount() == 0) {//没有Item，界面空着吧
detachAndScrapAttachedViews(recycler);
return;
}
mHasAttachedItems.clear();
mItemRects.clear();
detachAndScrapAttachedViews(recycler);
//将item的位置存储起来
View childView = recycler.getViewForPosition(0);
measureChildWithMargins(childView, 0, 0);
mItemWidth = getDecoratedMeasuredWidth(childView);
mItemHeight = getDecoratedMeasuredHeight(childView);
int visibleCount = getVerticalSpace() / mItemWidth;
//定义水平方向的偏移量
int offsetX = 0;
for (int i = 0; i < getItemCount(); i++) {
Rect rect = new Rect(offsetX, 0, offsetX + mItemWidth, mItemHeight);
mItemRects.put(i, rect);
mHasAttachedItems.put(i, false);
offsetX += mItemWidth;
}
Rect visibleRect = getVisibleArea();
for (int i = 0; i < visibleCount; i++) {
insertView(i, visibleRect, recycler, false);
}
//如果所有子View的宽度和没有填满RecyclerView的宽度，
// 则将宽度设置为RecyclerView的宽度
mTotalWidth = Math.max(offsetX, getHorizontalSpace());
}
private int getHorizontalSpace() {
return getWidth() - getPaddingLeft() - getPaddingRight();
}
private Rect getVisibleArea() {
Rect result = new Rect(getPaddingLeft() + mSumDx, getPaddingTop(), getWidth() - getPaddingRight() + mSumDx, getHeight()-getPaddingBottom());
return result;
}
同时，我们需要该View所在的Activity改为横向展示：
<activity android:name=".CoverFlowActivity"
android:screenOrientation="landscape"/>
修改后的效果如下图所示：
很明显，现在在初始化时，已经可以实现横向布局了，但如果你一滚动就出现异常了，这是很正常的，毕竟我们还没有处理滚动事件。
5.1.3 实现横向滚动
横向滚动是放在scrollHorizontallyBy中处理，其中滑动顶部判断，越界处理这些都是相同的，只是在布局item时，需要重新写。
滚动时布局item涉及到两个地方：
第一：在回收越界时，对于已经在屏幕上显示的item，重新layout时：
//回收越界子View
for (int i = getChildCount() - 1; i >= 0; i--) {
View child = getChildAt(i);
int position = getPosition(child);
Rect rect = mItemRects.get(position);
if (!Rect.intersects(rect, visibleRect)) {
removeAndRecycleView(child, recycler);
mHasAttachedItems.put(position, false);
} else {
layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);
mHasAttachedItems.put(position, true);
}
}
这里只需要修改layoutDecoratedWithMargins函数即可，在布局时，根据mSumDx布局item的left和right坐标：layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);,因为是横向布局，所以top和bottom都不变。
第二：在新移动出来的空白区域填充item时，同样涉及layout操作，同样需要处理：
private void insertView(int pos, Rect visibleRect, Recycler recycler, boolean firstPos) {
Rect rect = mItemRects.get(pos);
if (Rect.intersects(visibleRect, rect) && !mHasAttachedItems.get(pos)) {
View child = recycler.getViewForPosition(pos);
if (firstPos) {
addView(child, 0);
} else {
addView(child);
}
measureChildWithMargins(child, 0, 0);
layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);
mHasAttachedItems.put(pos, true);
}
}
到这里，完整的横向滚动效果就实现出来了，效果如下图所示：
scrollHorizontallyBy完整的代码如下：
public int scrollHorizontallyBy(int dx, Recycler recycler, State state) {
if (getChildCount() <= 0) {
return dx;
}
int travel = dx;
//如果滑动到最顶部
if (mSumDx + dx < 0) {
travel = -mSumDx;
} else if (mSumDx + dx > mTotalWidth - getHorizontalSpace()) {
//如果滑动到最底部
travel = mTotalWidth - getHorizontalSpace() - mSumDx;
}
mSumDx += travel;
Rect visibleRect = getVisibleArea();
//回收越界子View
for (int i = getChildCount() - 1; i >= 0; i--) {
View child = getChildAt(i);
int position = getPosition(child);
Rect rect = mItemRects.get(position);
if (!Rect.intersects(rect, visibleRect)) {
removeAndRecycleView(child, recycler);
mHasAttachedItems.put(position, false);
} else {
layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);
mHasAttachedItems.put(position, true);
}
}
//填充空白区域
View lastView = getChildAt(getChildCount() - 1);
View firstView = getChildAt(0);
if (travel >= 0) {
int minPos = getPosition(firstView);
for (int i = minPos; i < getItemCount(); i++) {
insertView(i, visibleRect, recycler, false);
}
} else {
int maxPos = getPosition(lastView);
for (int i = maxPos; i >= 0; i--) {
insertView(i, visibleRect, recycler, true);
}
}
return travel;
}
private void insertView(int pos, Rect visibleRect, Recycler recycler, boolean firstPos) {
Rect rect = mItemRects.get(pos);
if (Rect.intersects(visibleRect, rect) && !mHasAttachedItems.get(pos)) {
View child = recycler.getViewForPosition(pos);
if (firstPos) {
addView(child, 0);
} else {
addView(child);
}
measureChildWithMargins(child, 0, 0);
layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);
mHasAttachedItems.put(pos, true);
}
}
由于篇幅有限，后面onLayoutChildren和scrollHorizontallyBy的代码仅讲解修改部分，不再重新列出所有源码，仅列出这一次。
5.1.4 实现卡片叠加
从最终的效果图中可以看出，我们两个卡片之间并不是并排排列的，而是叠加在一起的。在这个例子中，两个卡片之间叠加的部分是半个卡片的大小。所以，我们需要修改排列卡片的代码，使卡片叠加起来。
首先，申请一个变量，保存两个卡片之间的距离：
private int mIntervalWidth;
private int getIntervalWidth() {
return mItemWidth / 2;
}
其中getIntervalWidth()函数用于向mIntervalWidth变量赋值。
然后在onLayoutChildren中，首先给mIntervalWidth初始化，然后在计算每个卡片的起始位置时，offsetX每次位移距离，改为offsetX += mIntervalWidth,具体代码如下：
mIntervalWidth = getIntervalWidth();
//定义水平方向的偏移量
int offsetX = 0;
for (int i = 0; i < getItemCount(); i++) {
Rect rect = new Rect(offsetX, 0, offsetX + mItemWidth, mItemHeight);
mItemRects.put(i, rect);
mHasAttachedItems.put(i, false);
offsetX += mIntervalWidth;
}
这里需要注意的是，在计算每个卡片的位置时Rect(offsetX, 0, offsetX + mItemWidth, mItemHeight)，在这个Rect的right位置，不能改为offsetX + mIntervalWidth，因为我们只是更改了卡片布局时的起始位置，并没有更改卡片的大小，所以每个卡片的长度和宽度是不能变的。
然后在初始化时插入item时，在计算visibleCount时，需要改为int visibleCount = getHorizontalSpace() / mIntervalWidth，代码如下：
int visibleCount = getHorizontalSpace() / mIntervalWidth;
Rect visibleRect = getVisibleArea();
for (int i = 0; i < visibleCount; i++) {
insertView(i, visibleRect, recycler, false);
}
因为在scrollHorizontallyBy中处理滚动时，每个卡片的位置都是直接从mItemRects中取的，所以，我们并不需要在修改滚动时的代码。
到这里，就实现了卡片叠加的功能，效果如下图所示：
5.1.5 修改卡片起始位置
到现在，我们卡片都还是在最左侧开始展示的，但在开篇的效果图中可以看出，在初始化时，第一个item是在最屏幕中间显示的，这是怎么做到的呢？
首先，我们需要先申请一个变量mStartX，来保存卡片后移的距离。
很明显，这里也只是改变每个卡片的布局位置，所以我们也只需要在onLayoutChildren中，在mItemRects中初始化每个item位置时，将每个item后移mStartX就可以了。
所以核心代码如下：
private int mStartX;
public void onLayoutChildren(Recycler recycler, RecyclerView.State state) {
…………
mStartX = getWidth()/2 - mIntervalWidth;
//定义水平方向的偏移量
int offsetX = 0;
for (int i = 0; i < getItemCount(); i++) {
Rect rect = new Rect(mStartX + offsetX, 0, mStartX + offsetX + mItemWidth, mItemHeight);
mItemRects.put(i, rect);
mHasAttachedItems.put(i, false);
offsetX += mIntervalWidth;
}
…………
}
首先，是mStartX的初始化，因为我们需要第一个卡片的中间位置在屏幕正中间的位置,从下图中明显可以看出，mStartX的值应该是:mStartX = getWidth()/2 - mIntervalWidth;
然后，在计算每个item的rect时，将每个item后移mStartX距离：new Rect(mStartX + offsetX, 0, mStartX + offsetX + mItemWidth, mItemHeight)
就这样，我们就完成了移动初始化位置的功能，效果如下图所示：
5.1.6 更改默认显示顺序
5.1.6.1 更改默认显示顺序的原理
现在，我们每个item的显示顺序还是后一个卡片压在前一个卡片上显示的，这是因为，在RecyclerView绘制时，先绘制的第一个item，然后再绘制第二个item，然后再绘制第三个item，……,默认就是这样的绘制顺序。即越往前的item越优先绘制。绘制原理示图如下：
这里显示的三个item绘制次序，很明显，正是由于后面的item把前面的item叠加部分盖住了，才造成了现在的每个item只显示出一半的情况。
那如果我们更改下显示顺序，将两边的先绘制，将屏幕中间的Item（当前选中的item）最后绘制，就会成为这个情况：
形成的效果就是本节开篇的效果（这个效果中还有缩放，在下小节中讲解）：
那关键的部分来：要怎么更改Item的绘制顺序呢？
其实，只需要重写RecyclerView的getChildDrawingOrder方法即可。
该方法的详细声明如下：
protected int getChildDrawingOrder(int childCount, int i)
- childCount:表示当前屏幕上可见的item的个数
- i:表示item的索引，一般而言，i的值就是在list中可见item的顺序，通过getChildAt(i)即可得到当前item的视图。
- return int:返回值表示当前item的绘制顺序，返回值越小，越先绘制，返回值越大，越最后绘制。很显然，要实现我们开篇的效果，中间item的返回值应该是最大的，才能让它最后绘制，以显示在最上面。
需要注意的是，默认情况下，即便重写getChildDrawingOrder函数，代码也不会执行到getChildDrawingOrder里面的，我们需要在RecyclerView初始化时，显式调用setChildrenDrawingOrderEnabled(true);开启重新排序。
所以开启重新排序，总共需要有两步：
1.调用setChildrenDrawingOrderEnabled(true);开启重新排序
2.在getChildDrawingOrder中重新返回每个item的绘制顺序
5.1.6.2 重写RecyclerView
因为我们要重写getChildDrawingOrder，所以我们必须重写RecylcerView：
public class RecyclerCoverFlowView extends RecyclerView {
public RecyclerCoverFlowView(Context context) {
super(context);
init();
}
public RecyclerCoverFlowView(Context context, @Nullable AttributeSet attrs) {
super(context, attrs);
init();
}
public RecyclerCoverFlowView(Context context, @Nullable AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init(){
setChildrenDrawingOrderEnabled(true); //开启重新排序
}
/**
* 获取LayoutManger，并强制转换为CoverFlowLayoutManger
*/
public CoverFlowLayoutManager getCoverFlowLayout() {
return ((CoverFlowLayoutManager)getLayoutManager());
}
@Override
protected int getChildDrawingOrder(int childCount, int i) {
return super.getChildDrawingOrder(childCount, i);
}
}
在这里，我们主要做了两步：
- 在初始化时，使用
setChildrenDrawingOrderEnabled(true);开启重新排序 - 因为后面，我们需要用到我们自定义的LayoutManager,所以我们额外提供了一个函数
public CoverFlowLayoutManager getCoverFlowLayout()，以供后续使用
接下来，我们就来看看如何在getChildDrawingOrder中返回对应item的绘制顺序。
5.1.6.3 计算绘制顺序原理
下图展示了位置索引与绘图顺序的关系：
在这个图中，总共有7个Item，带有圆圈的0，1，2，3，4,5,6是当前在屏幕中显示的item位置索引,它的值也是默认的绘图顺序，默认的绘图顺序就是越靠前的item越先绘制。
要想达到图上所示的效果，它的绘图顺序可以是0,1,2,6,5,4,3；因为数值代表的是绘制顺序，所以值越大的越后绘制，所以左侧的三个的顺序是0，1，2；所以，第一个item先绘制，然后第二个item盖在第一个上面；再然后，第三个item再绘制，它会盖在第二个item的上面。所以这样就保证的中间卡片左侧部分的叠加效果。右侧三个的绘制顺序是5，4，3；所以最后一个item先绘制，然后是倒数第二个，最后是倒数第三个；同样，右侧三个也可以保证图中的叠加效果。最中间的Item绘制顺序为6，所以最后绘制，所以它会盖在所有item的上面显示出来。
注意：我这里讲到这个效果的绘图顺序时，说的是“可以是”，而不是“必须是”！，只要保证下面两点，所有的绘图顺序都是正确的：
- 绘图顺序的返回值范围在0到childCount-1之间，其中(childCount表示当前屏幕中的可见item个数)
- 此绘图顺序在叠加后，可以保证最终效果
所以，如果我们把绘图顺序改为3，4，5，6，2，1，0;同样是可以达到上面的效果的。
为了方便计算规则，我们使用0,1,2,6,5,4,3的绘图顺序。
很明显，我们需要先找到所有在显示item的中间位置，中间位置的绘图顺序是count -1;
然后中间位置之前的绘图顺序和它的排列排序相同，在getChildDrawingOrder函数中，排列顺序是i，那么绘图顺序也是i;
最难的部分是中间位置之后的部分，它们的绘图顺序怎么算。
很明显，最后一个item的绘图顺序始终是center(指屏幕显示的中间item的索引，这里是3)。倒数第二个的绘图顺序是center+1,倒数第三个的绘图顺序是center+2;从这个计算中可以看出，后面的item的绘图顺序总是center+m，而m的值就是当前的item和最后一个item所间隔的个数。那当前item和最后一个item间隔的个数怎么算呢？它等于count - 1 - i;不知道大家能不能理解，count-1正常显示顺序下最后一个item的索引，也就是当前可见的item中的最大的索引，而i是屏幕中显示的item的索引，也就是上图圆圈内的数值。所以，中间后面的item的绘图顺序的计算方法是center + count - 1- i;
需要非常注意的是，这里的i是指屏幕中显示item的索引，总是从0开始的，并不是指在Adapter中所有item中的索引值。它的意义与getChildAt(i)中的i是一样的。
所以总结来讲：
- 中间位置的绘图顺序为order = count -1;
- 中间位置之前的item的绘图顺序为 order = i;
- 中间位置之后的item的绘图顺序为 order = center + count - i - i;
5.1.6.4 重写getChildDrawingOrder
在理解了如何计算绘图顺序以后，现在就开始写代码了，在上面总结中，可以看到，这里count和 i 都是getChildDrawingOrder中现成的，唯一缺少的就是center值。center值是当前可见item中间位置从0开始的索引。我们可以通过中间位置的position减去第一个可见的item的position得到。
所以，我们需要在CoverFlowLayoutManager中添加一个函数(获取中间item的positon–指在adapter中的position)：
public int getCenterPosition(){
int pos = (int) (mSumDx / getIntervalWidth());
int more = (int) (mSumDx % getIntervalWidth());
if (more > getIntervalWidth() * 0.5f) pos++;
return pos;
}
因为我们每个item的间隔都是getIntervalWidth()，所以通过mSumDx / getIntervalWidth()就可以知道当前移到了多少个item了。因为我们已经将第一个item移到了中间，所以这里的pos就是移动mSumDx以后，中间位置item的索引。
但是又因为我们通过mSumDx / getIntervalWidth()取整数时，它的结果是向下取整的。所以，但是我们想要在中间item移动时，超过一半就切换到下一个item显示。所以我们需要做一个兼容处理：
int more = (int) (mSumDx % getIntervalWidth());
if (more > getIntervalWidth() * 0.5f) pos++;
利用(int) (mSumDx % getIntervalWidth())得到当前正在移动的item移动过的距离，如果more大于半个item的话，那就让pos++，将下一个item标记为center，从而让它最后绘制，显示在最上层。
在得到中间位置的position之后，我们还需要得到第一个可见的item的position：
public int getFirstVisiblePosition() {
if (getChildCount() <= 0){
return 0;
}
View view = getChildAt(0);
int pos = getPosition(view);
return pos;
}
这里的原理也非常简单，就是利用getChildAt(0)得到当前在显示的，第一个可见的item的View,然后通过getPosition(View)得到这个view在Adapter中的position。
接下来，我们就重写getChildDrawingOrder，根据原理可得如下代码：
protected int getChildDrawingOrder(int childCount, int i) {
int center = getCoverFlowLayout().getCenterPosition()
- getCoverFlowLayout().getFirstVisiblePosition(); //计算正在显示的所有Item的中间位置
int order;
if (i == center) {
order = childCount - 1;
} else if (i > center) {
order = center + childCount - 1 - i;
} else {
order = i;
}
return order;
}
在获得绘图顺序的原理理解了之后，上面的代码就没有难度了，这里就不再细讲了。到这里，我们就实现了通过更改绘图顺序的方式，让当前选中的item在中间全部展示出来。
在我们的布局中，需要使用新定义的RecyclerView，所以将原布局改为：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".LinearActivity">
<com.example.harvic.blogrecyclerviewsec.RecyclerCoverFlowView
android:id="@+id/linear_recycler_view"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
这样，我们修改绘制顺序的代码就完成了，效果如下图所示：
5.1.7 添加滚动缩放功能
5.1.7.1 代码实现
在讲解《RecyclerView回收实现方式二》时，我们就已经实现了，在滚动时让Item旋转的功能，其实非常简单，只需要在layoutDecoratedWithMargins后，调用setRotate系列函数即可，同样的，我们先写一个针对刚添加的ChildView进行缩放的函数：
private void handleChildView(View child,int moveX){
float radio = computeScale(moveX);
child.setScaleX(radio);
child.setScaleY(radio);
}
private float computeScale(int x) {
float scale = 1 -Math.abs(x * 1.0f / (8f*getIntervalWidth()));
if (scale < 0) scale = 0;
if (scale > 1) scale = 1;
return scale;
}
在这两个函数中，handleChildView函数非常容易理解，就是先通过computeScale(moveX)计算出一个要缩放的值，然后调用setScale系列函数来缩放
这里先实现效果，至于computeScale(moveX)里的公式是如何得来的，我们最后再讲解，这里先用着。
接着，我们需要把handleChildView放在所有的layoutDecoratedWithMargins后，进行对刚布局的view进行缩放：
public int scrollHorizontallyBy(int dx, Recycler recycler, RecyclerView.State state) {
…………
//回收越界子View
for (int i = getChildCount() - 1; i >= 0; i--) {
…………
if (!Rect.intersects(rect, visibleRect)) {
removeAndRecycleView(child, recycler);
mHasAttachedItems.put(position, false);
} else {
layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);
handleChildView(child,rect.left - mStartX - mSumDx);
mHasAttachedItems.put(position, true);
}
}
…………
}
private void insertView(int pos, Rect visibleRect, Recycler recycler, boolean firstPos) {
…………
if (Rect.intersects(visibleRect, rect) && !mHasAttachedItems.get(pos)) {
…………
measureChildWithMargins(child, 0, 0);
layoutDecoratedWithMargins(child, rect.left - mSumDx, rect.top, rect.right - mSumDx, rect.bottom);
handleChildView(child,rect.left - mStartX - mSumDx);
mHasAttachedItems.put(pos, true);
}
}
到这里，我们就实现了开篇的效果：
5.1.7.2 缩放系数计算原理
我们要实现在卡片滑动时平滑的缩放，所以，在滑动过程中得到的缩放因子肯定是要连续的，所以它的函数必定是可以用直线或者曲线表示的。
在这里，我直接用一条直线来计算滚动过程中缩放因子，此直线如下图所示：
- Y轴：表示图片的缩放比例
- X轴：表示item距离中心点的距离。很明显，当中间的item的左上角在mStartX上时，此时距离中心点的距离为0，应该是最大状态，缩放因子应该是1.我这里假设在相距一个间距（getIntervalWidth()）时，大小变为7/8，当然这个值，大家都可以随意定
所以(0,1)、(1，7/8)这两个点就形成了一条直线（两点连成一条线），现在是要利用三角形相似，求出来这条直线的公式。
这里根据三角形相似求出来公式倒是难度不大，但需要注意的是，x轴上的单位是getIntervalWidth()，所以在x轴上1实际代表的是1*getIntervalWidth()；
公式求出来以后，就是输入X值，得到对应的缩放因子。那值要怎么得到呢？
我们知道X的意思是当前item与startX的间距。当间距是0时，得到1。所以x值是：rect.left - mSumDx - mStartX；
其中rect.left - mSumDx表示的是当前item在屏幕上位置。所以rect.left - mSumDx - mStartX表示的是当前item在屏幕上与mStartX的距离。
这样，缩放系数的计算原理就讲完了，当然大家也可以使用其它的缩放公式，而且也并不一定是用直线，也可以用曲线，无论用什么公式，但一定要保证是线，不能断，一旦出现断裂的情况，就会导致缩放不顺畅，会出现突然变大或者突然变小的情况。现在，大家就可以根据自己的知识储备自由发挥了。
5.1.8 bug修复
这里看似效果效果实现的非常完美，但是，当你滑动到底的时候，问题来了：
从图中可以看到，在滑动到底的时候，停留在了倒数第二个Item被选中的状态，应该让最后一个item被选中，才是真正的到底。那怎么解决呢？
还记得吗？我们在讲解《自定义LayoutManager》中，在刚写好LinearLayoutManager时，到顶和到底后都是可以继续上滑和下滑的。我们为了到顶和到底时，不让它继续滑动，特地添加了边界判断：
public int scrollHorizontallyBy(int dx, Recycler recycler, RecyclerView.State state) {
int travel = dx;
//如果滑动到最顶部
if (mSumDx + dx < 0) {
travel = -mSumDx;
} else if (mSumDx + dx > mTotalWidth - getHorizontalSpace()) {
//如果滑动到最底部
travel = mTotalWidth - getHorizontalSpace() - mSumDx;
}
…………
}
很明显，正是到底的时候，我们添加了判断，让它停留在了最后一个Item在边界的状态。所以，在这里，我们需要对到底判断加以调整，让它可滑动到最后一个item被选中的状态为止。
首先，我们需要求出来最长能滚动的距离，因为每个item之间的间距是getIntervalWidth()，当一个item滚动距离超过getIntervalWidth()时，就会切换到下一个item被选中，所以一个item最长的滚动距离其实是getIntervalWidth()，所以最大的滚动距离是：
private int getMaxOffset() {
return (getItemCount() - 1) * getIntervalWidth();
}
同样，我们使用在《自定义LayoutManager》中计算较正travel的方法：
travel + mSumDx = getMaxOffset();
=> travel = getMaxOffset() - mSumDx;
所以，我们把边界判断的代码改为：
public int scrollHorizontallyBy(int dx, Recycler recycler, RecyclerView.State state) {
int travel = dx;
//如果滑动到最顶部
if (mSumDx + dx < 0) {
travel = -mSumDx;
} else if (mSumDx + dx > getMaxOffset()) {
//如果滑动到最底部
travel = getMaxOffset() - mSumDx;
}
…………
}
现在修复了以后，到底之后就正常了，效果如下图所示：
5.1.9 拓展1：fling校正
5.1.9.1校正fling原理
其实，到这里，本节就已经结束了，但在list列表中有一个很常用的需求，但并不好实现，这里给大家提一下。
有时候，我们看别人写的list的时候，会发现一个非常有意思的现象，就是无论你怎么滚动，它的item都是能左边界对齐的，如下图所示，这是怎么做的呢？
在使用flling校正时，我们主要是重写RecyclerView中的fling方法：
public boolean fling(int velocityX, int velocityY){
return super.fling(flingX, velocityY);
}
其中：
- velocityX是横向滑动系数，系统正是根据这个系数计算出应该滑动的距离是多少,velocityX大于0时表示向右滚动，小于0时表示向左滚动
- velocityY是竖向滑动系数，系统会根据这个系统计算出竖向滑动的距离，velocityY大于0时表示向右滚动，小于0时表示向左滚动
因为我们的RecyclerView只是单向滑动，所以一般而言，我们只处理一个系数即可。在这里，我们是横向滑动，所以只需要关注velocityX就行。
一种非常简单的将滑动变得阻塞的方法就是给velocityX乘以一个小数：
public boolean fling(int velocityX, int velocityY) {
//缩小滚动距离
int flingX = (int) (velocityX * 0.40f);
return super.fling(flingX, velocityY);
}
这样就会使本来的滑动距离缩小，使用户感觉到不是那么灵敏，在适配一些高精度手机时经常会使用。
但，很明显，我们这里需要做不单单是缩小系数这个简单，而是需要更改滑动距离的，以使修正后的滑动距离刚好使item滚动到边界位置。
所以为了处理滚动距离，我们至少需要三步：
1.通过velocityX得到实际滚动距离distance
2.对distance进行校正，得到newDistance
3.通过newDistance计算得到新的滚动系数fixVelocityX
5.1.9.2 fling校正代码实现
这里有几个工具方法，可以满足步骤1和步骤3：
/**
* 根据松手后的滑动速度计算出fling的距离
*
* @param velocity
* @return
*/
private double getSplineFlingDistance(int velocity) {
final double l = getSplineDeceleration(velocity);
final double decelMinusOne = DECELERATION_RATE - 1.0;
return mFlingFriction * getPhysicalCoeff() * Math.exp(DECELERATION_RATE / decelMinusOne * l);
}
/**
* 根据距离计算出速度
*
* @param distance
* @return
*/
private int getVelocity(double distance) {
final double decelMinusOne = DECELERATION_RATE - 1.0;
double aecel = Math.log(distance / (mFlingFriction * mPhysicalCoeff)) * decelMinusOne / DECELERATION_RATE;
return Math.abs((int) (Math.exp(aecel) * (mFlingFriction * mPhysicalCoeff) / INFLEXION));
}
/**
* --------------fling辅助类---------------
*/
private static final float INFLEXION = 0.35f; // Tension lines cross at (INFLEXION, 1)
private float mFlingFriction = ViewConfiguration.getScrollFriction();
private static float DECELERATION_RATE = (float) (Math.log(0.78) / Math.log(0.9));
private float mPhysicalCoeff = 0;
private double getSplineDeceleration(int velocity) {
final float ppi = this.getResources().getDisplayMetrics().density * 160.0f;
float mPhysicalCoeff = SensorManager.GRAVITY_EARTH // g (m/s^2)
* 39.37f // inch/meter
* ppi
* 0.84f; // look and feel tuning
return Math.log(INFLEXION * Math.abs(velocity) / (mFlingFriction * mPhysicalCoeff));
}
private float getPhysicalCoeff() {
if (mPhysicalCoeff == 0) {
final float ppi = this.getResources().getDisplayMetrics().density * 160.0f;
mPhysicalCoeff = SensorManager.GRAVITY_EARTH // g (m/s^2)
* 39.37f // inch/meter
* ppi
* 0.84f; // look and feel tuning
}
return mPhysicalCoeff;
}
大家不用纠结这些函数是怎么算的，我也看不懂……，这些函数是我在OverScroller.java里抽出来的，这里最核心的是下面两个函数：
1、 double getSplineFlingDistance(int velocity)
根据滚动系数得到对应的滚动距离；对应我们步骤中的第一步。
2、int getVelocity(double distance)
根据滚动距离，反向得出滚动系数,需要注意的是，通过这个函数得到的系统始终是正值，我们需要根据原来velocityX的正负，去调整最终结果的正负。对应我们步骤中的第三步。
然后，我们来看fling校正的代码实现：
public boolean fling(int velocityX, int velocityY) {
//缩小滚动距离
int flingX = (int) (velocityX * 0.40f);
CoverFlowLayoutManager manger = getCoverFlowLayout();
double distance = getSplineFlingDistance(flingX);
double newDistance = manger.calculateDistance(velocityX,distance);
int fixVelocityX = getVelocity(newDistance);
if (velocityX > 0) {
flingX = fixVelocityX;
} else {
flingX = -fixVelocityX;
}
return super.fling(flingX, velocityY);
}
这里主要有几步：
1.缩小原滚动系数，使滑动变得阻塞，这句代码大家随意，不想加可以去掉
int flingX = (int) (velocityX * 0.40f);
2.根据滚动系数，得到原始滚动距离：
double distance = getSplineFlingDistance(flingX);
3.原始距离校正：
CoverFlowLayoutManager manger = getCoverFlowLayout();
double newDistance = manger. manger.calculateDistance(velocityX,distance);
4.根据新的距离计算出新的滚动系数
int fixVelocityX = getVelocity(newDistance);
5.对新的滚动系数进行正负校正
if (velocityX > 0) {
flingX = fixVelocityX;
} else {
flingX = -fixVelocityX;
}
6.返回给系统新的滚动系数
return super.fling(flingX, velocityY);
有了上面的工具类之后，这段代码就比较容易理解，但这里需要我们自己做的就是对原滚动距离进行校正的部分（步骤三），因为滚动的所有代码都是放在CoverFlowLayoutManager中处理的，所以对距离进行校正的代码，我们也放在CoverFloawLayoutManager中处理。
这里分为向右滚动的校正和向左回滚的校正，我们先看向右滚动的校正方法（即先忽略velocityX<0的情况）。
(1)、向右滚动校正
单纯列出向右滚动的代码如下：
public double calculateDistance(int velocityX,double distance) {
int extra = mSumDx % getIntervalWidth();
double realDistance;
if (distance < getIntervalWidth()) {
realDistance = getIntervalWidth() - extra;
}else {
realDistance = distance - distance % getIntervalWidth() - extra;
}
return realDistance;
}
这段校正的代码总共分为三步:
第一步：计算滚动余额
因为我们需要对distance进行校正，在校正之前，我们知道已经滚动了mSumDx的距离了。但这个距离并不一定是当前Item刚好被选中的初始态（也就是item最大的状态)。我们知道只我们滚动的距离是getIntervalWidth()的倍数时，当前被选中的item也是最大状态。所以，我们用mSumDx % getIntervalWidth()就可以得出当前滚动距离超出item刚好被选中的初始状态多少了。
如下图所示：
我们知道，我们需要让item的滚动距离正好是getIntervalWidth()的整数倍，才可以让当前选中的item刚好最大。也就是说，我们需要再滚动getIntervalWidth()-extra的距离。
所以，下面分两种情况进行校正：
1、如果当前的滚动距离太小，还没有getIntervalWidth()长，那么就直接让它滚动getIntervalWidth()-extra即可
realDistance = getIntervalWidth() - extra;
2、那如果distance比较长呢？我们需要先对distance进行裁剪，让distance刚好是getIntervalWidth()的整数倍。我们通过distance - distance % getIntervalWidth()将distance进行裁剪，将多余的部分减掉。然后再加上余数即可
所以它的校正值应该是：
realDistance = distance - distance % getIntervalWidth() + getIntervalWidth() - extra;
在这里，我做了个简化，因为校正后的distance已经是getIntervalWidth的倍数了，所以在extra中的getIntervalWidth()是可以不加的。所以简化后的距离校正就变为：
realDistance = distance - distance % getIntervalWidth() - extra;
这也就是上面代码中的公式了。
到这里，向右滚动的距离校正的部分就讲完了，下面来看看效果吧
可以看到，在向右滚动时，每次都能正好停留在当前Item被选中的初始位置。但如果我们向左回滚的话，问题就出现了：
可以看到，在向左滚动后，并不是每次都会停在Item被选中的初始位置。像动画中的在滚到第23个item时，很明显第23个item并不是选中的初始状态，它的大小与第24个item差不多。所以我们就来看看在向左滚动时，如何进行校正，与向右滚动的校正方法又有什么不同。
(2)、向左回滚校正
首先，大家需要了解一个事情，这里虽然是向左滚动，但如果我们使用int extra = mSumDx % getIntervalWidth();得到的extra还是下图中的“超出距离”部分吗？
答案是是的，要理解回滚的“超出距离”部分，需要知道mSumDx的值是什么？
如上图所标记的，mSumDx是从中心点到第一个item的左上角的滚动距离总和，也就是第一个Item在初始化的位置到现在的位置和距离，就是mSumDx。所以用mSumDx % getIntervalWidth()表示的就是当前滚动距离超出多少个一半卡片，所以，int extra = mSumDx % getIntervalWidth();得到的就是上图中的“超出距离”部分。
但问题来了，现在我们要校正的是向左回滚！如上图的状态，当前是停留在中心点的位置，我们只需要在向左滚动个“超出距离”，就可以滚动到卡片中心点位置了。
同样，我们要分两种情况进行校正：
1、如果当前的滚动距离太小，还没有getIntervalWidth()长，那么就直接让它滚动extra即可
realDistance = extra;
2、那如果distance比较长呢？我们需要先对distance进行裁剪，让distance刚好是getIntervalWidth()的整数倍。我们通过distance - distance % getIntervalWidth()将distance进行裁剪，将多余的部分减掉。然后再加上余数即可
所以它的校正值应该是：
realDistance = distance - distance % getIntervalWidth() + extra;
所以，组合起来，向左滚动校正的代码就是：
public double calculateDistance(int velocityX,double distance) {
int extra = mSumDx % getIntervalWidth();
double realDistance;
if (distance < getIntervalWidth()) {
realDistance = extra;
}else {
realDistance = distance - distance % getIntervalWidth() + extra;
}
return realDistance;
}
然后，我们将向右滚动和向左回滚的代码组合起来，就是完整的校正代码了：
public double calculateDistance(int velocityX,double distance) {
int extra = mSumDx % getIntervalWidth();
double realDistance;
if (velocityX>0){
if (distance < getIntervalWidth()) {
realDistance = getIntervalWidth() - extra;
}else {
realDistance = distance - distance % getIntervalWidth() - extra;
}
}else {
if (distance < getIntervalWidth()) {
realDistance = extra;
}else {
realDistance = distance - distance % getIntervalWidth() + extra;
}
}
return realDistance;
}
现在无论我们向左滚动还是向右滚动，都是可以正好停留在Item被选中的初始位置了。
5.1.10 拓展2：制作3D画廊的原理
如果我们想要制作3D画廊要怎么做呢？在VIVO的游戏空间中，3D画廊的效果非常酷：
同样地，我们也只需要计算出旋转度数曲线，然后将值设置给child.setRotationY(float rotation)即可。
先列出旋转代码：
private void handleChildView(View child, int moveX) {
float radio = computeScale(moveX);
float rotation = computeRotationY(moveX);
child.setScaleX(radio);
child.setScaleY(radio);
child.setRotationY(rotation);
}
在这里，我们首先使用float rotation = computeRotationY(moveX);计算出旋转度数，然后利用child.setRotationY(rotation);对View进行旋转。
最关键的部分是，computeRotationY(moveX)是如何实现的，它的实现代码如下：
/**
* 最大Y轴旋转度数
*/
private float M_MAX_ROTATION_Y = 30.0f;
private float computeRotationY(int x) {
float rotationY;
rotationY = -M_MAX_ROTATION_Y * x / getIntervalWidth();
if (Math.abs(rotationY) > M_MAX_ROTATION_Y) {
if (rotationY > 0) {
rotationY = M_MAX_ROTATION_Y;
} else {
rotationY = -M_MAX_ROTATION_Y;
}
}
return rotationY;
}
很明显，这里也是个函数，那我们要怎么计算出这个函数呢？
首先，我们需要定义一个旋转最大值，不能让角度无限制的旋转，这里定义的最大值是float M_MAX_ROTATION_Y = 30.0f，然后在Item在初始化状态没有移动时，旋转度数是0，假设移动到下一个item后，达到最大旋转度数。
所以，根据上面的假设，这个缩放直线就可以画出来了：
其中：
- X轴：与缩放系数曲线中X轴表示的相同，都表示item距离中心点的距离。很明显，单位是getIntervalWidth();
- Y轴：表示旋转度数。
所以，根据三角形相似，就很容易得出：
y = M_MAX_ROTATION_Y * x / getIntervalWidth();
大家可能会问了，为什么在代码中y = - M_MAX_ROTATION_Y * x / getIntervalWidth()，要加一个负号呢?
这是因为我们使用的child.setRotationY(rotation);中的setRotationY的旋转效果决定的，大家可以尝试把负号去掉，看下效果，与我们想要的旋转效果刚好是相反的：
所以，我们需要加上负号，让它的旋转效果与我们想要的相同。在计算了rotationY以后，然后需要进行最大值判断，让它最大不能超过旋转最大值：
if (Math.abs(rotationY) > M_MAX_ROTATION_Y) {
if (rotationY > 0) {
rotationY = M_MAX_ROTATION_Y;
} else {
rotationY = -M_MAX_ROTATION_Y;
}
}
到这里，3D旋转画廊就实现出来了，效果如下图所示：
这里，有关3D画廊的部分就全部讲完了，本节中主要讲解了如何利用自定义LayoutManager实现3D画廊的功能，虽然实现了效果，但这也只是一个demo，或多或少地会存在一些问题，如果用于实战中，还是很多不足的，主要是为了给大家讲解实现原理。在github上，有一个利用RecyclerView实现画廊的工程，我的工程也参考了它的代码，能够直接用于项目中，工程地址：https://github.com/ChenLittlePing/RecyclerCoverFlow
如果本文有帮到你，记得加关注哦
****源码现在不能零分下载了，必须强制最低一分，我设置为了最低分，如果没分的同学，可以从github上下载。
源码地址：https://download.****.net/download/harvic880925/10933790
github代码地址：https://github.com/harvic/harvic_blg_share 位于RecylcerView(六)
转载请标明出处，https://blog.****.net/harvic880925/article/details/86606873 谢谢