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

前言: 大家好,今天给大家介绍安卓一种特别实用有很酷炫的组件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中实现,谢谢

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,133评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,682评论 3 390
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,784评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,508评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,603评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,607评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,604评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,359评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,805评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,121评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,280评论 1 344
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,959评论 5 339
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,588评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,206评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,442评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,193评论 2 367
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,144评论 2 352

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,014评论 25 707
  • 在家里每个孩子都是父母的宝,那么一旦脱离这个有父母保护的环境,孩子会很容易出现一些问题,那么懦弱就是很多孩子非常常...
    刘树华阅读 398评论 0 1
  • 六 “他是谁啊,怎么没见过?” “这孩子怎...
    claosve阅读 770评论 0 3
  • “人死后会发生什么?” “冥府会有渡船人吗?” 克莱儿·麦克福尔,本是一名中学教师,因着这些好奇,创作了这部小说。...
    艳子微时光阅读 4,599评论 3 11
  • 周末带沫出去买菜,看见菜店旁边的花店门口摆着十余条各式品种的大鱼。我俩好奇地走过去,老板说是从水库钓上来的活鱼,论...
    旱草阅读 306评论 0 0