自定義LayoutManager仿探探切卡片效果

探探效果：

demo效果如下：

LayoutManager自定義

對於自定義LayoutManager我們主要處理好三件事情，就所有的問題就都迎刃而解了:

佈局每個ItemView
處理滑動事件
緩存重用ItemView

LayoutManager自定義時常用函數介紹

這裏定義RecyclerView裏面每個item默認的LayoutParams

@Override
public RecyclerView.LayoutParams generateDefaultLayoutParams() {
    return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
}

重寫這個函數來佈局RecyclerView當前需要顯示的item,確定每個item的位置

@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    super.onLayoutChildren(recycler, state);
    //TODO:來佈局RecyclerView當前需要顯示的item
}

處理滑動需要重寫的函數：

//是否可以水平滑動
@Override
public boolean canScrollHorizontally() {
    return true;
}

//canScrollHorizontally返回true的基礎上，RecyclerView有手指水平滑動的時候回調
//該函數 * 注意處理完之後要返回消費的距離
@Override
public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
    //TODO:滑動邏輯
    return dx;
}

//是否可以垂直滑動
@Override
public boolean canScrollVertically() {
    return true;
}

//canScrollVertically返回true的基礎上，RecyclerView有手指垂直滑動的時候回調該函數 * 注意處理完之後要返回消費的距離
@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
    //TODO:滑動邏輯
    return dy;
}

緩存重用ItemView

/* detach輕量回收View */
detachAndScrapAttachedViews(recycler);
detachAndScrapView(view, recycler);
/** * recycle真的回收一個View ，該View再次回來需要執行onBindViewHolder方法 */
removeAndRecycleView(View child, Recycler recycler)
removeAndRecycleAllViews(Recycler recycler);
/** * 超級輕量回收一個View,馬上就要添加回來,和attachView()對應 */
detachView(view);
/** * 將detachView(view)　detach的View attach回來 */
attachView(view);
/** * detachView 後 沒有attachView的話 就要真的回收掉他們 */
recycler.recycleView(viewCache.valueAt(i));

步驟一：寫一個普通recyclerView垂直列表。

步驟二：自定義LayoutManager，重寫onLayoutChildren自行處理子view位置，根據position不同處理各自的大小和偏移。

public class SlideCardLayoutManager extends RecyclerView.LayoutManager {
    private final int MAX_CARD_COUNT = 4;
    private final float SCALE_RATIO = 0.08f;
    private final float TRANSITION_Y = 30f;

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    //必須要重寫，對item設置放置規則
    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        //直接使用父類的回收功能
        detachAndScrapAttachedViews(recycler);

        int itemCount = getItemCount();  //當前adapter中總共item數
        int bottomPosition;

        if (itemCount < MAX_CARD_COUNT) {
            bottomPosition = 0;
        } else {
            bottomPosition = itemCount - MAX_CARD_COUNT;
        }

        //遍歷最下層position到最上層postion的view
        for (int i=bottomPosition;i<itemCount;i++) {
            //複用緩存view，底層就是使用了 tryGetViewHolderForPositionByDeadline
            View view = recycler.getViewForPosition(i);
            addView(view);  //將itemView添加到recyclerView中
            measureChildWithMargins(view, 0, 0);  //測量itemView

            //view在RecyclerView裏面還剩餘的寬度、高度空隙
            int viewWidth = getDecoratedMeasuredWidth(view);
            int viewHeight = getDecoratedMeasuredHeight(view);
            int widthSpace = getWidth() - viewWidth;
            int heightSpace = getHeight() - viewHeight;

            //佈局itemView，把所有itemView放在屏幕正中
            layoutDecoratedWithMargins(view, widthSpace/2, heightSpace/2,
                    widthSpace/2+ viewWidth, heightSpace/2 + viewHeight);

            //從下到上定義level
            int level = itemCount - i - 1;

            if (level < MAX_CARD_COUNT) {
                //對itemView進行y方向平移
                view.setTranslationY(TRANSITION_Y*level);
                //對itemView進行放大
                view.setScaleX(1-SCALE_RATIO*level);
            } else {
                //如果是最底下一張，則效果與前一張一樣，即不會展示出來
                view.setTranslationY(TRANSITION_Y*(level-1));
                view.setScaleX(1-SCALE_RATIO*(level-1));
            }
        }
    }
}

使用該layoutManager，就可以實現從小到大層疊放置卡片效果了，只是，這個時候沒有拖動事件。

步驟三：自定義ItemTouchHelper，重寫onChildDraw方法，在拖拽過程中遍歷子view做放大效果。

public class SlideCardCallBack extends ItemTouchHelper.SimpleCallback {
    private RecyclerView.Adapter adapter;
    private ArrayList datas;
    private final float SCALE_RATIO = 0.08f;
    private final float TRANSITION_Y = 30f;
    /**
     *     構造方法設置可滑動方向，上下左右 0x1111，參數一：拖拽  參數er：滑動
     *     public static final int UP = 1;
     *     public static final int DOWN = 1 << 1;
     *     public static final int LEFT = 1 << 2;
     *     public static final int RIGHT = 1 << 3;
     */
    public SlideCardCallBack(RecyclerView.Adapter adapter, ArrayList datas) {
        super(0, 15); //15表示支持各個方向拖拽
        this.adapter = adapter;
        this.datas = datas;
    }

    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
        return false;
    }

    //滑動動畫結束後的操作
    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
        //這裏需要將最頂層滑出去的data移除，然後添加到最底層，保證切換能循環進行
        Object remove = datas.remove(viewHolder.getLayoutPosition());
        datas.add(0, remove);
        adapter.notifyDataSetChanged();
    }

    //繪製拖拽過程中方法的效果
    @Override
    public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {

        //dx  dy分別表示當前拖拽view相對於原來橫縱座標偏移
        double distance = Math.sqrt(dX*dX+dY*dY);
        double maxDistance = recyclerView.getWidth() * 0.5f;
        double fraction = distance / maxDistance;  //偏移放大係數
        if (fraction > 1) {
            fraction = 1;  //放大係數最大爲1
        }
        //遍歷，爲每個child執行動畫
        int itemCount = recyclerView.getChildCount();
        for (int i=0;i<itemCount;i++) {
            //在動畫漸變的過程中，最大達到它上面一個卡片的大小
            View view = recyclerView.getChildAt(i);
            int level = itemCount - i - 1;
            view.setTranslationY((float) (TRANSITION_Y*level-fraction*TRANSITION_Y));
            view.setScaleX((float) (1-SCALE_RATIO*level+ fraction*SCALE_RATIO));
        }

        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }

    //設置滑動不生效回彈距離
    @Override
    public float getSwipeThreshold(@NonNull RecyclerView.ViewHolder viewHolder) {
        return 0.2f;
    }
}

給recyclerView設置ItemTouchHelper，設置拖拽事件，並在拖拽過程中，將每一個子view做放大處理。

MainActivity代碼:

class MainActivity : AppCompatActivity() {
    private var recyclerView: RecyclerView?= null
    private var adapter: CardAdapter?= null
    private var datas = ArrayList<CardBean>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recyclerView = findViewById(R.id.recyclerview)
        adapter = CardAdapter(applicationContext)
        recyclerView?.layoutManager = SlideCardLayoutManager()
        recyclerView?.adapter = adapter

        initDatas()
    }

    private fun initDatas() {
        datas.add(CardBean(R.mipmap.wanghong1))
        datas.add(CardBean(R.mipmap.wanghong2))
        datas.add(CardBean(R.mipmap.wanghong3))
        datas.add(CardBean(R.mipmap.wanghong4))
        datas.add(CardBean(R.mipmap.wanghong5))
        datas.add(CardBean(R.mipmap.wanghong6))
        adapter?.setDatas(datas)

        ItemTouchHelper(SlideCardCallBack(adapter, datas)).attachToRecyclerView(recyclerView)
    }
}

Adapter代碼：

class CardAdapter(val context: Context): RecyclerView.Adapter<CardAdapter.CardViewHolder>() {
    private var datas = ArrayList<CardBean>()

    fun setDatas(datas: ArrayList<CardBean>) {
        this.datas = datas
        notifyDataSetChanged()
    }

    class CardViewHolder(itemView: View) : ViewHolder(itemView) {
        var imageView:ImageView?= null

        init {
            imageView = itemView.findViewById(R.id.iv_cover)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
        return CardViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false))
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
        holder.imageView?.setImageResource(datas[position].coverRes)
    }

    override fun getItemCount() = datas.size
}