Android实现可拖动层叠卡片布局

公司app要求做一个扭蛋功能，其实就是一个可拖动层叠卡片列表，原理还是由一个自定义recyclerview和layoutmanager来实现

自定义recyclerview很简单,只是修改touch事件，防止点击到卡片外还被处理的情况

@override
    public boolean ontouchevent(motionevent e) {
        if(e.gety()< uiutil.dip2px(tutuapplication.getinstance().getcontext(),95)||e.gety()>getheight()-uiutil.dip2px(tutuapplication.getinstance().getcontext(),95)){
            if(e.getaction()!=motionevent.action_up && e.getaction()!=motionevent.action_move) {
                return false;
            }
        }
        return super.ontouchevent(e);
    }

实际的层叠效果还是需要layoutmanager来实现

public class swipecardlayoutmanager extends recyclerview.layoutmanager {
    context context;
    int trans_y_gap;
    public swipecardlayoutmanager(context context){
        trans_y_gap= (int) typedvalue.applydimension(typedvalue.complex_unit_dip,15,
                context.getresources().getdisplaymetrics());
    }
    @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) {
        super.onlayoutchildren(recycler, state);
        //1.如何实现层叠效果--cardview.layout(l,t,r,b)
        //2.如何让8个条目中的4个展示在recylerview里面
        //1在布局layout之前，将所有的子view先全部detach掉，然后放到scrap集合里面缓存。
        detachandscrapattachedviews(recycler);
        //2)只将最上面4个view添加到recylerview容器里面
        int itemcount=getitemcount();//8个
        int bottomposition;
        if(itemcount< cardconfig.max_show_count){
            bottomposition=0;
 
        }else{
            bottomposition=itemcount-cardconfig.max_show_count;
        }
        for(int i=bottomposition;i<itemcount;i++){
            view view=recycler.getviewforposition(i);
            addview(view);
            measurechildwithmargins(view,0,0);
            int widthspace=getwidth()-getdecoratedmeasuredwidth(view);
            int heightspace=getheight()-getdecoratedmeasuredheight(view);
            //摆放cardview
            //层叠效果--scale+translationy
            //层级的位置关系1/2/3/4
            int level=itemcount-i-1;
            layoutdecorated(view,
                    widthspace/2,
                    heightspace/2+statusbarutil.getstatusbarheight(tutuapplication.getinstance().getcontext()),
                    widthspace/2+getdecoratedmeasuredwidth(view),
                    heightspace/2+statusbarutil.getstatusbarheight(tutuapplication.getinstance().getcontext())+getdecoratedmeasuredheight(view));
 
            if(level>0){
                if(level<cardconfig.max_show_count){
                    view.settranslationy(cardconfig.trans_v_gap*level*1.3f);
                    view.setscalex(1-cardconfig.scale_gap*level);
                    view.setscaley(1-cardconfig.scale_gap*level);
                }
            }else {
                view.settranslationy(cardconfig.trans_v_gap*(level-1));
                view.setscalex(1-cardconfig.scale_gap*(level-1));
                view.setscaley(1-cardconfig.scale_gap*(level-1));
            }
        }
 
    }
}

显示出来就是这个样子

对于滑动显示下一张，则使用自定义itemtouchhelper.simplecallback来展示

自定义itemtouchhelper.simplecallback

public class swipecardcallback extends itemtouchhelper.simplecallback {
    private gamegachaadapter adapter;
    private recyclerview mrv;
    private onswipeendlistener listener;
    private textview tv;
    private int x = 1;
    private context context;
 
    public void refresh(){
//        x = 1;
//        tv.settext(context.getresources().getstring(r.string.explored)+(++x)+"/????");
        removecard();
    }
    public swipecardcallback(gamegachaadapter adapter, recyclerview mrv, textview view, context context) {
        super(0,
                itemtouchhelper.left | itemtouchhelper.up |
                        itemtouchhelper.right | itemtouchhelper.down
        );
        this.adapter = adapter;
        this.mrv = mrv;
        this.tv = view;
        this.context = context;
    }
    public void addgamegachalist(list<imultypehelper> mdatas){
        adapter.addadapterdata(0,mdatas);
        adapter.notifydatasetchanged();
        listener.onswipe();
    }
    public swipecardcallback(int dragdirs, int swipedirs) {
        super(dragdirs, swipedirs);
    }
 
    public swipecardcallback() {
        /*
        * 即我们对哪些方向操作关心。如果我们关心用户向上拖动，可以将
         填充swipedirs参数为left | right 。0表示从不关心。
        * */
        super(0,
                itemtouchhelper.left | itemtouchhelper.up |
                        itemtouchhelper.right | itemtouchhelper.down
        );
    }
 
 
    @override
    public boolean onmove(recyclerview recyclerview,
                          recyclerview.viewholder viewholder,
                          recyclerview.viewholder target) {
        return false;
    }
 
    @override
    public void onswiped(recyclerview.viewholder viewholder, int direction) {
        //当已经滑动删除了的时候会被回掉--删除数据，循环的效果
        removecard();
    }
 
    public void removecard() {
        if(adapter!=null && adapter.getitemcount()>0) {
            adapter.removeadapterdata(adapter.getitemcount() - 1);
//        mdatas.add(0, remove);
            adapter.notifydatasetchanged();
            listener.onswipe();
            if (adapter.getitemcount() == 6) {
                listener.onswipeend();
            }
            tv.settext(context.getresources().getstring(r.string.explored) + (++x) + "/????");
        }
    }
 
    @override
    public void clearview(@nonnull recyclerview recyclerview, @nonnull recyclerview.viewholder viewholder) {
        super.clearview(recyclerview, viewholder);
    }
 
    @override
    public void onchilddraw(canvas c, recyclerview recyclerview, recyclerview.viewholder viewholder, float dx, float dy, int actionstate, boolean iscurrentlyactive) {
        super.onchilddraw(c, recyclerview, viewholder, dx, dy, actionstate, iscurrentlyactive);
        //监听话滑动的距离--控制动画的执行程度
 
        if(dy == 0f&&!iscurrentlyactive){
            int itemcount = recyclerview.getchildcount();
            for (int i = 0; i < itemcount; i++) {
                //执行
                view view = recyclerview.getchildat(i);
                //几个view层叠的效果，错开的效果--便宜动画+缩放动画
                int level = itemcount - i - 1;
                view.setrotation(0);
                if(dx == 0) {
                    if(level>0){
                        if(level<cardconfig.max_show_count){
                            view.settranslationy(cardconfig.trans_v_gap*level*1.3f);
                            view.setscalex(1-cardconfig.scale_gap*level);
                            view.setscaley(1-cardconfig.scale_gap*level);
                        }
                    }else {
                        view.settranslationy(cardconfig.trans_v_gap*(level-1));
                        view.setscalex(1-cardconfig.scale_gap*(level-1));
                        view.setscaley(1-cardconfig.scale_gap*(level-1));
                    }
                }
            }
        }else {
            //灵界点
            double maxdistance = recyclerview.getwidth() * 1f;
            double distance = math.sqrt(dx * dx)*2;
            //动画执行的百分比
            double fraction = distance / maxdistance;
            if (fraction > 1) {
                fraction = 1;
            }
            int itemcount = recyclerview.getchildcount();
            for (int i = 0; i < itemcount; i++) {
                //执行
                view view = recyclerview.getchildat(i);
                //几个view层叠的效果，错开的效果--便宜动画+缩放动画
                int level = itemcount - i - 1;
                if(level == 0){//最外层动画
                    if(math.abs(dx) == 1080f && dy == 0f&&!iscurrentlyactive){
                        view.setrotation(0);
                    }else {
                        if(dx<0){
                            view.setrotation((float) (360f - (30 * fraction)));
                        }else {
                            view.setrotation((float) (30 * fraction));
                        }
                    }
                } else if(level ==cardconfig.max_show_count-1){//最内层动画
                    view.settranslationy((float) (cardconfig.trans_v_gap*(level-fraction)*1.3f));
                    view.setscalex((float) (1-cardconfig.scale_gap*(level-fraction)));
                    view.setscaley((float) (1-cardconfig.scale_gap*(level-fraction)));
                }else if (level < cardconfig.max_show_count - 1) {
                    view.settranslationy((float) ((level - (2*fraction)) * cardconfig.trans_v_gap));
                    view.setscalex((float) (1 - cardconfig.scale_gap * level + fraction * (cardconfig.scale_gap*2)));
                    view.setscaley((float) (1 - cardconfig.scale_gap * level + fraction * (cardconfig.scale_gap*2)));
                }
 
            }
        }
 
    }
 
    @override
    public void onselectedchanged(@nullable recyclerview.viewholder viewholder, int actionstate) {
        super.onselectedchanged(viewholder, actionstate);
    }
 
    public interface onswipeendlistener{
        void onswipeend();
        void onswipe();
    }
    public void setonswipeendlistener(onswipeendlistener listener){
        this.listener = listener;
    }
}

在activity中:

private swipecardcallback callback;
private itemtouchhelper helper; 
 
...
helper = new itemtouchhelper(callback);
 helper.attachtorecyclerview(swipeflingadapterview);
 callback.setonswipeendlistener(new swipecardcallback.onswipeendlistener() {
            @override
            public void onswipeend() {
                swipeflingadapterview.suppresslayout(true);
                gamegacharefresh.setclickable(false);
                toastutils.createtoast().showcenter(tutugamegachaactivity.this,getstring(r.string.wait_moment));
                presenter.getgamegacha(presenter_load_state_refresh);
            }
 
            @override
            public void onswipe() {
                if(arrayadapter.getitemcount()>0) {
                    swipe();
                }
            }
 
        });

这样实际效果就差不多可以了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。