关于探探图片滑动操作

本文介绍了如何实现类似探探应用中的图片滑动操作,通过分析其原理和利用RecyclerView、LayoutManager及ItemTouchHelper,详细阐述了自定义布局和滑动交互的实现过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

之前一段时间,在朋友的推荐下,玩了探探这一款软件,初玩的时候,就发现,这款软件与一般的社交软件如陌陌之类的大相径庭,让我耳目一新,特别是探探里关于图片滑动操作让人觉得非常新鲜。所以在下通过网上之前的前辈的经历加上自己的理解,也来涉涉水。下面是网上找的探探的原界面
这里写图片描述
当时就非常想通过自己来实现这种仿探探式的效果,然而却没什么思路。不过毋庸置疑的是,这种效果的原理肯定和 ListView /RecyclerView 类似,涉及到 Item View 的回收和重用,否则早就因为大量的 Item View 而 OOM 了。
从View入手,RecyclerView 是自带 Item View 回收和重用功能的,而且,RecyclerView 的布局方式是通过设置 LayoutManager 来实现的,这样就充分地把布局和 RecyclerView 搞定了。
继承 RecyclerView.LayoutManager , 显示自己管理布局, 比如最多显示4个view, 并且都是居中显示.
底部的View还需要进行缩放,平移操作.

public class OverLayCardLayoutManager extends RecyclerView.LayoutManager {
   
    private static final String TAG = "swipecard";
    public static int MAX_SHOW_COUNT = 4;
    public static float SCALE_GAP = 0.05f;
    public static int TRANS_Y_GAP;

    public OverLayCardLayoutManager(Context context) {
        //平移时, 需要用到的参考值
        TRANS_Y_GAP = (int) (20 * context.getResources().getDisplayMetrics().density);
    }

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        //必须要实现的方法
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        //在这个方法中进行View的布局操作.此方法会被调用多次.
        detachAndScrapAttachedViews(recycler);
        int itemCount = getItemCount();
        if (itemCount < 1) {
            return;
        }
        //top-3View的position
        int bottomPosition;
        //边界处理
        if (itemCount < MAX_SHOW_COUNT) {
            bottomPosition = 0;
        } else {
            bottomPosition = itemCount - MAX_SHOW_COUNT;
        }

        //从可见的最底层View开始layout,依次层叠上去
        for (int position = bottomPosition; position < itemCount; position++) {
            //1:重recycler的缓存机制中拿到一个View
            View view = recycler.getViewForPosition(position);
            //2:和自定义ViewGroup一样, 需要先addView
            addView(view);
            //3:和自定义ViewGroup一样, 也需要测量View的大小
            measureChildWithMargins(view, 0, 0);
            int widthSpace = getWidth() - getDecoratedMeasuredWidth(view);
            int heightSpace = getHeight() - getDecoratedMeasuredHeight(view);
            //4:和自定义ViewGroup的onLayout一样, 需要layout View.对View进行布局 
            //我们在布局时,将childView居中处理,这里也可以改为只水平居中
            layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2,
                    widthSpace / 2 + getDecoratedMeasuredWidth(view),
                    heightSpace / 2 + getDecoratedMeasuredHeight(view));
            /**
             * TopView的Scale 为1,translationY 0
             * 每一级Scale相差0.05f,translationY相差7dp左右
             *
             * 观察人人影视的UI,拖动时,topView被拖动,Scale不变,一直为1.
             * top-1View 的Scale慢慢变化至1,translation也慢慢恢复0
             * top-2View的Scale慢慢变化至 top-1View的Scale,translation 也慢慢变化只top-1View的translation
             * top-3View的Scale要变化,translation岿然不动
             */

            //第几层,举例子,count =7, 最后一个TopView(6)是第0层,
            int level = itemCount - position - 1;

            //如果不需要缩放平移, 那么下面的代码可以注释掉...
            //除了顶层不需要缩小和位移
            if (level > 0 /*&& level < mShowCount - 1*/) {
                //每一层都需要X方向的缩小
                view.setScaleX(1 - SCALE_GAP * level);
                //前N层,依次向下位移和Y方向的缩小
                if (level < MAX_SHOW_COUNT - <
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值