Android RecyclerView实现卡片堆叠视图

前言

最近需求里面要实现一个卡片堆叠的视图，通过卡片上下移动来切换阅读的条目，github和csdn找了不少都不能完全符合需求，所以末了还是看着别人代码一步步学着怎么实现的
需要完全实现重要是需要自界说以下几个类：
LayoutManager 用于实现堆叠视图以及视图的滑动
SnapHelper 用于帮助视图定位，可以让视图可以或许向前或者向后停顿在刚好一页的位置
实现RecyclerView的卡片视图

我这里直接通过CardView来实现

1. <?xml version="1.0" encoding="utf-8"?>
2. <androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
3.     android:layout_width="360dp"
4.     android:layout_height="500dp"
5.     app:cardCornerRadius="20dp"
6.     app:cardElevation="20dp"
7.     xmlns:app="http://schemas.android.com/apk/res-auto">
9.     <ImageView
10.         android:layout_width="match_parent"
11.         android:layout_height="match_parent"
12.         android:id="@+id/isa_iv"
13.         android:scaleType="fitStart"
14.         android:src="@drawable/xm9"
15.         />
16. </androidx.cardview.widget.CardView>

复制代码

然后写个简单的Adapter

1. class StackCardAdapter: RecyclerView.Adapter<StackCardViewHolder>() {
2.     public var data = arrayListOf(
3.         R.drawable.xm1,
4.         R.drawable.xm2,
5.         R.drawable.xm3,
6.         R.drawable.xm4,
7.         R.drawable.xm5,
8.         R.drawable.xm6,
9.         R.drawable.xm7,
10.         R.drawable.xm8,
11.         R.drawable.xm9,
12.     )
13.     override fun onCreateViewHolder(viewgroup: ViewGroup, type: Int): StackCardViewHolder {
14.         return StackCardViewHolder( LayoutInflater.from(viewgroup.context)
15.             .inflate(R.layout.item_sc_ad, viewgroup, false))
16.     }
18.     override fun getItemCount(): Int {
19.         return data.size
20.     }
22.     override fun onBindViewHolder(viewHolder: StackCardViewHolder, position: Int) {
23.         viewHolder.itemView.findViewById<ImageView>(R.id.isa_iv).setImageResource(data.get(position))
24.     }
25. }
26. class StackCardViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
27. }

复制代码

但目前用的还是基本的LinearLayoutManager，这样分列就会是线性布局，那么就需要我们自界说LayoutManager来实现差别的分列方式
LayoutManager会在每次视图发生变化的时间调用onLayoutChildren，所以我们在这里通过measureChild和measureChildWithMargins来确认子view的高宽的信息，前者不会丈量分割线长度，后者是带上分割线的丈量
实当代码如下

1. class StackCardLayoutTestManager: RecyclerView.LayoutManager(){
2.     private val TAG = "StackCardLayoutTestManager"
3.     //子视图的高宽
4.     private var mChildHeight = 0
5.     private var mChildWidth = 0
6.     //基准中心坐标
7.     private var mBaseCenterX = 0
8.     private var mBaseCenterY = 0
9.     //每个视图的偏移量
10.     private var mBaseOffSetY = 50
11.    
12.     //必须要实现此方法
13.     override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
14.         return RecyclerView.LayoutParams(
15.             RecyclerView.LayoutParams.WRAP_CONTENT,
16.             RecyclerView.LayoutParams.WRAP_CONTENT
17.         )
18.     }
19.     override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
20.         initialize(recycler)
21.         drawChildren(recycler, state)
22.     }
23.     private fun initialize(recycler: Recycler){
24.         //移除所绘制的所有view
25.         detachAndScrapAttachedViews(recycler)
26.         //这里视图里面默认每个子视图都是相同的高宽大小
27.         var itemView = recycler.getViewForPosition(0)
28.         addView(itemView)
29.         measureChildWithMargins(itemView, 0, 0)
30.         mChildHeight = getDecoratedMeasuredHeight(itemView)
31.         mChildWidth = getDecoratedMeasuredWidth(itemView)
32.         mBaseCenterX = width/2
33.         mBaseCenterY = height/2
34.         detachAndScrapAttachedViews(recycler)
35.     }
36.     private fun drawChildren(recycler: Recycler, state: State){
37.         detachAndScrapAttachedViews(recycler)
38.         /**
39.          * 这里后绘制的视图会重叠在先绘制的视图之上
40.          * 所以这里采用倒序，先绘制后面的视图，再绘制之前的
41.          */
42.         for (i in  state.itemCount -1 downTo 0){
43.             var itemView = recycler.getViewForPosition(i)
44.             addView(itemView)
45.             measureChildWithMargins(itemView, 0, 0)
46.             layoutDecoratedWithMargins(itemView,
47.                 mBaseCenterX - mChildWidth/2,
48.                 mBaseCenterY - mChildHeight/2 + mBaseOffSetY * i,
49.                 mBaseCenterX + mChildWidth/2,
50.                 mBaseCenterY + mChildHeight/2 + mBaseOffSetY * i)
51.             itemView.alpha = 1f - 0.05f * i
52.             itemView.scaleX = 1f - 0.05f * i
53.             itemView.scaleY = 1f - 0.05f * i
54.         }
55.     }
56. }

复制代码

这样刷新一下界面，子视图分列就会变成这样

这样就算是一个基础的视图了，但目前来说还不能进行滑动，所以接下来我们要实现滑动子视图的滑动
实现滑动

LayoutManager会通过canScrollHorizontallx和canScrollHorizontally方法来判断是否可以或许进行横向或者纵向滑动，然后分别在scrollVerticallyBy和scrollHorizontallyBy来分别处理纵向和横向的滑动变乱，我们可以根据传入的dx和dy参数来更改绘制子视图的位置信息，从而达到滑动的效果，因此代码修改如下：

1. class StackCardLayoutTestManager: RecyclerView.LayoutManager(){
2.     private val TAG = "StackCardLayoutTestManager"
3.     //目前就只考虑纵向滑动了
4.     private val mScrollDirection = LinearLayout.VERTICAL
5.     //子视图的高宽
6.     private var mChildHeight = 0
7.     private var mChildWidth = 0
8.     //基准中心坐标
9.     private var mBaseCenterX = 0
10.     private var mBaseCenterY = 0
11.     //每个视图的偏移量
12.     private var mBaseOffSetY = 50
13.     //滑动的总距离
14.     private var mTotalScrollY = 0
15.     //当前的卡片位置
16.     private var mCurrentPosition = 0
17.     //当前卡片滑动的百分比
18.     private var mCurrentRatio = 0f
19.     //基础的透明度
20.     private val mBaseAlpha = 1.0f
21.     //基础的缩放值
22.     private val mBaseScale = 1.0f
23.     //每张堆叠卡片的透明度变化
24.     private val mBaseAlphaChange = 0.05f
25.     //每张堆叠卡片的缩放变化
26.     private val mBaseScaleChange = 0.05f
27.     //每张卡片绘制时的Y轴位移
28.     private val mBaseOffSetYChange = 60
29.    
30.     //必须要实现此方法
31.     override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
32.         return RecyclerView.LayoutParams(
33.             RecyclerView.LayoutParams.WRAP_CONTENT,
34.             RecyclerView.LayoutParams.WRAP_CONTENT
35.         )
36.     }
37.     override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
38.         initialize(recycler)
39.         drawChildren(recycler, state)
40.     }
41.     //是否能够水平滑动
42.     override fun canScrollHorizontally(): Boolean {
43.         return mScrollDirection == LinearLayoutManager.HORIZONTAL
44.     }
45.     //是否能够竖向滑动
46.     override fun canScrollVertically(): Boolean {
47.         return mScrollDirection == LinearLayoutManager.VERTICAL
48.     }
50.     private fun initialize(recycler: Recycler){
51.         //移除所绘制的所有view
52.         detachAndScrapAttachedViews(recycler)
53.         //这里视图里面默认每个子视图都是相同的高宽大小
54.         var itemView = recycler.getViewForPosition(0)
55.         addView(itemView)
56.         measureChildWithMargins(itemView, 0, 0)
57.         mChildHeight = getDecoratedMeasuredHeight(itemView)
58.         mChildWidth = getDecoratedMeasuredWidth(itemView)
59.         mBaseCenterX = width/2
60.         mBaseCenterY = height/2
61.         detachAndScrapAttachedViews(recycler)
62.     }
64.     private fun drawChildren(recycler: Recycler, state: State , dy: Int = 0): Int{
65.         detachAndScrapAttachedViews(recycler)
66.         //向上滑动，滑动距离为负数
67.         mTotalScrollY += dy * -1
68.         //第一张图禁止向下滑动
69.         if (mTotalScrollY >= 0) mTotalScrollY = 0
70.         //最后一张图禁止向上滑动
71.         if (mTotalScrollY <= -(state.itemCount-1) * mChildHeight) mTotalScrollY = -(state.itemCount-1) * mChildHeight
72.         mCurrentPosition = Math.abs(mTotalScrollY / mChildHeight)
73.         //偏移量
74.         var offSetY = 0
75.         //透明度
76.         var alpha = 1.0f
77.         //缩放大小
78.         var scale = 1.0f
79.         //百分比,当前卡片剩余进行长度占总长度的比例
80.         mCurrentRatio = 1- Math.abs((mTotalScrollY + mCurrentPosition* mChildHeight).toFloat() / mChildHeight.toFloat())
81.         /**
82.          * 这里后绘制的视图会重叠在先绘制的视图之上
83.          * 所以这里采用倒序，先绘制后面的视图，再绘制之前的
84.          * 关于回收问题，直接仅绘制所在位置以及之后的四张即可
85.          */
86.         for (i in state.itemCount -1 downTo  0){
87.             /**
88.              * 以当前堆叠卡片的最上方视图为基准
89.              * 从这里往上的视图需要跟随滑动事件向上进行滑动处理
90.              * 大于当前视图的会是堆叠视图，就跟随最上方视图滑动的百分比，同步向上传递
91.              */
92.             if (i <= mCurrentPosition){
93.                 offSetY = mTotalScrollY - -1 *mChildHeight * i
94.             }else{
95.                 offSetY = (mBaseOffSetYChange * (i-1) - mCurrentRatio * mBaseOffSetYChange * -1 + (mCurrentPosition) * mBaseOffSetYChange * -1).toInt()
96.             }
97.             alpha = mBaseAlpha - mBaseAlphaChange * i
98.             scale = mBaseScale - mBaseScaleChange * i
99.             var view = recycler.getViewForPosition(i)
100.             measureChildWithMargins(view, 0, 0)
101.             addView(view)
102.             layoutDecoratedWithMargins(view, mBaseCenterX - mChildWidth/2, mBaseCenterY - mChildHeight/2 + offSetY, mBaseCenterX + mChildWidth/2, mBaseCenterY+ mChildHeight/2 + offSetY)
104.             view.alpha = alpha
105.             view.scaleX = scale
106.             view.scaleY = scale
107.         }
108.         //位置滑动到最底部的时候不再进行滑动处理,返回值为0
109.         return if (mTotalScrollY == 0 || mTotalScrollY == -(state.itemCount -1) * mChildHeight) 0 else dy
110.     }
112.     override fun scrollVerticallyBy(dy: Int, recycler: Recycler, state: State): Int {
113.         return drawChildren(recycler, state, dy)
114.     }
116.     override fun scrollHorizontallyBy(dx: Int, recycler: Recycler, state: State): Int {
117.         return super.scrollHorizontallyBy(dx, recycler, state)
118.     }
119. }

复制代码

这样就可以或许实现滑动效果

以上就能实现基础的堆叠视图效果和滑动变乱的处理，但这样并不能达成需求
所以添上一些优化，包括绘制数量、卡片的透明度缩放值等都跟随堆叠顶部的卡片位置变化
可以修改成以下代码

2. class StackCardLayoutTestManager: RecyclerView.LayoutManager(){
3.     private val TAG = "StackCardLayoutTestManager"
4.     //目前就只考虑纵向滑动了
5.     private val mScrollDirection = LinearLayout.VERTICAL
6.     //子视图的高宽
7.     private var mChildHeight = 0
8.     private var mChildWidth = 0
9.     //基准中心坐标
10.     private var mBaseCenterX = 0
11.     private var mBaseCenterY = 0
12.     //每个视图的偏移量
13.     private var mBaseOffSetY = 50
14.     //滑动的总距离
15.     private var mTotalScrollY = 0
16.     //当前的卡片位置
17.     private var mCurrentPosition = 0
18.     //当前卡片滑动的百分比
19.     private var mCurrentRatio = 0f
20.     //基础的透明度
21.     private val mBaseAlpha = 1.0f
22.     //基础的缩放值
23.     private val mBaseScale = 1.0f
24.     //当卡片滑动出去时的缩放值
25.     private val mOutCardScale = 0.8f
26.     //当卡片滑动出去时的透明度
27.     private val mOutCardAlpha = 0.0f
28.     //每张堆叠卡片的透明度变化
29.     private val mBaseAlphaChange = 0.3f
30.     //每张堆叠卡片的缩放变化
31.     private val mBaseScaleChange = 0.05f
32.     //每张卡片绘制时的Y轴位移
33.     private val mBaseOffSetYChange = 60
34.    
35.     //必须要实现此方法
36.     override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
37.         return RecyclerView.LayoutParams(
38.             RecyclerView.LayoutParams.WRAP_CONTENT,
39.             RecyclerView.LayoutParams.WRAP_CONTENT
40.         )
41.     }
42.     override fun onLayoutChildren(recycler: RecyclerView.Recycler, state: RecyclerView.State) {
43.         initialize(recycler)
44.         drawChildren(recycler, state)
45.     }
46.     //是否能够水平滑动
47.     override fun canScrollHorizontally(): Boolean {
48.         return mScrollDirection == LinearLayoutManager.HORIZONTAL
49.     }
50.     //是否能够竖向滑动
51.     override fun canScrollVertically(): Boolean {
52.         return mScrollDirection == LinearLayoutManager.VERTICAL
53.     }
55.     private fun initialize(recycler: Recycler){
56.         //移除所绘制的所有view
57.         detachAndScrapAttachedViews(recycler)
58.         //这里视图里面默认每个子视图都是相同的高宽大小
59.         var itemView = recycler.getViewForPosition(0)
60.         addView(itemView)
61.         measureChildWithMargins(itemView, 0, 0)
62.         mChildHeight = getDecoratedMeasuredHeight(itemView)
63.         mChildWidth = getDecoratedMeasuredWidth(itemView)
64.         mBaseCenterX = width/2
65.         mBaseCenterY = height/2
66.         detachAndScrapAttachedViews(recycler)
67.     }
69.     private fun drawChildren(recycler: Recycler, state: State , dy: Int = 0): Int{
70.         detachAndScrapAttachedViews(recycler)
71.         //向上滑动，滑动距离为负数
72.         mTotalScrollY += dy * -1
73.         //第一张图禁止向下滑动
74.         if (mTotalScrollY >= 0) mTotalScrollY = 0
75.         //最后一张图禁止向上滑动
76.         if (mTotalScrollY <= -(state.itemCount-1) * mChildHeight) mTotalScrollY = -(state.itemCount-1) * mChildHeight
77.         mCurrentPosition = Math.abs(mTotalScrollY / mChildHeight)
78.         //偏移量
79.         var offSetY = 0
80.         //透明度
81.         var alpha = 1.0f
82.         //缩放大小
83.         var scale = 1.0f
84.         //百分比,当前卡片剩余进行长度占总长度的比例
85.         mCurrentRatio = 1- Math.abs((mTotalScrollY + mCurrentPosition* mChildHeight).toFloat() / mChildHeight.toFloat())
86.         /**
87.          * 这里后绘制的视图会重叠在先绘制的视图之上
88.          * 所以这里采用倒序，先绘制后面的视图，再绘制之前的
89.          * 关于回收问题，直接仅绘制所在位置以及之后的四张即可
90.          */
91.         for (i in Math.min(mCurrentPosition + 4, state.itemCount -1) downTo mCurrentPosition){
92.             if (i == mCurrentPosition){
93.                 offSetY = mTotalScrollY - -1 *mChildHeight *i
94.                 alpha = mBaseAlpha
95.                 scale = mOutCardScale + (mBaseScale - mOutCardScale)* mCurrentRatio
96.             } else if (i < mCurrentPosition){
97.                 offSetY = mTotalScrollY - -1 *mChildHeight *i
98.                 alpha = mOutCardAlpha
99.                 scale = mOutCardScale
100.             }else{
101.                 alpha = mBaseAlpha - mBaseAlphaChange * (i-1) - mCurrentRatio* mBaseAlphaChange + mCurrentPosition* mBaseAlphaChange
102.                 scale = mBaseScale- mBaseScaleChange * (i-1) - mCurrentRatio* mBaseScaleChange + (mCurrentPosition)* mBaseScaleChange
103.                 offSetY = (mBaseOffSetYChange * (i-1) - mCurrentRatio * mBaseOffSetYChange * -1 + (mCurrentPosition) * mBaseOffSetYChange * -1).toInt()
104.             }
105.             var view = recycler.getViewForPosition(i)
106.             measureChildWithMargins(view, 0, 0)
107.             addView(view)
108.             layoutDecoratedWithMargins(view, mBaseCenterX - mChildWidth/2, mBaseCenterY - mChildHeight/2 + offSetY, mBaseCenterX + mChildWidth/2, mBaseCenterY+ mChildHeight/2 + offSetY)
110.             view.alpha = alpha
111.             view.scaleX = scale
112.             view.scaleY = scale
113.         }
114.         //位置滑动到最底部的时候不再进行滑动处理,返回值为0
115.         return if (mTotalScrollY == 0 || mTotalScrollY == -(state.itemCount -1) * mChildHeight) 0 else dy
116.     }
118.     override fun scrollVerticallyBy(dy: Int, recycler: Recycler, state: State): Int {
119.         return drawChildren(recycler, state, dy)
120.     }
122.     override fun scrollHorizontallyBy(dx: Int, recycler: Recycler, state: State): Int {
123.         return super.scrollHorizontallyBy(dx, recycler, state)
124.     }
125. }

复制代码

滑动效果现在就会修改成这样

这样离要求就很接近了，但还有不足，这里还需要让滑动之后的RecyclerView自动对齐位置
所以接下来就需要处理自动对齐的题目
自动对齐

Android将手指脱离屏幕后视图自动滑动的变乱界说为fling变乱，也就是抛掷变乱实现自动对齐可以有两个方法，一是直接利用RecyclerView.SetOnFlingListener来处理抛掷变乱，二是通过SnapHelper来处理抛掷变乱，这两个方法实际上是同一变乱的处理，利用了SnapHelper就不能在设置抛掷监听，否则要么不收效要么会闪退
我这里继承SnapHelper来处理
继承之后要实现三个方法，分别是 findSnapView，calculateDistanceToFinalSnap， findTargetSnapPosition三个方法，第一个方法将会根据LayoutManager来确定目标视图在子视图组里的位置，然后需要通过 calculateDistanceToFinalSnap 来盘算当前位置和目标视图位置隔断，之后SnapHelper在滑动开始和竣事时分别调用一次 calculateDistanceToFinalSnap 如果不能得到隔断为0就会连续进行调用, 末了是findTargetSnapPosition 方法，这里传入的值意思是抛掷本身应该滑动到的位置，可以根据这个值来确定是否需要滑动到下一页，同时，利用SnapHelper会要求Layoutmanager必须继承RecyclerView.SmoothScroller.ScrollVectorProvider
以代码如下

1. class StackCardSnapHelper_2: PagerSnapHelper() {
2.     override fun calculateDistanceToFinalSnap(
3.         layoutManager: RecyclerView.LayoutManager,
4.         targetView: View
5.     ): IntArray? {
6.         var out = intArrayOf(0, 0)
7.         if (layoutManager.canScrollVertically()){
8.             out[0] = 0
9.             out[1] = (layoutManager as StackCardLayoutTestManager)
10.                 .getDistanceToCenter(layoutManager.getPosition(targetView))
11.             return out
12.         }
13.         return null
14.     }
15.     override fun findSnapView(layoutManager: RecyclerView.LayoutManager?): View? {
16.         if (layoutManager is StackCardLayoutTestManager){
17.             var position = layoutManager.confirmTargetPosition()
18.             if (position != RecyclerView.NO_POSITION){
19.                 return layoutManager.findViewByPosition(position)
20.             }
21.         }
22.         return null
23.     }
24.     override fun findTargetSnapPosition(
25.         layoutManager: RecyclerView.LayoutManager?,
26.         velocityX: Int,
27.         velocityY: Int
28.     ): Int {
29.         var position = (layoutManager as StackCardLayoutTestManager).findTargetPosition(velocityY)
30.         return position
31.     }
32. }

复制代码

1. //在Layoutmanager中添加
2. class StackCardLayoutTestManager:
3.     RecyclerView.LayoutManager(),
4.     RecyclerView.SmoothScroller.ScrollVectorProvider
5. {
6.         ······
8.     fun getDistanceToCenter(targetPosition: Int): Int{
9.         var distance = 0
10.         distance = mTotalScrollY - mChildHeight * targetPosition * -1
11.         return distance
12.     }
13.     fun findTargetPosition(velocityY: Int):Int{
14.         val pos = Math.abs(Math.floor(mTotalScrollY.toDouble() / mChildHeight).toInt())
15.         if (velocityY >=600) return  pos
16.         if (velocityY <= -600) return  pos -1
17.         return if (mCurrentRatio > 0.5f) {
18.             pos - 1
19.         } else {
20.             pos
21.         }
22.     }
23.     fun confirmTargetPosition(): Int{
24.         var positionOffset = if(mCurrentRatio >= 0.5f) 0 else 1
25.         return mCurrentPosition + positionOffset
26.     }
27.     override fun computeScrollVectorForPosition(targetPosition: Int): PointF? {
28.         if (childCount == 0) {
29.             return null
30.         }
31.         val firstChildPos = getPosition(getChildAt(0)!!)
32.         val direction = if (targetPosition < firstChildPos != true) -1 else 1
33.         return if (mScrollOrientation == LinearLayoutManager.HORIZONTAL) {
34.             PointF(direction.toFloat(), 0f)
35.         } else {
36.             PointF(0f, direction.toFloat())
37.         }
38.     }
40.         ······
41. }

复制代码

那么终极效果就如下图

这样就完全实现了需求

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。