登录 立即注册
安币:

安卓巴士 - 安卓开发 - Android开发 - 安卓 - 移动互联网门户

Android高仿秒拍热榜的卡片滑动和左右飞出效果

[复制链接]
来自: sdsadsadasdasd 分类: Android精品源码 上传时间: 2017-1-11 15:18:09
Tag:Android 图片 左右 项目

项目介绍:

来由
之所以做这个效果是因为项目中有这个效果需要实现。
  • 一开始我有在github上找到不少类似的库,但是发现放在项目中会发现要么有锯齿,要么就是卡顿,总之就是效果不好,其实绝大多数的库都和Swipecards差不多,做法是重写了adapterview,然后设置监听,在监听里做移动和缩放。移动用的是设置view的x和y坐标,这样做法的弊端是会频繁触发view树重绘,效率不高。
  • 后来发现这个库android-card-slide-panel,它的做法是重写了viewgroup,里面view的数目是固定的,卡片的滑动是通过viewDragHelper来做的,没有锯齿同时也不卡顿了,但是viewDragHelper有问题:
    1、在多个手指同时滑动的时候会有概率出现pointIndex out of range异常,这个问题倒没什么,我通过修改viewDragHelper的源码已经解决了这个问题;
    2、当用picasso或者glide加载图片以后,在手指拖动卡片的过程中有时会莫名的收到MotionEvent的UP事件,导致卡片回到了初始位置,这个问题折腾了我半天,后来的解决办法是弃用了viewDragHelper,直接使用Scroller。
    3、还有一点要吐槽下,这个库的使用太麻烦了,耦合太重,集成到项目里比较费事。
    效果图
    特点
  • 如丝般顺滑,这是公司产品体验过后的评价;
  • 灵活,可以通过设置几个属性,很容易就能定制可视卡片的数量和卡片的叠加垂直偏移量、缩放比例,透明度比例;
  • 使用方便,直接setadapter就可以使用了,数据更新调用swipeCardsView.notifyDatasetChanged(index);就行了,下面有使用说明。

Gradle
[XML] 查看源文件 复制代码
dependencies {
   compile 'com.huxq17.android:SwipeCardsView:1.3.4'
   //依赖下面的库
   compile 'com.android.support:appcompat-v7:23.0.1'
}

Examplexml:
[XML] 查看源文件 复制代码


    

    ...省略部分代码...


对card中属性的解释:
[XML] 查看源文件 复制代码

        
        
        
        
        
        
    

adapter:
1、抽象类
[Java] 查看源文件 复制代码
public abstract class BaseCardAdapter {
   /**
        * 获取卡片的数量
        *
        * @return
       */
       public abstract int getCount();

    /**
     * 获取卡片view的layout id
     *
     * @return
     */
    public abstract int getCardLayoutId();

    /**
     * 将卡片和数据绑定在一起
     *
     * @param position 数据在数据集中的位置
     * @param cardview 要绑定数据的卡片
     */
    public abstract void onBindData(int position, View cardview);

    /**
     * 获取可见的cardview的数目,默认是3
     * @return
     */
    public int getVisibleCardCount() {
        return 3;
    }
}

2、实现
[Java] 查看源文件 复制代码
public class MeiziAdapter extends BaseCardAdapter {
    private List datas;
    private Context context;

    public MeiziAdapter(List datas, Context context) {
        this.datas = datas;
        this.context = context;
    }

   @Override
    public int getCount() {
        return datas.size();
    }

    @Override
    public int getCardLayoutId() {
        return R.layout.card_item;
    }

    @Override
    public void onBindData(int position, View cardview) {
        if (datas == null || datas.size() == 0) {
            return;
        }
        ImageView imageView = (ImageView) cardview.findViewById(R.id.iv_meizi);
        ContentBean meizi = datas.get(position);
        String url = meizi.getUrl();
        Picasso.with(context).load(url).config(Bitmap.Config.RGB_565).into(imageView);
    }

    /**
     * 如果可见的卡片数是3,则可以不用实现这个方法
     * @return
     */
    @Override
    public int getVisibleCardCount() {
        return super.getVisibleCardCount();
    }
}

activity or fragment:
[Java] 查看源文件 复制代码
    /**
     * 卡片向左边飞出
     */
    public void doLeftOut() {
        swipeCardsView.slideCardOut(SwipeCardsView.SlideType.LEFT);
    }

    /**
     * 卡片向右边飞出
     */
    public void doRightOut() {
        swipeCardsView.slideCardOut(SwipeCardsView.SlideType.RIGHT);
    }
    /**
     * 从头开始,重新浏览
     */
    public void doRetry() {
        //必须先改变adapter中的数据,然后才能由数据变化带动页面刷新
        if (mList != null) {
            adapter.setData(mList);
            swipeCardsView.notifyDatasetChanged(0);
        }
    }
    /**
     * 显示cardsview
     */
    private void show() {
        if (adapter == null) {
            adapter = new MeiziAdapter(mList, getActivity());
            swipeCardsView.setAdapter(adapter);
        } else {
           //if you want to change the UI of SwipeCardsView,you must modify the data first
           adapter.setData(mList);
           swipeCardsView.notifyDatasetChanged(curIndex);
        }
    }
        //保留最后一张卡片,具体请看[#9]([url]https://github.com/huxq17/SwipeCardsView/issues/9[/url])
        swipeCardsView.retainLastCard(true);
        //Pass false if you want to disable swipe feature,or do nothing.
        //swipeCardsView.enableSwipe(false);
      ...省略部分代码...
        swipeCardsView = (SwipeCardsView) container.findViewById(R.id.swipCardsView);
       //设置滑动监听
        swipeCardsView.setCardsSlideListener(new SwipeCardsView.CardsSlideListener() {
            @Override
            public void onShow(int index) {
                LogUtils.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) {
                toast("点击了 position="+index);
            }
        });


相关源码推荐:

我来说两句
*滑动验证:
所有评论(20)
tylz 2017-1-11 15:20:29
支持,感谢,祝巴士越来越好~
回复
subsoil 2017-1-11 15:23:21
相当不错,感谢无私分享精神!
回复
manmanyun 2017-1-11 15:46:59
mark,收藏了
回复
einnius2012 2017-1-11 16:14:58
感谢分享,安卓巴士有你更精彩:lol
回复
humanboy 2017-1-11 16:31:16
学习...学习...
回复
myself2015 2017-1-11 16:33:08
膜拜大神~
回复
学习android 2017-1-11 17:42:10
虽不明,但觉厉!
回复
123下一页
提取码:  下载次数:10 状态:已购或VIP 售价:10(原价:10)金钱 下载权限:限制会员 
969 0 10
代码贡献英雄榜
用户名 下载数
联系我们
首页/微信公众账号投稿

帖子代码编辑/版权问题

QQ:435399051,769657487

如何获得代码达人称号

如何成为签约作者

联系我们
关闭
合作电话:
13802416937
Email:
[email protected]
商务市场合作/投稿
问题反馈及帮助
联系我们

广告投放| 申请友链|手机版|站点统计|安卓巴士 ( 粤ICP备15117877号 )

快速回复 返回顶部 返回列表