美文网首页
使用swipecard实现卡片视图左右滑动监听以及点击监听

使用swipecard实现卡片视图左右滑动监听以及点击监听

作者: 艾剪疏 | 来源:发表于2018-04-01 10:40 被阅读76次

    前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件swipecard,当然这并不是安卓爸爸创造的,这是国内的一个我认为是大牛的一个人随便写着玩儿搞出来了,我看了他的代码介绍已经很清晰了,但是对于刚入门学安卓的同学们来说理解还是得需要一定的时间,于是在这里我就给大家把他的代码给精简一下步骤,希望能给大家一些帮助。

    1、导入:

    第一步:首先大家需要去GitHub上去下载这个组件的压缩包然后解压,解压点开文件后应该是下图这种效果:

    6eda3e6d-3821-4ae3-8cc8-ab884c2d99a6.png

    第二步:导入Module,在file的目录下选择new选择import

    ddaa7dfa-2064-4a5d-94e5-39c038d89e86.png

    然后点击出现下图界面,在浏览你第一步下载的文件夹选择library然后点击完成

    a1344e2e-b1bf-4cb0-b712-e02373105ba8.jpg

    第三步:

    添加依赖:在file文件目录下的project structure里选择你的APP,选择depedence目录

    点击加号选择第二个Module depedence选择lib目录下点击选择添加依赖,点击完成

    至此我们对于导入Module的工作已经完成了,下面就是实现组件的效果了:

    e547df1a-241a-4c8c-ad6e-9bb1b1101ab0.png

    2、使用:

    第一步:首先我们要明白,这是一个组件,类似于ListView的一个组件,所以第一步就是在xml文件中生成它

    第二步:因为与ListView相似,所以这个组件也需要适配器,下面我们就要自定义一个适配器,但是需要继承的不是BaseAdapter而是继承咱们导入的那个Module里的BaseCardAdapter,看下面代码:(每个方法都已经有了注释,大家应该都看的明白)

    package com.jereh.biyingapplication.adapter;
    
    import android.content.Context;
    
    import android.view.View;
    
    import android.widget.ImageView;
    
    import com.bumptech.glide.Glide;
    
    import com.huxq17.swipecardsview.BaseCardAdapter;
    
    import com.jereh.biyingapplication.entity.CardImg;
    
    import com.jereh.biyingapplication.*;
    
    import java.util.List;
    
    /**
    
    * Created by zhangdi on 2016/8/31.
    
    */
    
    public class MyAdapter extends BaseCardAdapter {
    
        private List<CardImg> datas;
    
        private Context context;
    
        public MyAdapter(List<CardImg> datas, Context context) {
    
            this.datas = datas;
    
            this.context = context;
    
        }
    
        /**
    
         * 获取卡片的数量
    
         *
    
         * @return
    
         */
    
        @Override
    
        public int getCount() {
    
            if (datas.size()<1){
    
                return 0;
    
            }else {
    
                return datas.size();
    
            }
    
        }
    
        /**
    
         * 获取卡片view的layout id
    
         *
    
         * @return
    
         */
    
        @Override
    
        public int getCardLayoutId() {
    
            return R.layout.card_item;
    
        }
    
        /**
    
         * 将卡片和数据绑定在一起
    
         *
    
         * @param position 数据在数据集中的位置
    
         * @param cardview 要绑定数据的卡片
    
         */
    
        @Override
    
        public void onBindData(int position, View cardview) {
    
            if (datas == null || datas.size() == 0) {
    
                return;
    
            }
    
            ImageView imageView =
    
                    (ImageView) cardview.findViewById(R.id.lv_img);
    
            CardImg img = datas.get(position);
    
            Glide.with(context)
    
                    .load(img.getImg())
    
                    .crossFade()
    
                    .centerCrop()
    
                    .into(imageView);
    
        }
    
        /**
    
         * 获取可见的cardview的数目,默认是3
    
         * @return
    
         */
    
        @Override
    
        public int getVisibleCardCount() {
    
            return datas.size();
    
        }
    
    }
    
    第三步:现在已经有了适配器,布局中也已经有了组件,剩下要做的就是在java代码中把他们关联起来并给添加数据以及对各种事件做监听了:
    
    swipeCardsView =
    
            (SwipeCardsView)view.findViewById(R.id.swipCardsView);
    
    //设置滑动监听
    
    swipeCardsView
    
            .setCardsSlideListener(new SwipeCardsView.CardsSlideListener() {
    
                @Override
    
                public void onShow(int index) {
    
                    Log.i("test showing index = ", "" + index);
    
                }
    
                @Override
    
                public void onCardVanish(int index, SwipeCardsView.SlideType type) {
    
                    String orientation = "";
    
                    switch (type) {
    
                        case LEFT:
    
                            orientation = "向左飞出";
    
                            break;
    
                        case RIGHT:
    
                            orientation = "向右飞出";
    
                            break;
    
                    }
    
                }
    
                @Override
    
                public void onItemClick(View cardImageView, int index) {
    
                }
    
            });
    
    下面就是定义各种事件的方法以及关联适配器展示界面的方法:(其中mList是数据)
    
    /**
    
    * 卡片向左边飞出
    
    */
    
    public void doLeftOut() {
    
        swipeCardsView.slideCardOut(SwipeCardsView.SlideType.LEFT);
    
    }
    
    /**
    
    * 卡片向右边飞出
    
    */
    
    public void doRightOut() {
    
        swipeCardsView.slideCardOut(SwipeCardsView.SlideType.RIGHT);
    
    }
    
    /**
    
    * 显示cardsview
    
    */
    
    private void show() {
    
        if (adapter == null) {
    
            adapter = new MyAdapter(mList, getActivity());
    
            swipeCardsView.setAdapter(adapter);
    
        } else {
    
            swipeCardsView.notifyDatasetChanged(mList.indexOf(mList));
    
        }
    
    }
    

    至此这个组件已经完全配置完成,简单吧,希望我的笔记能对大家有所帮助,更希望大家能在自己的APP中实现,谢谢

    相关文章

      网友评论

          本文标题:使用swipecard实现卡片视图左右滑动监听以及点击监听

          本文链接:https://www.haomeiwen.com/subject/ffyzfftx.html